workingInProgressWithRxForm

import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'
import classnames from 'classnames'
import { connect } from 'react-redux'
import { rxForm } from 'rx-react-form'
import { createSelector } from 'reselect'
import autobind from 'autobind-decorator'
import { FormattedMessage, injectIntl, intlShape } from 'react-intl'

import { Button, FontH1 } from 'volt-ui'
import ValidatedInput from 'components/ValidatedInput'

import { selectMasterPin, selectAdultPin } from 'store/auth'

import messages from './messages'
import styles from './index.css'

@injectIntl
@connect(
    createSelector(
        [selectMasterPin, selectAdultPin],
        (masterPin, adultPin) => ({
            masterPin,
            adultPin,
        }),
    ),
)
@rxForm({
    fields: {
        pin: {
            validation: ({ value = '', formType }, _, props) => {
                if (value.length > 0 && value.length !== 4) {
                    return messages.errorPinLength
                } else if (value.length > 0 && value !== props[formType]) {
                    return messages.errorPinLength
                }
            },
            customInput: true,
        },
        newPin: {
            validation: ({ value = '', formType }, { pin }) => {
                if (value.length > 0 && value.length !== 4) {
                    return messages.errorPinLength
                } else if (value.length > 0 && pin === value) {
                    return messages.errorNewPin
                }
            },
            customInput: true,
        },
        // confirmNewPin: {
        //     validation: (value, { newPin }) => {
        //         if (value.length !== 4) {
        //             return messages.errorPinLength
        //         } else if (value !== newPin) {
        //             return messages.errorInconsistentPin
        //         }
        //     },
        // },
    },
})
class UpdatePinForm extends PureComponent {
    static propTypes = {
        rootStyle: PropTypes.string,
        title: PropTypes.any,
        pin: PropTypes.any,
        newPin: PropTypes.any,
        confirmNewPin: PropTypes.any,
        valid: PropTypes.bool,
        intl: intlShape,
        formType: PropTypes.string,
        setValue: PropTypes.any,
        onSubmit: PropTypes.func,
        pending: PropTypes.bool,
    }

    static defaultProps = {
        rootStyle: null,
    }

    // componentDidUpdate(prevProps) {
    //     if (prevProps.formType !== this.props.formType) {
    //         this.setValue({ pin: { value: '', formType: this.props.formType } })
    //     }
    // }

    @autobind
    handlePinChange({ target: { name, value } }) {
        const { formType } = this.props

        this.props.setValue({ [name]: { value, formType } })
    }

    render() {
        const {
            rootStyle,
            pin,
            newPin,
            confirmNewPin,
            valid,
            pending,
            title,
        } = this.props
        return (
            <div className={classnames(styles.pinForm, rootStyle)}>
                <h4 className={styles.title}>
                    <FontH1>
                        <FormattedMessage {...title} />
                    </FontH1>
                </h4>
                <form>
                    <ValidatedInput
                        placeholder={this.props.intl.formatMessage(
                            messages.oldPin,
                        )}
                        isBlock={true}
                        type={'password'}
                        name="pin"
                        meta={pin}
                        onValueChange={this.handlePinChange}
                        inputStyle={styles.input}
                    />
                    <ValidatedInput
                        placeholder={this.props.intl.formatMessage(
                            messages.newPin,
                        )}
                        isBlock={true}
                        type={'password'}
                        name="newPin"
                        meta={newPin}
                        onValueChange={this.handlePinChange}
                        inputStyle={styles.input}
                    />
                    {/*<ValidatedInput
                        placeholder={this.props.intl.formatMessage(
                            messages.confirmNewPin,
                        )}
                        isBlock={true}
                        type={'password'}
                        name="confirmNewPin"
                        meta={confirmNewPin}
                        inputStyle={styles.input}
                    />*/}
                    <Button
                        type="submit"
                        rootStyle={styles.submit}
                        disabled={!valid}
                        loading={pending}
                    >
                        <FormattedMessage {...messages.submit} />
                    </Button>
                </form>
            </div>
        )
    }
}

export default UpdatePinForm