import React from 'react';
import PropTypes from 'prop-types';
import { FormattedMessage, injectIntl, intlShape } from 'react-intl';

import { bdlGray62 } from '../../styles/variables';

import Checkbox from '../../components/checkbox';
import TextInput from '../../components/text-input';
import Fieldset from '../../components/fieldset';
import QuarantineBadge from '../../icons/badges/QuarantineBadge';

import messages from './messages';

const VanityNameSection = ({
    canChangeVanityName,
    error,
    intl: { formatMessage },
    isVanityEnabled,
    vanityName,
    vanityNameInputProps = {},
    serverURL,
    onChange,
    onCheckboxChange,
}) => {
    const inputValue = canChangeVanityName ? vanityName : vanityName || formatMessage(messages.vanityNameNotSet);

    const vanityURLInput = (
        <div className="vanity-name-content">
            <TextInput
                description={
                    <span>
                        <QuarantineBadge color={bdlGray62} />
                        <FormattedMessage {...messages.vanityURLWarning} />
                    </span>
                }
                hideLabel
                disabled={!canChangeVanityName}
                error={error}
                name="vanityName"
                onChange={onChange}
                placeholder={formatMessage(messages.vanityNamePlaceholder)}
                type="text"
                value={inputValue}
                {...vanityNameInputProps}
            />
            {(canChangeVanityName || !!vanityName) && (
                <p className="custom-url-preview">{`${serverURL}${vanityName}`}</p>
            )}
        </div>
    );

    return (
        <div>
            <hr />
            <Fieldset className="vanity-name-section" title={<FormattedMessage {...messages.customURLLabel} />}>
                <Checkbox
                    label={<FormattedMessage {...messages.vanityURLEnableText} />}
                    isChecked={isVanityEnabled}
                    subsection={isVanityEnabled ? vanityURLInput : undefined}
                    onChange={onCheckboxChange}
                />
            </Fieldset>
        </div>
    );
};

VanityNameSection.propTypes = {
    canChangeVanityName: PropTypes.bool.isRequired,
    error: PropTypes.string,
    intl: intlShape.isRequired,
    isVanityEnabled: PropTypes.bool.isRequired,
    vanityName: PropTypes.string.isRequired,
    vanityNameInputProps: PropTypes.object,
    serverURL: PropTypes.string.isRequired,
    onChange: PropTypes.func,
};

export { VanityNameSection as VanityNameSectionBase };
export default injectIntl(VanityNameSection);