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

import { redirectToError } from '../utils'
import { FormItems } from '../UIComponents'
import { reviewerDecision, setReviewerPassword } from '../../redux/reviewers'

const {
  Row,
  Err,
  Title,
  Label,
  Email,
  RowItem,
  Subtitle,
  RootContainer,
  FormContainer,
} = FormItems

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 PasswordField = input => <TextField {...input} type="password" />
const min8Chars = minChars(8)
const ReviewerInviteDecision = ({
  agree,
  error,
  handleSubmit,
  errorMessage,
  reviewerEmail,
}) => (
  <RootContainer bordered>
    <Title>Reviewer Invitation</Title>
    <Subtitle>{agree === 'true' ? agreeText : declineText}</Subtitle>
    <Email>{reviewerEmail}</Email>
    {agree === 'true' && (
      <FormContainer onSubmit={handleSubmit}>
        <Row>
          <RowItem vertical>
            <Label> Password </Label>
            <ValidatedField
              component={PasswordField}
              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('reviewerEmail', 'setEmail', ''),
  connect(null, {
    push,
    replace,
    loginUser,
    reviewerDecision,
    setReviewerPassword,
  }),
  lifecycle({
    componentDidMount() {
      const {
        agree,
        email,
        replace,
        setEmail,
        fragmentId,
        collectionId,
        invitationId,
        reviewerDecision,
      } = this.props
      setEmail(email)

      if (agree === 'false') {
        reviewerDecision(invitationId, collectionId, fragmentId, false).catch(
          redirectToError(replace),
        )
      }
    },
  }),
  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)