import React, { Fragment } from 'react'
import { reduxForm } from 'redux-form'
import { required } from 'xpub-validators'
import { Button, ValidatedField, TextField } from '@pubsweet/ui'

import { FormItems } from '../UIComponents'
import { passwordValidator, emailValidator } from '../utils'

const { Row, Err, Label, RowItem, FormContainer } = FormItems

const PasswordField = input => <TextField {...input} type="password" />
const EmailField = input => <TextField {...input} type="email" />

const SignUpForm = () => (
  <Fragment>
    <Row>
      <RowItem vertical>
        <Label>Email</Label>
        <ValidatedField
          component={EmailField}
          name="email"
          validate={[required, emailValidator]}
        />
      </RowItem>
    </Row>
    <Row>
      <RowItem vertical>
        <Label>Password</Label>
        <ValidatedField
          component={PasswordField}
          name="password"
          validate={[required]}
        />
      </RowItem>
    </Row>
    <Row>
      <RowItem vertical>
        <Label>Confirm password</Label>
        <ValidatedField
          component={PasswordField}
          name="confirmPassword"
          validate={[required]}
        />
      </RowItem>
    </Row>
  </Fragment>
)

const InviteForm = () => (
  <Fragment>
    <Row>
      <RowItem vertical>
        <Label>Password</Label>
        <ValidatedField
          component={PasswordField}
          name="password"
          validate={[required]}
        />
      </RowItem>
    </Row>
    <Row>
      <RowItem vertical>
        <Label>Confirm password</Label>
        <ValidatedField
          component={PasswordField}
          name="confirmPassword"
          validate={[required]}
        />
      </RowItem>
    </Row>
  </Fragment>
)

const ForgotEmailForm = () => (
  <Fragment>
    <Row>
      <RowItem vertical>
        <Label>Email</Label>
        <ValidatedField
          component={EmailField}
          name="email"
          validate={[required, emailValidator]}
        />
      </RowItem>
    </Row>
  </Fragment>
)

const withoutBack = ['forgotPassword', 'setPassword']
const Step1 = ({
  error,
  prevStep,
  submitting,
  handleSubmit,
  type = 'invite',
}) => (
  <FormContainer onSubmit={handleSubmit}>
    {type === 'signup' && <SignUpForm />}
    {type === 'setPassword' && <InviteForm />}
    {type === 'forgotPassword' && <ForgotEmailForm />}
    {type === 'invite' && <InviteForm />}
    {error && (
      <Row>
        <RowItem>
          <Err>{error}</Err>
        </RowItem>
      </Row>
    )}
    <Row />

    <Row>
      {!withoutBack.includes(type) && (
        <Button onClick={prevStep} type="button">
          BACK
        </Button>
      )}
      <Button disabled={submitting} primary type="submit">
        CONFIRM
      </Button>
    </Row>
  </FormContainer>
)

export default reduxForm({
  form: 'signUpInvitation',
  destroyOnUnmount: false,
  forceUnregisterOnUnmount: true,
  validate: passwordValidator,
})(Step1)