import React from 'react'
import { get } from 'lodash'
import { connect } from 'react-redux'
import { push } from 'react-router-redux'
import { required, minChars } from 'xpub-validators'
import { reduxForm, SubmissionError } from 'redux-form'
import { loginUser } from 'pubsweet-component-login/actions'
import { Button, ValidatedField, TextField } from '@pubsweet/ui'
import { compose, withState, lifecycle, withHandlers } from 'recompose'

import {
  Row,
  Err,
  Title,
  Label,
  Email,
  RowItem,
  Subtitle,
  RootContainer,
  FormContainer,
} from './FormItems'
import { reviewerDecision, setReviewerPassword } from '../../redux/reviewers'

const agreeText = `You have been invited to review a manuscript on the Hindawi platform. Please set a password and proceed to the manuscript.`
const declineText = `You have decline to work on a manuscript.`
const alreadyDeclined = `You have already declined to work on this manuscript.`

const min8Chars = minChars(8)
const ReviewerInviteDecision = ({
  handleSubmit,
  error,
  reviewerEmail,
  agree,
  errorMessage,
  renderSubtitle,
}) => (
  <RootContainer>
    <Title>Hindawi Invitation</Title>
    <Subtitle>{renderSubtitle()}</Subtitle>
    <Email>{reviewerEmail}</Email>
    {agree === 'true' && (
      <FormContainer onSubmit={handleSubmit}>
        <Row>
          <RowItem>
            <Label> Password </Label>
            <ValidatedField
              component={input => <TextField {...input} type="password" />}
              name="password"
              validate={[required, min8Chars]}
            />
          </RowItem>
        </Row>
        {error && (
          <Row>
            <RowItem>
              <Err>Token expired or Something went wrong.</Err>
            </RowItem>
          </Row>
        )}
        <Row>
          <Button primary type="submit">
            CONFIRM
          </Button>
        </Row>
      </FormContainer>
    )}
  </RootContainer>
)

export default compose(
  withState('errorMessage', 'setError', ''),
  withState('reviewerEmail', 'setEmail', ''),
  connect(null, { push, loginUser, setReviewerPassword, reviewerDecision }),
  lifecycle({
    componentDidMount() {
      const {
        agree,
        email,
        setError,
        setEmail,
        collectionId,
        invitationId,
        reviewerDecision,
      } = this.props
      setEmail(email)

      if (agree === 'false') {
        reviewerDecision(invitationId, collectionId, false).catch(err => {
          const errorText = get(JSON.parse(err.response), 'error')
          if (errorText.includes('has already been answered')) {
            setError(alreadyDeclined)
          } else {
            setError('Oops! Something went wrong.')
          }
        })
      }
    },
  }),
  withHandlers({
    renderSubtitle: ({ agree, errorMessage }) => () => {
      if (agree === 'true') {
        return agreeText
      }
      if (errorMessage) {
        return errorMessage
      }
      return declineText
    },
  }),
  reduxForm({
    form: 'invite-reviewer',
    onSubmit: (
      { password },
      dispatch,
      {
        push,
        email,
        token,
        location,
        loginUser,
        fragmentId,
        collectionId,
        invitationId,
        setReviewerPassword,
      },
    ) =>
      setReviewerPassword({
        email,
        token,
        password,
      })
        .then(() => {
          loginUser(
            { username: email, password },
            `/projects/${collectionId}/versions/${fragmentId}/details?agree=${true}&invitationId=${invitationId}`,
          )
        })
        .catch(error => {
          const err = get(error, 'response')
          if (err) {
            const errorMessage = get(JSON.parse(err), 'error')
            throw new SubmissionError({
              _error: errorMessage || 'Something went wrong',
            })
          }
        }),
  }),
)(ReviewerInviteDecision)