import React from 'react'
import PropTypes from 'prop-types'
import Form from 'react-toolkit/form'
import FormError from 'common-fe/utils/form-error'
import TextInput from 'react-uikit/input-text'
import Button from 'react-uikit/button'
import inputNames from 'common-fe/constants/input-names'
import {densifyObj} from 'common-fe/utils'

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

class UsernameSettingsForm extends React.Component {
    static formName = 'username-settings'

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

    get initialState() {
        return {
            data: {
                [inputNames.FIRST_NAME]: this.props.user.firstName,
                [inputNames.LAST_NAME]: this.props.user.lastName,
            },
            error: {},
        }
    }

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

    updateUser = (data) => {
        const {user, updateUser, onError, onSubmit} = this.props

        if (!updateUser) {
            return
        }

        const payload = densifyObj({
            userId: user.id,
            payload: {
                [inputNames.FIRST_NAME]: data[inputNames.FIRST_NAME],
                [inputNames.LAST_NAME]: data[inputNames.LAST_NAME],
            },
        })
        updateUser(payload)
            .then(() => onSubmit && onSubmit(payload))
            .catch((err) => {
                if (!err.inlineErrors || !err.inlineErrors.length || !onError) {
                    return
                }

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

                onError && onError(error)
            })
    }

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

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

        return (
            <Form
                className={classNames}
                data={data}
                error={error}
                name={UsernameSettingsForm.formName}
                validateOnUpdate={validateOnUpdate}
                onChange={this.change}
                onError={onError}
                onSubmit={this.updateUser}
            >
                <label
                    className={labelClassNames}
                    htmlFor={inputNames.FIRST_NAME}
                >
                    Name
                </label>

                <div className={fieldContainerClassNames}>
                    <Form.Field
                        className={fieldClassNames}
                        component={TextInput}
                        maxLength={30}
                        name={inputNames.FIRST_NAME}
                        required
                        size="small"
                    />
                    <Form.Field
                        className={fieldClassNames}
                        component={TextInput}
                        maxLength={30}
                        name={inputNames.LAST_NAME}
                        required
                        size="small"
                    />
                </div>

                <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>
        )
    }
}

UsernameSettingsForm.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,
    }),
    updateEmail: PropTypes.func,
    updatePassword: PropTypes.func,
    updateUser: PropTypes.func,
    user: PropTypes.shape({
        firstName: PropTypes.string,
        id: PropTypes.string,
        lastName: PropTypes.string,
    }),
    validateOnUpdate: PropTypes.bool,
    onCancel: PropTypes.func,
    onChange: PropTypes.func,
    onError: PropTypes.func,
    onSubmit: PropTypes.func,
}

UsernameSettingsForm.defaultProps = {
    data: {...UsernameSettingsForm.defaultState.data},
    error: {...UsernameSettingsForm.defaultState.error},
}

export default UsernameSettingsForm