import React, { Fragment } from 'react'
import { get } from 'lodash'
import { Field } from 'redux-form'
import { Tooltip } from 'react-tippy'
import styled from 'styled-components'
import { required } from 'xpub-validators'
import {
  Row,
  Text,
  Item,
  Label,
  Textarea,
  IconButton,
  WizardAuthors,
} from 'pubsweet-component-faraday-ui'
import { H2, Menu, YesOrNo, TextField, ValidatedField } from '@pubsweet/ui'

import { Empty } from './'

const StepTwo = ({
  version,
  project,
  journal,
  addAuthor,
  changeForm,
  hasConflicts,
  authorsError,
  manuscriptTypes,
  ...rest
}) => (
  <Fragment>
    <Row alignItems="center" mb={1}>
      <H2>2. Manuscript & Author Details</H2>
    </Row>
    <Row mb={3}>
      <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={3}>
      <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>
      <ItemOverrideAlert 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]}
        />
      </ItemOverrideAlert>
    </Row>

    <RowOverrideAlert mb={2}>
      <Item data-test-id="submission-abstract" vertical>
        <Label required>ABSTRACT</Label>
        <ValidatedField
          component={Textarea}
          minHeight={15}
          name="metadata.abstract"
          validate={[required]}
        />
      </Item>
    </RowOverrideAlert>

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

    <Row alignItems="center" justify="flex-start" mt={2}>
      <Item>
        <Label required>Is there a potential conflict of interest?</Label>
        <Tooltip
          arrow
          data-test="submission-tooltip"
          html={<ConflictsTooltip />}
          interactive
          position="bottom"
          theme="light"
          trigger="click"
        >
          <IconButton icon="help-circle" primary />
        </Tooltip>
      </Item>
    </Row>

    <Row alignItems="center" justify="flex-start" mb={1}>
      <Field
        component={({ input }) => <YesOrNo {...input} />}
        name="conflicts.hasConflicts"
      />
    </Row>

    {hasConflicts && (
      <Row alignItems="center" justify="flex-start">
        <Item data-test="submission-conflicts-text" vertical>
          <Label required>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 affect 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 RowOverrideAlert = styled(Row)`
  div[role='alert'] {
    margin-top: 0;
  }
`

const ItemOverrideAlert = styled(Item)`
  div[role='alert'] {
    margin-top: 0;
  }
`
const TooltipText = styled.span`
  color: #586971;
  display: inline-block;
  font-family: "'Myriad Pro'";
  font-size: 14px;
  text-align: left;
`

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