import React, { Fragment } from 'react'
import { Field } from 'redux-form'
import { Tooltip } from 'react-tippy'
import { th } from '@pubsweet/ui-toolkit'
import { required } from 'xpub-validators'
import { AbstractEditor } from 'xpub-edit'
import { Menu, YesOrNo, ValidatedField, Icon } from '@pubsweet/ui'
import styled from 'styled-components'

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

import { Empty } from './'

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

const StepTwo = ({
  version,
  project,
  hasConflicts,
  authorsError,
  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 justify="space-between">
          AUTHORS DETAILS*
          <AuthorGuidelines
            href="https://www.hindawi.com/authors/"
            rel="noopener noreferrer"
            target="_blank"
          >
            Hindawi Author Submission Guidelines
          </AuthorGuidelines>
        </Label>
        <Field component={Empty} name="authors" />
        <AuthorList
          parentForm="submission"
          project={project}
          version={version}
        />
        {authorsError && <Err align="left">{authorsError}</Err>}
      </RowItem>
    </Row>

    <Row>
      <RowItem vertical>
        <Label>
          Is there a potential conflict of interest?
          <Tooltip
            arrow
            html={<ConflictsTooltip />}
            interactive
            position="bottom"
            trigger="click"
          >
            <TooltipIcon>
              <Icon primary>help-circle</Icon>
            </TooltipIcon>
          </Tooltip>
        </Label>
        <Field
          component={({ input }) => <YesOrNo {...input} />}
          name="conflicts.hasConflicts"
        />
      </RowItem>
    </Row>

    {hasConflicts && (
      <Row>
        <RowItem vertical>
          <Label>CONFLICT OF INTEREST DETAILS*</Label>
          <ValidatedField
            component={AbstractEditor}
            name="conflicts.message"
            validate={[required]}
          />
        </RowItem>
      </Row>
    )}
  </Fragment>
)

export default StepTwo

const ConflictsTooltip = () => (
  <TooltipText>
    When an author, editor, or reviewer has a financial/personal interest or
    belief that could affest his/her objectivity, or inappropriately influence
    his/her actions, a potential conflict of interest exists.
    <MoreInfoLink
      href="https://www.hindawi.com/editors/coi/"
      rel="noopener noreferrer"
      target="_blank"
    >
      More info
    </MoreInfoLink>
  </TooltipText>
)

// #region styled-components
const AuthorGuidelines = styled.a`
  color: ${th('colorPrimary')};
  font-family: ${th('fontReading')};
  font-size: ${th('fontSizeBaseSmall')};
  text-transform: none;
`

const TooltipIcon = styled.div.attrs({
  className: 'tooltip-icon',
})`
  padding-top: ${th('subGridUnit')};
`

const TooltipText = styled.span`
  color: #d8d8d8;
  font-family: 'Noto Serif';
  font-size: 14px;
`

const MoreInfoLink = styled.a`
  color: #d8d8d8;
  margin-left: 3px;
`
// #endregion