import React from 'react';
import PropTypes from 'prop-types';
import { noop } from 'node-noop';
import { Field } from 'redux-form';
import { withStyles } from '@material-ui/core/styles';

import LoginButton from '../../Login/LoginForm/LoginButton/LoginButton';
import TextInput from '../../TextInput/TextInput';
import Alert from '../../Alert/Alert';

const styles = theme => ({
  form: {
    margin: `${theme.spacing.unit * 7}px 0px`,
    position: 'relative',
    flexGrow: 1
  },
  alert: {
    margin: `0px ${theme.spacing.unit * 7}px`,
    position: 'absolute',
    top: `${-theme.spacing.unit * 14}`,
    right: 0,
    left: 0
  }
});

const renderField = ({ label, ...rest }) => (
  <div>
    <TextInput label={label} {...rest} />
  </div>
);

class TwoFactorForm extends React.Component {
  componentDidMount() {
    const { email, change, } = this.props;
    change('email', email);
  }

  render() {
    const {
      messages,
      submitting,
      handleSubmit,
      error,
      classes
    } = this.props;

    return (
      <form
        className={classes.form}
        onSubmit={handleSubmit}
        autoComplete="off"
      >
        {error && <Alert styleSheet={classes.alert} messages={messages} type={error} />}
        <Field name="token" type="text" label="Token" component={renderField} />
        <LoginButton type="submit" disabled={submitting} />
      </form>
    );
  }
}

TwoFactorForm.propTypes = {
  handleSubmit: PropTypes.func,
  change: PropTypes.func,
  submitting: PropTypes.bool,
  messages: PropTypes.shape({}),
  error: PropTypes.string,
  email: PropTypes.string,
};

TwoFactorForm.defaultProps = {
  handleSubmit: noop,
  change: noop,
  submitting: false,
  messages: {
    default: 'default message'
  },
  error: undefined,
  email: '',
};

export default withStyles(styles)(TwoFactorForm);