import React from 'react'
import { connect } from 'react-redux'
import { Icon, Button, th, Spinner } from '@pubsweet/ui'
import styled, { css, withTheme } from 'styled-components'
import { compose, withHandlers, lifecycle } from 'recompose'
import {
  ConfirmationModal,
  withModal2,
} from 'pubsweet-component-modal/src/components'

import { ReviewerForm, ReviewersList } from './'
import {
  getCollectionReviewers,
  selectReviewers,
  selectFetchingReviewers,
  selectFechingInvite,
} from '../../redux/reviewers'

const InviteReviewers = ({ showInviteModal }) => (
  <AssignButton onClick={showInviteModal}>Invite reviewers</AssignButton>
)

const InviteReviewersModal = compose(
  withTheme,
  connect(
    state => ({
      reviewers: selectReviewers(state),
      fetchingReviewers: selectFetchingReviewers(state),
      fetchingInvite: selectFechingInvite(state),
    }),
    { getCollectionReviewers },
  ),
  withHandlers({
    getReviewers: ({
      collectionId,
      setReviewers,
      getCollectionReviewers,
    }) => () => {
      getCollectionReviewers(collectionId)
    },
  }),
  lifecycle({
    componentDidMount() {
      const { getReviewers } = this.props
      getReviewers()
    },
  }),
)(
  ({
    theme,
    hideModal,
    onConfirm,
    showModal,
    collectionId,
    reviewers,
    getReviewers,
    fetchingReviewers,
    fetchingInvite,
  }) => (
    <Root>
      <CloseIcon data-test="icon-modal-hide" onClick={hideModal}>
        <Icon color={theme.colorPrimary}>x</Icon>
      </CloseIcon>

      <Title>Invite Reviewers</Title>

      <Subtitle>Invite reviewer</Subtitle>
      <ReviewerForm
        collectionId={collectionId}
        getReviewers={getReviewers}
        isFetching={fetchingInvite}
      />

      <Row>
        <Subtitle hidden={reviewers.length === 0}>Reviewers Info</Subtitle>
        {fetchingReviewers && <Spinner size={3} />}
      </Row>
      <ReviewersList
        collectionId={collectionId}
        reviewers={reviewers}
        showModal={showModal}
      />
    </Root>
  ),
)

const ModalSwitcher = compose(
  connect(state => ({
    fetchingInvite: selectFechingInvite(state),
  })),
)(({ type, fetchingInvite, ...rest }) => {
  switch (type) {
    case 'invite-reviewers':
      return <InviteReviewersModal {...rest} />
    default:
      return <ConfirmationModal {...rest} isFetching={fetchingInvite} />
  }
})

export default compose(
  withModal2(props => ({
    modalComponent: ModalSwitcher,
  })),
  withHandlers({
    showInviteModal: ({ showModal, hideModal, project }) => () => {
      showModal({
        type: 'invite-reviewers',
        collectionId: project.id,
        onConfirm: () => {
          hideModal()
        },
      })
    },
  }),
)(InviteReviewers)

// #region styled-components
const defaultText = css`
  color: ${th('colorText')};
  font-family: ${th('fontReading')};
  font-size: ${th('fontSizeBaseSmall')};
`

const CloseIcon = styled.div`
  cursor: pointer;
  position: absolute;
  top: ${th('subGridUnit')};
  right: ${th('subGridUnit')};
`

const Subtitle = styled.span`
  ${defaultText};
  align-self: flex-start;
  opacity: ${({ hidden }) => (hidden ? 0 : 1)};
  margin-bottom: ${th('subGridUnit')};
  text-transform: uppercase;
`

const Title = styled.span`
  color: ${th('colorText')};
  font-family: ${th('fontHeading')};
  font-size: ${th('fontSizeHeading5')};
  margin-bottom: ${th('gridUnit')};
`

const Row = styled.div`
  align-self: stretch;
  align-items: center;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding-right: 20px;
`

const Root = styled.div`
  align-items: center;
  background-color: ${th('backgroundColorReverse')};
  display: flex;
  flex-direction: column;
  padding: calc(${th('subGridUnit')} * 6);
  position: relative;
  width: 580px;
`

const AssignButton = styled(Button)`
  ${defaultText};
  align-items: center;
  color: ${th('colorTextReverse')};
  background-color: ${th('colorPrimary')};
  height: calc(${th('subGridUnit')}*5);
  text-align: center;
`
// #endregion