import React, { Fragment } from 'react'
import styled from 'styled-components'
import { th } from '@pubsweet/ui-toolkit'
import { required } from 'xpub-validators'
import { Button, FilePicker, Menu, Spinner, ValidatedField } from '@pubsweet/ui'

import {
  Row,
  Text,
  Item,
  Label,
  FileItem,
  Textarea,
  ActionLink,
  ContextualBox,
  ItemOverrideAlert,
} from 'pubsweet-component-faraday-ui/src'

const ReviewerReportForm = ({
  toggle,
  hasNote,
  addNote,
  addFile,
  expanded,
  fileError,
  isFetching,
  removeNote,
  removeFile,
  previewFile,
  downloadFile,
  handleSubmit,
  fetchingError,
  review = {},
  formValues = {},
  journal: { recommendations },
}) => (
  <ContextualBox
    expanded={expanded}
    highlight
    label="Your report"
    scrollIntoView
    toggle={toggle}
  >
    <Root>
      <Row justify="flex-start">
        <ItemOverrideAlert flex={0} vertical>
          <Label required>Recommendation</Label>
          <ValidatedField
            component={input => <Menu {...input} options={recommendations} />}
            name="recommendation"
            validate={[required]}
          />
        </ItemOverrideAlert>
      </Row>

      <Row alignItems="center" justify="space-between" mt={1}>
        <Item>
          <Label required>Your report</Label>
          {!formValues.file && (
            <FilePicker onUpload={addFile}>
              <ActionLink icon="plus">UPLOAD FILE</ActionLink>
            </FilePicker>
          )}
        </Item>

        <Item justify="flex-end">
          <ActionLink to="https://about.hindawi.com/authors/peer-review-at-hindawi/">
            Hindawi Reviewer Guidelines
          </ActionLink>
        </Item>
      </Row>

      <Row mb={1 / 2}>
        <ItemOverrideAlert vertical>
          <ValidatedField component={Textarea} name="public" />
        </ItemOverrideAlert>
      </Row>

      {formValues.file && (
        <Row justify="flex-start" mb={1}>
          <Item flex={0}>
            <FileItem
              item={formValues.file}
              onDelete={removeFile}
              onDownload={downloadFile}
              onPreview={previewFile}
            />
          </Item>
        </Row>
      )}

      <Row alignItems="center">
        {hasNote ? (
          <Fragment>
            <Item>
              <Label>Confidential note for the Editorial Team</Label>
            </Item>
            <Item justify="flex-end">
              <ActionLink icon="x" onClick={removeNote}>
                Remove
              </ActionLink>
            </Item>
          </Fragment>
        ) : (
          <Item>
            <ActionLink onClick={addNote}>
              Add Confidential note for the Editorial Team
            </ActionLink>
          </Item>
        )}
      </Row>

      {hasNote && (
        <Row>
          <ItemOverrideAlert vertical>
            <ValidatedField component={Textarea} name="confidential" />
          </ItemOverrideAlert>
        </Row>
      )}

      {fetchingError && (
        <Row justify="flex-start">
          <Text error>{fetchingError}</Text>
        </Row>
      )}

      <Row justify="flex-end" mt={1}>
        {isFetching ? (
          <Spinner />
        ) : (
          <Button onClick={handleSubmit} primary size="medium">
            Submit report
          </Button>
        )}
      </Row>
    </Root>
  </ContextualBox>
)

export default ReviewerReportForm

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