import React, { Fragment } from 'react'
import { get } from 'lodash'
import { Field } from 'redux-form'
import { required } from 'xpub-validators'
import {
  Row,
  Text,
  Item,
  Label,
  ActionLink,
  WizardAuthors,
  RadioWithComments,
} from 'pubsweet-component-faraday-ui'
import { H2, Menu, TextField, ValidatedField } from '@pubsweet/ui'

import { Empty } from './'

const StepTwo = ({
  version,
  project,
  journal,
  addAuthor,
  changeForm,
  formValues,
  authorsError,
  manuscriptTypes,
  ...rest
}) => (
  <Fragment>
    <H2>2. Manuscript & Author Details</H2>
    <Row mb={2}>
      <Text align="center" secondary>
        Please provide the details of all the authors of this manuscript, in the
        order that they appear on the manuscript. Your details have been
        prefilled as the submitting author.
      </Text>
    </Row>

    <Row mb={1}>
      <Item data-test-id="submission-title" flex={3} mr={1} vertical>
        <Label required>MANUSCRIPT TITLE</Label>
        <ValidatedField
          component={TextField}
          name="metadata.title"
          validate={[required]}
        />
      </Item>
      <Item data-test-id="submission-type" vertical>
        <Label required>MANUSCRIPT TYPE</Label>
        <ValidatedField
          component={input => (
            <Menu
              options={manuscriptTypes}
              {...input}
              placeholder="Please select"
            />
          )}
          name="metadata.type"
          validate={[required]}
        />
      </Item>
    </Row>

    <Row mb={1}>
      <Item data-test-id="submission-abstract" vertical>
        <Label required>ABSTRACT</Label>
        <ValidatedField
          component={TextField}
          name="metadata.abstract"
          validate={[required]}
        />
      </Item>
    </Row>

    <Field component={Empty} name="authors" />
    <WizardAuthors
      addAuthor={addAuthor}
      authors={get(version, 'authors', [])}
      changeForm={changeForm}
      error={authorsError}
      journal={journal}
      project={project}
      version={version}
    />

    <RadioWithComments
      commentsFieldName="conflicts.message"
      commentsLabel="Conflict of interest details"
      commentsOn="yes"
      formValues={formValues}
      radioFieldName="conflicts.hasConflicts"
      radioLabel="Do any authors have conflicts of interest to declare?"
      required
      tooltipContent={ConflictsTooltip}
    />
    <RadioWithComments
      commentsFieldName="conflicts.dataAvailabilityMessage"
      commentsLabel="Data availability statement"
      commentsOn="no"
      formValues={formValues}
      radioFieldName="conflicts.hasDataAvailability"
      radioLabel="Have you included a data availability statement in your manuscript?"
      required
      tooltipContent={DataAvailabilityTooltip}
    />
    <RadioWithComments
      commentsFieldName="conflicts.fundingMessage"
      commentsLabel="Funding statement"
      commentsOn="no"
      formValues={formValues}
      radioFieldName="conflicts.hasFunding"
      radioLabel="Have you provided a funding statement in your manuscript?"
      required
      tooltipContent={FundingTooltip}
    />
  </Fragment>
)

export default StepTwo

const ConflictsTooltip = () => (
  <Text secondary>
    When an author, editor, or reviewer has a financial/personal interest or
    belief that could affect his/her objectivity, or inappropriately influence
    his/her actions, a potential conflict of interest exists.{' '}
    <ActionLink to="https://www.hindawi.com/editors/coi/">More info</ActionLink>
  </Text>
)

const DataAvailabilityTooltip = () => (
  <Text>
    Statement about where data supporting the results reported in a published
    article can be found, including, where applicable, hyperlinks to publicly
    archived datasets analysed or generated during the study.
  </Text>
)

const FundingTooltip = () => (
  <Text>
    Statement about how the research and publication of an article is funded,
    naming each financially supporting body followed by any associated grant
    numbers in square brackets.
  </Text>
)