import React from 'react'
import PropTypes from 'prop-types'
import Form from 'react-toolkit/form'
import TextInput from 'react-uikit/input-text'
import Button from 'react-uikit/button'
import inputNames from 'common-fe/constants/input-names'
import {validateInput} from 'common-fe/utils/validation'
import alertTypes from 'containers/alert-manager/alert-types'

import BEMModule from 'utils/bem'
import styles from './styles.scss'
const bem = new BEMModule(styles)

class EmailSettingsForm extends React.Component {
    static formName = 'email-settings'

    static defaultState = {
        data: {
            [inputNames.EMAIL]: '',
        },
        error: {},
    }

    get initialState() {
        return {
            data: {
                [inputNames.EMAIL]: this.props.user.email,
            },
            error: {},
        }
    }

    change = ({name, value}) => {
        this.props.onChange && this.props.onChange({[name]: value})
    }

    updateEmail = (data) => {
        const {user, showAlert} = this.props

        showAlert &&
            showAlert({
                type: alertTypes.AUTHORIZE_EMAIL_UPDATE,
                userId: user.id,
                [inputNames.EMAIL]: data[inputNames.EMAIL],
            })
    }

    validate = ({name, value, isRequired}) => {
        let error = validateInput({name, value, isRequired})

        switch (name) {
            case inputNames.EMAIL: {
                const {
                    user: {email: currentEmail},
                } = this.props
                // Don't want users to be able to set their email to be their
                // current email.
                if (value === currentEmail) {
                    error =
                        'The new email must be different from your current email'
                }

                break
            }
        }

        return error
    }

    render() {
        const {data, error, validateOnUpdate, onCancel, onError} = this.props

        const classNames = bem.classNames('c-email-settings-form')
        const labelClassNames = bem.classNames('c-email-settings-form__label')
        const fieldClassNames = bem.classNames('c-email-settings-form__field')
        const buttonClassNames = bem.classNames('c-email-settings-form__button')
        const submitClassNames = bem.classNames('c-email-settings-form__submit')

        return (
            <Form
                className={classNames}
                data={data}
                error={error}
                name={EmailSettingsForm.formName}
                validate={this.validate}
                validateOnUpdate={validateOnUpdate}
                onChange={this.change}
                onError={onError}
                onSubmit={this.updateEmail}
            >
                <label className={labelClassNames} htmlFor={inputNames.EMAIL}>
                    Email
                </label>
                <Form.Field
                    className={fieldClassNames}
                    component={TextInput}
                    name={inputNames.EMAIL}
                    size="small"
                    required
                />
                <div className={submitClassNames}>
                    <Button
                        className={buttonClassNames}
                        isOutline
                        variant="neutral"
                        size="small"
                        text="Cancel"
                        onClick={onCancel}
                    />
                    <Form.SubmitTrigger
                        render={({submit}) => (
                            <Button
                                className={buttonClassNames}
                                variant="primary"
                                text="Save"
                                size="small"
                                onClick={submit}
                            />
                        )}
                    />
                </div>
            </Form>
        )
    }
}

EmailSettingsForm.propTypes = {
    data: PropTypes.shape({
        [inputNames.FIRST_NAME]: PropTypes.string,
        [inputNames.LAST_NAME]: PropTypes.string,
    }),
    error: PropTypes.shape({
        [inputNames.FIRST_NAME]: PropTypes.string,
        [inputNames.LAST_NAME]: PropTypes.string,
    }),
    showAlert: PropTypes.func,
    user: PropTypes.shape({
        email: PropTypes.string,
        id: PropTypes.string,
    }),
    validateOnUpdate: PropTypes.bool,
    onCancel: PropTypes.func,
    onChange: PropTypes.func,
    onError: PropTypes.func,
}

EmailSettingsForm.defaultProps = {
    data: {...EmailSettingsForm.defaultState.data},
    error: {...EmailSettingsForm.defaultState.error},
    validateOnUpdate: false,
}

export default EmailSettingsForm