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

import { FormItems } from '../UIComponents'

const {
  FormContainer,
  Row,
  RowItem,
  Label,
  PrivatePolicy,
  DefaultText,
} = 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 justify="left">
        <ValidatedField
          component={input => (
            <Checkbox checked={input.value} type="checkbox" {...input} />
          )}
          name="agreeTC"
          validate={[required]}
        />
        <DefaultText>
          By creating this account, you agree to the{' '}
          <a
            href="https://www.hindawi.com/terms/"
            rel="noopener noreferrer"
            target="_blank"
          >
            Terms of Service
          </a>.
        </DefaultText>
      </Row>
      <Row>
        <PrivatePolicy>
          This account information will be processed by us in accordance with
          our Privacy Policy for the purpose of registering your Faraday account
          and allowing you to use the services available via the Faraday
          platform. Please read our{' '}
          <a
            href="https://www.hindawi.com/privacy/"
            rel="noopener noreferrer"
            target="_blank"
          >
            Privacy Policy
          </a>{' '}
          for further information.
        </PrivatePolicy>
      </Row>
      <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)