import React from 'react'
import PropTypes from 'prop-types'
import inputNames from 'common-fe/constants/input-names'
import FormError from 'common-fe/utils/form-error'
import {densifyObj} from 'common-fe/utils'

import Form from 'react-uikit/form'
import Button from 'react-uikit/button'
import TextInput from 'react-uikit/input-text'

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

class StudentNumberSettingsForm extends React.Component {
    static formName = 'student-number-settings'

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

    get initialState() {
        return {
            data: {
                [inputNames.STUDENT_ID]:
                    this.props.user.studentNumber ||
                    StudentNumberSettingsForm.defaultState.data[
                        inputNames.STUDENT_ID
                    ],
            },
            error: {...StudentNumberSettingsForm.defaultState.error},
        }
    }

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

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

        if (!updateParticipant) {
            return
        }

        const payload = densifyObj({
            userId: user.id,
            payload: {
                [inputNames.STUDENT_ID]: data[inputNames.STUDENT_ID],
            },
        })

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

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

                onError && onError(error)
            })
    }

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

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

        return (
            <Form
                className={classNames}
                data={data}
                error={error}
                name={StudentNumberSettingsForm.formName}
                onChange={this.change}
                onError={onError}
                onSubmit={this.updateStudentNumber}
            >
                <label
                    className={labelClassNames}
                    htmlFor={inputNames.STUDENT_ID}
                >
                    Student Number
                </label>
                <Form.Field
                    className={fieldClassNames}
                    name={inputNames.STUDENT_ID}
                    render={TextInput}
                    size="small"
                />
                <div className={submitClassNames}>
                    <Button
                        className={buttonClassNames}
                        isOutline
                        variant="neutral"
                        size="small"
                        text="cancel"
                        onClick={onCancel}
                    />
                    <Form.SubmitTrigger
                        render={({submit}) => (
                            <Button
                                className={buttonClassNames}
                                variant="primary"
                                size="small"
                                text="save"
                                onClick={submit}
                            />
                        )}
                    />
                </div>
            </Form>
        )
    }
}

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

StudentNumberSettingsForm.propTypes = {
    data: PropTypes.shape({
        [inputNames.STUDENT_ID]: PropTypes.string,
    }),
    error: PropTypes.shape({
        [inputNames.STUDENT_ID]: PropTypes.string,
    }),
    updateParticipant: PropTypes.func,
    user: PropTypes.shape({
        id: PropTypes.string,
        studentNumber: PropTypes.string,
    }),
    onCancel: PropTypes.func,
    onChange: PropTypes.func,
    onError: PropTypes.func,
    onSubmit: PropTypes.func,
}

export default StudentNumberSettingsForm