import React from 'react'
import { withRouter } from 'react-router'
import { Mutation } from 'react-apollo'
import styled from 'styled-components'
import { th } from '@pubsweet/ui-toolkit'
import { Action, Button, H2, Icon } from '@pubsweet/ui'
import {
  PreviewFooter,
  Notification,
  Buttons,
  Portal,
  Close,
  CloseButton,
} from '../ui'
import SubmissionCancel from '../SubmissionCancel'
import { REVIEW_MANUSCRIPT, GET_REVIEWS, CURRENT_REVIEW } from './operations'
import ReviewInstructions from './ReviewInstructions'
import ListErrors from './ListErrors'
import SubmissionError from './SubmissionError'

const SmallAction = styled(Action)`
  font-size: ${th('fontSizeBaseSmall')};
  font-weight: 600;
`
const showPopup = button => {
  button.parentNode.nextElementSibling.classList.remove('hidden')
}

class ReviewFooter extends React.Component {
  state = {
    report: false,
    approve: false,
    cancel: false,
  }
  render() {
    const { currentUser, manuscript, previews, review, history } = this.props
    const { report, approve, cancel } = this.state
    const { annotations } = review || []
    const { status, teams } = manuscript
    const submitter = teams.find(t => t.role === 'submitter').teamMembers[0]
    return (
      <PreviewFooter>
        <div>
          <Mutation
            mutation={REVIEW_MANUSCRIPT}
            refetchQueries={() => [
              {
                query: GET_REVIEWS,
                variables: { manuscriptId: manuscript.id },
              },
              {
                query: CURRENT_REVIEW,
                variables: { manuscriptId: manuscript.id },
              },
            ]}
          >
            {(reviewManuscript, { data }) => {
              const setStatus = async newStatus => {
                await reviewManuscript({
                  variables: { data: { id: manuscript.id, status: newStatus } },
                })
              }
              if (status === 'tagging') {
                return (
                  <Button
                    disabled={!previews}
                    onClick={() => setStatus('xml-qa')}
                    primary
                  >
                    Send for XML QA
                  </Button>
                )
              } else if (manuscript.status === 'xml-triage') {
                return (
                  <div>
                    <Button
                      onClick={() => this.setState({ approve: true })}
                      primary
                    >
                      Approve and route
                    </Button>
                    <Button onClick={() => this.setState({ report: true })}>
                      Ask for correction
                    </Button>
                    {approve && (
                      <Portal transparent>
                        <Close>
                          <CloseButton
                            onClick={() => this.setState({ approve: false })}
                          />
                        </Close>
                        <H2>Errors fixed? Send for:</H2>
                        <Buttons>
                          <Button
                            onClick={async () => {
                              await setStatus('xml-qa')
                              this.setState({ approve: false })
                            }}
                            primary
                          >
                            XML QA
                          </Button>
                          <Button
                            onClick={async () => {
                              await setStatus('xml-review')
                              history.push(
                                `/submission/${manuscript.id}/activity`,
                              )
                            }}
                            primary
                          >
                            Author review
                          </Button>
                          <Button
                            onClick={e => showPopup(e.currentTarget)}
                            primary
                          >
                            PMC (skip review)
                          </Button>
                        </Buttons>
                        <Notification className="hidden" type="warning">
                          Are you sure you want to skip author review?{' '}
                          <SmallAction
                            onClick={async () => {
                              await setStatus('xml-complete')
                              history.push(
                                `/submission/${manuscript.id}/activity`,
                              )
                            }}
                          >
                            I&apos;m sure!
                          </SmallAction>
                        </Notification>
                        <Buttons right>
                          <Button
                            onClick={() => this.setState({ approve: false })}
                          >
                            Cancel
                          </Button>
                        </Buttons>
                      </Portal>
                    )}
                    {report && (
                      <SubmissionError
                        annotations={annotations}
                        close={() => this.setState({ report: false })}
                        manuscript={manuscript}
                      />
                    )}
                  </div>
                )
              } else if (status === 'xml-qa' || status === 'xml-review') {
                return (
                  <React.Fragment>
                    <div>
                      <Button
                        onClick={() => this.setState({ approve: true })}
                        primary
                      >
                        Approve
                      </Button>
                      <Button onClick={() => this.setState({ report: true })}>
                        Report errors
                      </Button>
                    </div>
                    {currentUser.id === submitter.user.id && (
                      <Action
                        onClick={() => this.setState({ cancel: true })}
                        style={{ display: 'inline-flex', alignItems: 'center' }}
                      >
                        <Icon color="currentColor" size={2.5}>
                          trash-2
                        </Icon>
                        Cancel submission
                      </Action>
                    )}
                    {approve && (
                      <Portal style={{ width: '600px' }} transparent>
                        <p>
                          {status === 'xml-review'
                            ? `Approve the final web versions of the manuscript for release to Europe PMC now?`
                            : `Confirm QA has been completed, and approve the web versons of the manuscript?`}
                        </p>
                        {annotations && annotations.length > 0 && (
                          <Notification type="warning">
                            {`Errors have been highlighted! Are you sure you want to approve the submission, rather than submitting your error report?`}
                          </Notification>
                        )}
                        <Buttons right>
                          <Button
                            onClick={async () => {
                              await setStatus(
                                status === 'xml-review'
                                  ? 'xml-complete'
                                  : 'xml-review',
                              )
                              history.push('/')
                            }}
                            primary
                          >
                            Yes
                          </Button>
                          <Button
                            onClick={() => this.setState({ approve: false })}
                          >
                            No
                          </Button>
                        </Buttons>
                      </Portal>
                    )}
                    {report && (
                      <React.Fragment>
                        {annotations && annotations.length > 0 ? (
                          <Portal transparent>
                            <Close>
                              <CloseButton
                                onClick={() => this.setState({ report: false })}
                              />
                            </Close>
                            <H2>Send the following errors?</H2>
                            <ListErrors annotations={annotations} />
                            <Buttons right>
                              <Button
                                onClick={async () => {
                                  await setStatus('xml-triage')
                                  history.push('/')
                                }}
                                primary
                              >
                                Send error report
                              </Button>
                              <Button
                                onClick={() => this.setState({ report: false })}
                              >
                                Cancel
                              </Button>
                            </Buttons>
                          </Portal>
                        ) : (
                          <ReviewInstructions
                            close={() => this.setState({ report: false })}
                          />
                        )}
                      </React.Fragment>
                    )}
                  </React.Fragment>
                )
              }
              history.push('/')
              return null
            }}
          </Mutation>
        </div>
        {cancel && (
          <SubmissionCancel
            cancel={() => this.props.cancel(true)}
            close={() => this.setState({ cancel: false })}
          />
        )}
      </PreviewFooter>
    )
  }
}

export default withRouter(ReviewFooter)