import React, { Fragment } from 'react'
import { get, has } from 'lodash'
import { Field } from 'redux-form'
import { required } from 'xpub-validators'
import { AbstractEditor } from 'xpub-edit'
import { Menu, YesOrNo, ValidatedField } from '@pubsweet/ui'

import {
  FormItems,
  AuthorList,
} from 'pubsweet-components-faraday/src/components'

import { Empty } from './'

const {
  Err,
  Row,
  Label,
  Title,
  RowItem,
  Subtitle,
  TextField,
  TextAreaField,
} = FormItems

const StepTwo = ({
  version,
  project,
  formValues,
  submitFailed,
  formSyncErrors,
  manuscriptTypes,
}) => (
  <Fragment>
    <Title>2. Manuscript & Authors Details</Title>
    <Subtitle>
      Please provide the details of all the authors of this manuscript, in the
      order that they appear on the manuscript. Your details are already
      prefiled since, in order to submit a manuscript you must be one of the
      authors.
    </Subtitle>
    <Row>
      <RowItem flex={3} vertical withRightMargin>
        <Label>MANUSCRIPT TITLE*</Label>
        <ValidatedField
          component={TextField}
          name="metadata.title"
          validate={[required]}
        />
      </RowItem>
      <RowItem vertical>
        <Label>MANUSCRIPT TYPE*</Label>
        <ValidatedField
          component={input => <Menu options={manuscriptTypes} {...input} />}
          name="metadata.type"
          validate={[required]}
        />
      </RowItem>
    </Row>
    <Row>
      <RowItem vertical>
        <Label>ABSTRACT*</Label>
        <ValidatedField
          component={AbstractEditor}
          name="metadata.abstract"
          validate={[required]}
        />
      </RowItem>
    </Row>
    <Row>
      <RowItem vertical>
        <Label>AUTHORS DETAILS*</Label>
        <Field component={Empty} name="authors" />
        <AuthorList
          parentForm="submission"
          project={project}
          version={version}
        />
        {submitFailed &&
          has(formSyncErrors, 'authors') && (
            <Err align="left">{get(formSyncErrors, 'authors')}</Err>
          )}
      </RowItem>
    </Row>

    <Row>
      <RowItem vertical>
        <Label>Is there a potential conflict of interest?</Label>
        <Field
          component={({ input }) => <YesOrNo {...input} />}
          name="conflicts.hasConflicts"
        />
      </RowItem>
    </Row>

    {get(formValues, 'conflicts.hasConflicts', 'no') === 'yes' && (
      <Row>
        <RowItem vertical>
          <Label>CONFLICT OF INTEREST DETAILS*</Label>
          <ValidatedField
            component={TextAreaField}
            name="conflicts.message"
            validate={[required]}
          />
        </RowItem>
      </Row>
    )}
  </Fragment>
)

export default StepTwo