import React from 'react'
import PropTypes from 'prop-types'
import Form from 'react-toolkit/form'
import TextInput from 'react-uikit/input-text'
import Layout from 'react-uikit/layout'
import inputNames from 'common-fe/constants/input-names'

import BEMModule from 'utils/bem'
import styles from './styles.scss'

const bem = new BEMModule(styles)

class AuthorizeRequestForm extends React.Component {
    static formName = 'authorize-request'

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

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

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

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

        const classes = bem.classNames('c-authorize-request')
        const legendClasses = bem.classNames('c-authorize-request__legend')

        return (
            <Form
                data={data}
                error={error}
                name={AuthorizeRequestForm.formName}
                submitOnEnter
                onChange={this.change}
                onError={onError}
                onSubmit={onSubmit}
            >
                <fieldset className={classes}>
                    <Layout.Flex
                        direction="column"
                        justify="center"
                        align="center"
                    >
                        <legend className={legendClasses}>
                            Please enter your password to authorize this action
                            and continue.
                        </legend>

                        <section>
                            <Form.Field
                                component={TextInput}
                                name={inputNames.PASSWORD}
                                placeholder="password"
                                required
                                size="small"
                                type="password"
                            />
                        </section>

                        <Form.SubmitTrigger render={submitButton} />
                    </Layout.Flex>
                </fieldset>
            </Form>
        )
    }
}

AuthorizeRequestForm.propTypes = {
    data: PropTypes.shape({
        [inputNames.PASSWORD]: PropTypes.string,
    }),
    error: PropTypes.shape({
        [inputNames.PASSWORD]: PropTypes.string,
    }),
    submitButton: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
    onChange: PropTypes.func,
    onError: PropTypes.func,
    onSubmit: PropTypes.func,
}

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

export default AuthorizeRequestForm