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

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 min8Chars = minChars(8)
const ReviewerSignUp = ({
  searchParams: { agree },
  handleSubmit,
  error,
  reviewer,
}) => (
  <RootContainer>
    <Title>Hindawi Invitation</Title>
    <Subtitle>{agree ? agreeText : declineText}</Subtitle>
    <Email>{reviewer.email}</Email>
    {agree && (
      <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('searchParams', 'setParams', { agree: true }),
  withState('reviewer', 'setReviewer', {}),
  connect(null, { push, loginUser, setReviewerPassword, reviewerDecision }),
  lifecycle({
    componentDidMount() {
      //   const { setParams, location, setReviewer, reviewerDecision } = this.props
      //   const {
      //     agree,
      //     collectionId,
      //     invitationId,
      //     fragmentId,
      //     ...reviewerBody
      //   } = parseSearchParams(location.search)
      //   setParams(v => ({
      //     agree: agree === 'true',
      //     collectionId,
      //     invitationId,
      //     fragmentId,
      //   }))
      //   if (agree === 'true') {
      //     setReviewer(reviewerBody)
      //   } else {
      //     reviewerDecision(invitationId, collectionId, false)
      //   }
      // console.log('rev sign up mounted?', this.props)
    },
  }),
  reduxForm({
    form: 'invite-reviewer',
    onSubmit: (
      { password },
      dispatch,
      {
        push,
        loginUser,
        searchParams,
        reviewer,
        location,
        setReviewerPassword,
      },
    ) => {
      const { collectionId, fragmentId, agree, invitationId } = searchParams
      return setReviewerPassword({
        ...reviewer,
        password,
      })
        .then(() => {
          loginUser(
            { username: reviewer.email, password },
            `/projects/${collectionId}/versions/${fragmentId}/details?agree=${agree}&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',
            })
          }
        })
    },
  }),
)(ReviewerSignUp)