import React from 'react'
import { get } from 'lodash'
import { DateParser } from 'pubsweet-components-faraday/src/components'

import {
  Row,
  Title,
  DateField,
  LeftDetails,
  StatusLabel,
  RightDetails,
  ManuscriptType,
  ManuscriptHeader,
} from '../atoms'

import AuthorsWithTooltip from '../molecules/AuthorsWithTooltip'
import { parseVersion, parseJournalIssue, mapStatusToLabel } from './utils'

const ManuscriptDetails = ({ version, project, journal }) => {
  const { title, type } = parseVersion(version)
  const metadata = get(version, 'metadata')
  const journalIssueType = parseJournalIssue(journal, metadata)
  const manuscriptMeta = `${type} - ${
    journalIssueType ? journalIssueType.label : 'N/A'
  }`
  return (
    <ManuscriptHeader>
      <Title dangerouslySetInnerHTML={{ __html: title }} />
      <Row>
        <LeftDetails flex={3}>
          <StatusLabel>{mapStatusToLabel(project)}</StatusLabel>
          <DateParser
            durationThreshold={0}
            timestamp={get(version, 'submitted')}
          >
            {(timestamp, days) => (
              <DateField>
                {timestamp} ({days} ago)
              </DateField>
            )}
          </DateParser>
        </LeftDetails>
        <RightDetails flex={4}>
          <ManuscriptType title={manuscriptMeta}>
            {manuscriptMeta}
          </ManuscriptType>
        </RightDetails>
      </Row>
      <AuthorsWithTooltip authors={project.authors} />
    </ManuscriptHeader>
  )
}

export default ManuscriptDetails