import React, { Fragment } from 'react'
import { Field } from 'redux-form'
import { Tooltip } from 'react-tippy'
import styled from 'styled-components'
import { th } from '@pubsweet/ui-toolkit'
import { required } from 'xpub-validators'
// import { AbstractEditor } from 'xpub-edit' - get in touch with Christos and ask about the schema
import { Row, Text, Item, Label } from 'pubsweet-component-faraday-ui'
import {
  H2,
  Menu,
  Icon,
  Action,
  YesOrNo,
  TextField,
  ValidatedField,
} from '@pubsweet/ui'
import { AuthorList } from 'pubsweet-components-faraday/src/components'

import { Empty } from './'

const StepTwo = ({
  version,
  project,
  hasConflicts,
  authorsError,
  manuscriptTypes,
}) => (
  <Fragment>
    <CustomH2>2. Manuscript & Authors Details</CustomH2>
    <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 ahave been
        prefilled since, in order tu submit a manuscript you must be one of the
        authors
      </Text>
    </Row>
    <Row mb={1}>
      <Item data-test="submission-title" flex={3} vertical withRightMargin>
        <Label required>MANUSCRIPT TITLE</Label>
        <ValidatedField
          component={TextField}
          name="metadata.title"
          validate={[required]}
        />
      </Item>
      <Item data-test="submission-type" vertical>
        <Label required>MANUSCRIPT TYPE</Label>
        <ValidatedField
          component={input => <Menu options={manuscriptTypes} {...input} />}
          name="metadata.type"
          validate={[required]}
        />
      </Item>
    </Row>
    <Row mb={1}>
      <Item data-test="submission-abstract" vertical>
        <Label required>ABSTRACT</Label>
        <ValidatedField
          component={TextField}
          name="metadata.abstract"
          validate={[required]}
        />
      </Item>
    </Row>
    <Row mb={1}>
      <Item vertical>
        <Label justify="space-between" required>
          AUTHORS DETAILS
          <Action>Hindawi Author Submission Guidelines</Action>
        </Label>
        <Field component={Empty} name="authors" />
        <AuthorList
          parentForm="submission"
          project={project}
          version={version}
        />
        {authorsError && (
          <Text align="left" data-test-id="error-author" error>
            {authorsError}
          </Text>
        )}
      </Item>
    </Row>

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

    {hasConflicts && (
      <Row>
        <Item data-test="submission-conflicts-text" vertical>
          <Label>CONFLICT OF INTEREST DETAILS*</Label>
          <ValidatedField
            component={TextField}
            name="conflicts.message"
            validate={[required]}
          />
        </Item>
      </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 TooltipIcon = styled.div.attrs({
  'data-test-id': 'tooltip-icon',
})`
  padding-top: ${th('gridUnit')};
`

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

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

const CustomH2 = H2.extend`
  margin: 0;
`
// #endregion