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

import { FormItems } from '../UIComponents'

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

const Step0 = ({ journal, handleSubmit, initialValues, error }) =>
  !isUndefined(initialValues) ? (
    <FormContainer onSubmit={handleSubmit}>
      <Row>
        <RowItem vertical withRightMargin>
          <Label>First name*</Label>
          <ValidatedField
            component={TextField}
            name="firstName"
            validate={[required]}
          />
        </RowItem>
        <RowItem vertical withRightMargin>
          <Label>Last name*</Label>
          <ValidatedField
            component={TextField}
            name="lastName"
            validate={[required]}
          />
        </RowItem>
      </Row>
      <Row>
        <RowItem vertical withRightMargin>
          <Label>Affiliation*</Label>
          <ValidatedField
            component={TextField}
            name="affiliation"
            validate={[required]}
          />
        </RowItem>

        <RowItem vertical withRightMargin>
          <Label>Title*</Label>
          <ValidatedField
            component={input => <Menu {...input} options={journal.title} />}
            name="title"
            validate={[required]}
          />
        </RowItem>
      </Row>
      <Row>
        <RowItem centered>
          <Button primary type="submit">
            CONFIRM & PROCEED TO SET PASSWORD
          </Button>
        </RowItem>
      </Row>
    </FormContainer>
  ) : (
    <div>{!isUndefined(error) && 'Loading...'}</div>
  )

export default reduxForm({
  form: 'signUpInvitation',
  destroyOnUnmount: false,
  enableReinitialize: true,
  forceUnregisterOnUnmount: true,
})(Step0)