import React from 'react'
import PropTypes from 'prop-types'
import {validateInput} from 'common-fe/utils/validation'
import BEMModule from 'utils/bem'
import Button from 'react-uikit/button'
import Form from 'react-toolkit/form'
import FormError from 'common-fe/utils/form-error'
import inputNames from 'common-fe/constants/input-names'
import styles from './styles.scss'
import TextInput from 'react-uikit/input-text'

const bem = new BEMModule(styles)

const PasswordResetSubmit = ({submit, className}) => (
    <Button
        className={className}
        variant="primary"
        text="Send reset email"
        onClick={submit}
    />
)

PasswordResetSubmit.propTypes = {
    className: PropTypes.string,
    submit: PropTypes.func,
}

class PasswordResetForm extends React.Component {
    static formName = 'reset-password'

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

    form = React.createRef()

    get initialState() {
        return {
            data: {...PasswordResetForm.defaultState.data},
            error: {...PasswordResetForm.defaultState.error},
        }
    }

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

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

    submit = (data) => {
        const {sendPasswordResetEmail, onError, onSubmit} = this.props

        if (!sendPasswordResetEmail) {
            return
        }

        const payload = {[inputNames.EMAIL]: data[inputNames.EMAIL]}

        sendPasswordResetEmail(payload)
            .then(() => onSubmit && onSubmit(payload))
            .catch((err) => {
                if (!err.inlineErrors || !err.inlineErrors.length || !onError) {
                    return
                }

                const error = new FormError(
                    Object.keys(PasswordResetForm.defaultState.data),
                    err.inlineErrors
                )

                onError && onError(error)
            })
    }

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

        const rootClassNames = bem.classNames('c-password-reset')
        const legendClassNames = bem.classNames('c-password-reset__legend')
        const hrClassNames = bem.classNames('c-password-reset__hr')
        const messageClassNames = bem.classNames('c-password-reset__message')
        const labelClassNames = bem.classNames('c-password-reset__label')
        const createButtonClassName = bem.classNames('c-password-reset__button')

        return (
            <Form
                className={rootClassNames}
                data={data}
                error={error}
                name={PasswordResetForm.formName}
                onChange={this.change}
                onError={onError}
                onSubmit={this.submit}
                ref={this.form}
                submitOnEnter={true}
                validate={this.validate}
            >
                <fieldset>
                    <legend className={legendClassNames}>
                        Forgot your password? No problem! Please, provide the
                        email you registered with and you will receive a link to
                        reset your password.
                        <hr className={hrClassNames} />
                    </legend>

                    <section className={messageClassNames}>
                        <div>
                            <label
                                className={labelClassNames}
                                htmlFor={inputNames.EMAIL}
                            >
                                Email
                            </label>
                            <Form.Field
                                component={TextInput}
                                name={inputNames.EMAIL}
                                size="small"
                                type="email"
                                placeholder="email@address.com"
                            />
                        </div>
                    </section>
                    <Form.SubmitTrigger
                        render={PasswordResetSubmit}
                        className={createButtonClassName}
                    />
                </fieldset>
            </Form>
        )
    }
}

PasswordResetForm.propTypes = {
    data: PropTypes.shape({
        [inputNames.EMAIL]: PropTypes.string,
    }),
    error: PropTypes.shape({
        [inputNames.EMAIL]: PropTypes.string,
    }),
    sendPasswordResetEmail: PropTypes.func,
    onChange: PropTypes.func,
    onError: PropTypes.func,
    onSubmit: PropTypes.func,
}

PasswordResetForm.defaultProps = {
    data: {...PasswordResetForm.defaultState.data},
    error: {...PasswordResetForm.defaultState.error},
    validateOnUpdate: true,
}

export default PasswordResetForm