import React from 'react'
import { get } from 'lodash'
import { connect } from 'react-redux'
import { actions } from 'pubsweet-client'
import styled, { css } from 'styled-components'
import { reduxForm, formValueSelector } from 'redux-form'
import { compose, setDisplayName, withProps } from 'recompose'
import { th, Icon, Button, RadioGroup, ValidatedField } from '@pubsweet/ui'

import { FormItems } from '../UIComponents'
import { createRecommendation } from '../../redux/recommendations'

const {
  Row,
  Title,
  Label,
  RowItem,
  Textarea,
  Subtitle,
  RootContainer,
  FormContainer,
} = FormItems
const Form = RootContainer.withComponent(FormContainer)

const decisionOptions = [
  { label: 'Publish', value: 'publish' },
  { label: 'Reject', value: 'reject' },
  { label: 'Return to Handling Editor', value: 'return-to-handling-editor' },
]

const DecisionForm = ({
  decision,
  hideModal,
  handleSubmit,
  heRecommendation: { reason, message = '' },
}) => (
  <Form onSubmit={handleSubmit}>
    <IconButton onClick={hideModal}>
      <Icon primary>x</Icon>
    </IconButton>
    <Title>Make decision</Title>
    <CustomSubtitle>
      Recommended to<BoldSubtitle>{reason}</BoldSubtitle>
    </CustomSubtitle>
    <Row>
      <RowItem vertical>
        <Label>Message from Handling Editor</Label>
        <span>{message}</span>
      </RowItem>
    </Row>
    <Row>
      <RowItem vertical>
        <Label>Your Decision</Label>
        <ValidatedField
          component={input => (
            <CustomRadioGroup>
              <RadioGroup
                name="decision"
                options={decisionOptions}
                {...input}
              />
            </CustomRadioGroup>
          )}
          name="decision"
        />
      </RowItem>
    </Row>
    {decision === 'return-to-handling-editor' && (
      <Row>
        <RowItem vertical>
          <Label>Comments for Handling Editor</Label>
          <ValidatedField
            component={input => <Textarea {...input} height={70} />}
            name="messageToHE"
          />
        </RowItem>
      </Row>
    )}
    <Row>
      <RowItem centered>
        <Button onClick={hideModal}>Cancel</Button>
      </RowItem>
      <RowItem centered>
        <Button primary type="submit">
          Submit
        </Button>
      </RowItem>
    </Row>
  </Form>
)

const subtitleParser = t => {
  switch (t) {
    case 'major':
      return 'Revise(major)'
    case 'minor':
      return 'Revise(minor)'
    case 'reject':
      return 'Reject'
    case 'publish':
    default:
      return 'Publish'
  }
}

const selector = formValueSelector('eicDecision')
export default compose(
  setDisplayName('DecisionForm'),
  connect(
    state => ({
      decision: selector(state, 'decision'),
    }),
    { createRecommendation, getCollections: actions.getCollections },
  ),
  withProps(({ heRecommendation: { recommendation = '', comments = [] } }) => ({
    heRecommendation: {
      reason: subtitleParser(recommendation),
      message: get(comments.find(c => c.public), 'content'),
    },
  })),
  reduxForm({
    form: 'eicDecision',
    onSubmit: (
      { decision, messageToHE },
      dispatch,
      {
        showModal,
        fragmentId,
        collectionId,
        getCollections,
        createRecommendation,
      },
    ) => {
      const recommendation = {
        recommendation: decision,
        recommendationType: 'editorRecommendation',
        comments: [
          {
            public: false,
            content: messageToHE,
          },
        ],
      }
      createRecommendation(collectionId, fragmentId, recommendation).then(r => {
        getCollections()
        showModal({
          title: 'Decision submitted',
          cancelText: 'OK',
        })
      })
    },
  }),
)(DecisionForm)

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

const IconButton = styled.div`
  align-self: flex-end;
  cursor: pointer;
`

const CustomSubtitle = Subtitle.extend`
  align-items: center;
  display: flex;
  flex-direction: row;
  justify-content: center;
`

const BoldSubtitle = Subtitle.extend`
  font-weight: bold;
  margin-left: 5px;
`

const CustomRadioGroup = styled.div`
  div {
    flex-direction: row;
    justify-content: space-between;
    label {
      span:last-child {
        font-style: normal;
        ${defaultText};
      }
    }
  }
`
// #endregion