import React from 'react'
import { compose } from 'recompose'
import styled from 'styled-components'
import { reduxForm } from 'redux-form'
import { th } from '@pubsweet/ui-toolkit'
import { required } from 'xpub-validators'
import { withModal } from 'pubsweet-component-modal/src/components'
import { Button, H4, Menu, TextField, ValidatedField } from '@pubsweet/ui'

import {
  Row,
  Item,
  Label,
  MultiAction,
  ItemOverrideAlert,
  withFetching,
  validators,
  withCountries,
} from '../'

const InviteReviewers = ({ countries, handleSubmit, reset }) => (
  <Root>
    <Row justify="space-between" mb={2}>
      <H4>Invite reviewer</H4>
      <Item justify="flex-end">
        <Button onClick={reset} size="small">
          Clear Fields
        </Button>
        <Button ml={2} onClick={handleSubmit} primary size="small">
          Invite
        </Button>
      </Item>
    </Row>
    <Row>
      <Item mr={2} vertical>
        <Label required>Email</Label>
        <ValidatedField
          component={TextField}
          name="email"
          validate={[required, validators.emailValidator]}
        />
      </Item>
      <Item mr={2} vertical>
        <Label required>First Name</Label>
        <ValidatedField
          component={TextField}
          name="firstName"
          validate={[required]}
        />
      </Item>
      <Item mr={2} vertical>
        <Label required>Last Name</Label>
        <ValidatedField
          component={TextField}
          name="lastName"
          validate={[required]}
        />
      </Item>
      <Item mr={2} vertical>
        <Label required>Affiliation</Label>
        <ValidatedField
          component={TextField}
          name="affiliation"
          validate={[required]}
        />
      </Item>

      <ItemOverrideAlert vertical>
        <Label required>Country</Label>
        <ValidatedField
          component={input => <Menu options={countries} {...input} />}
          name="country"
          validate={[required]}
        />
      </ItemOverrideAlert>
    </Row>
  </Root>
)

export default compose(
  withFetching,
  withCountries,
  withModal(({ isFetching, modalKey }) => ({
    modalKey,
    isFetching,
    modalComponent: MultiAction,
  })),
  reduxForm({
    form: 'invite-reviewers-form',
    onSubmit: (values, dispatch, { showModal, onInvite, setFetching }) => {
      showModal({
        title: 'Send invitation to Review?',
        subtitle: values.email,
        onConfirm: modalProps => {
          onInvite(values, { ...modalProps, setFetching })
        },
      })
    },
  }),
)(InviteReviewers)

// #region styles
const Root = styled.div`
  background-color: ${th('colorBackgroundHue3')};
  padding: calc(${th('gridUnit')} * 2);
`
// #endregion