import React from 'react'
import styled from 'styled-components'
import { th } from '@pubsweet/ui-toolkit'
import { DateParser } from '@pubsweet/ui'

import { Label, Item, FileItem, Row, Text } from './'

const ReviewerReport = ({
  report: {
    report,
    files = [],
    submittedOn,
    recommendation,
    confidentialNote,
    reviewer: { fullName, reviewerNumber },
  },
}) => (
  <Root>
    <Row justify="space-between" mb={2}>
      <Item vertical>
        <Label mb={1 / 2}>Recommendation</Label>
        <Text>{recommendation}</Text>
      </Item>

      <Item justify="flex-end">
        <Text>{fullName}</Text>
        <Text customId ml={1} mr={1}>
          {`Reviewer ${reviewerNumber}`}
        </Text>
        <DateParser timestamp={submittedOn}>
          {date => <Text>{date}</Text>}
        </DateParser>
      </Item>
    </Row>

    <Row mb={2}>
      <Item vertical>
        <Label mb={1 / 2}>Report</Label>
        <Text>{report}</Text>
      </Item>
    </Row>

    <Label mb={1 / 2}>Files</Label>
    <Row justify="flex-start" mb={2}>
      {files.map(file => (
        <Item flex={0} key={file.id} mr={1}>
          <FileItem item={file} />
        </Item>
      ))}
    </Row>

    <Row mb={2}>
      <Item vertical>
        <Label mb={1 / 2}>Confidential note for the Editorial Team</Label>
        <Text>{confidentialNote}</Text>
      </Item>
    </Row>
  </Root>
)

export default ReviewerReport

// #region styles
const Root = styled.div`
  box-shadow: ${th('boxShadow')};
  padding: calc(${th('gridUnit')} * 2);
  margin: ${th('gridUnit')};
`
// #endregion