import React from 'react'
import { has, get } from 'lodash'
import styled from 'styled-components'
import { reduxForm } from 'redux-form'
import { th } from '@pubsweet/ui-toolkit'
import { required } from 'xpub-validators'
import { compose, withProps } from 'recompose'
import { Button, Menu, ValidatedField } from '@pubsweet/ui'

import { ContextualBox, OpenModal, Row, Item, Label, Textarea } from '../'

const ManuscriptEicDecision = ({
  disabled,
  isFetching,
  formValues,
  handleSubmit,
  messagesLabel,
  options = [],
  ...rest
}) => (
  <ContextualBox label="Your Editorial Decision" {...rest}>
    <Root>
      <Row justify="flex-start">
        <Item flex={0} vertical>
          <Label required>Decision</Label>
          <ValidatedField
            component={input => <CustomMenu {...input} options={options} />}
            name="decision"
            validate={[required]}
          />
        </Item>
      </Row>

      <Row mt={6}>
        <Item vertical>
          <Label required>
            {
              messagesLabel[
                get(formValues, 'decision', 'return-to-handling-editor')
              ]
            }
          </Label>
          <ValidatedField
            component={ValidatedTextArea}
            name="message"
            validate={[required]}
          />
        </Item>
      </Row>

      <Row justify="flex-end" mt={4}>
        <OpenModal
          isFetching={isFetching}
          onConfirm={props => {
            handleSubmit()(props)
          }}
          title="Are you sure you want to submit this decision?"
        >
          {showModal => (
            <Button
              disabled={disabled}
              onClick={showModal}
              primary
              size="medium"
            >
              SUBMIT DECISION
            </Button>
          )}
        </OpenModal>
      </Row>
    </Root>
  </ContextualBox>
)

export default compose(
  withProps(({ formValues }) => ({
    disabled: !has(formValues, 'decision') || !has(formValues, 'message'),
  })),
  reduxForm({
    form: 'eic-decision',
    onSubmit: (values, dispatch, { submitDecision }) => modalProps => {
      submitDecision(values, modalProps)
    },
  }),
)(ManuscriptEicDecision)

// #region styles
const Root = styled.div`
  display: flex;
  flex-direction: column;
  padding: ${th('gridUnit')};
`

const CustomMenu = styled(Menu)`
  min-width: calc(${th('gridUnit')} * 30);
`

const ValidatedTextArea = styled(Textarea)`
  & + div {
    margin-top: 0;
  }
`
// #endregion