import React from 'react'
import { connect } from 'react-redux'
import styled from 'styled-components'
import { th } from '@pubsweet/ui-toolkit'
import { withJournal } from 'xpub-journal'
import { replace } from 'react-router-redux'
import { compose, lifecycle } from 'recompose'

import { redirectToError } from '../utils'
import { FormItems } from '../UIComponents'
import { reviewerDecline } from '../../redux/reviewers'

const { RootContainer, Title } = FormItems

const ReviewerDecline = ({ journal: { metadata: { email } } }) => (
  <RootContainer bordered>
    <Title>Thank you for letting us know.</Title>
    <div>
      <Description>
        We hope you will review for Hindawi in the future. If you want any more
        information, or would like to submit a review for this article, then
        please contact us at{' '}
        <MailLink href={`mailto:${email}`} target="_blank">
          {email}
        </MailLink>.
      </Description>
    </div>
  </RootContainer>
)

export default compose(
  withJournal,
  connect(null, { reviewerDecline, replace }),
  lifecycle({
    componentDidMount() {
      const {
        collectionId,
        invitationId,
        invitationToken,
        reviewerDecline,
        replace,
        fragmentId,
      } = this.props
      reviewerDecline(
        invitationId,
        collectionId,
        fragmentId,
        invitationToken,
      ).catch(redirectToError(replace))
    },
  }),
)(ReviewerDecline)

// #region styled-components
const MailLink = styled.a`
  color: ${th('colorPrimary')};

  &:visited {
    color: ${th('colorTextPlaceholder')};
  }
`

const Description = styled.span`
  color: ${th('colorPrimary')};
  font-family: ${th('fontReading')};
  font-size: ${th('fontSizeBaseSmall')};
`
// #endregion