import React, { Fragment } from 'react'
import { get } from 'lodash'
import { H2, H4, DateParser } from '@pubsweet/ui'
import { compose, withProps } from 'recompose'

import { Tag, Text, Row, AuthorTagList } from './'

const ManuscriptHeader = ({
  fragment = {},
  editorInChief = 'Unassigned',
  manuscriptType = {},
  collection: { visibleStatus = 'Draft', handlingEditor, customId },
}) => {
  const { authors = [], metadata = {}, submitted = null } = fragment
  const { title = 'No title', journal = '', type = '' } = metadata
  return (
    <Fragment>
      <Row alignItems="baseline" justify="space-between">
        <H2 mb={1}>{title}</H2>
        <Tag data-test-id="fragment-status" status>
          {visibleStatus}
        </Tag>
      </Row>
      {authors.length > 0 && (
        <Row alignItems="center" justify="flex-start" mb={1}>
          <AuthorTagList authors={authors} tooltip />
        </Row>
      )}
      <Row alignItems="center" justify="flex-start" mb={1}>
        <Text customId mr={1}>{`ID ${customId}`}</Text>
        {submitted && (
          <DateParser durationThreshold={0} timestamp={submitted}>
            {timestamp => (
              <Text mr={3} secondary>
                Submitted on {timestamp}
              </Text>
            )}
          </DateParser>
        )}
        <H4>{manuscriptType.label || type}</H4>
        <Text ml={1} secondary>
          {journal}
        </Text>
      </Row>
      <Row alignItems="center" justify="flex-start" mb={1}>
        <H4>Editor in Chief</H4>
        <Text ml={1} mr={3}>
          {editorInChief}
        </Text>
        <H4>Handling editor</H4>
        <Text ml={1} mr={3}>
          {get(handlingEditor, 'name', 'Unassigned')}
        </Text>
      </Row>
    </Fragment>
  )
}

export default compose(
  withProps(({ fragment: { metadata }, journal = {} }) => ({
    manuscriptType: get(journal, 'manuscriptTypes', []).find(
      t => t.value === get(metadata, 'type', ''),
    ),
  })),
)(ManuscriptHeader)