import React from 'react'
import moment from 'moment'
import { get } from 'lodash'
import { H3, H4 } from '@pubsweet/ui'
import styled from 'styled-components'
import { th } from '@pubsweet/ui-toolkit'
import { withJournal } from 'xpub-journal'
import { compose, withHandlers, setDisplayName, withProps } from 'recompose'

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

const ManuscriptCard = ({
  fragment,
  submitDate,
  onCardClick,
  manuscriptType = {},
  fragment: {
    authors = [],
    id: fragmentId,
    metadata: { title = 'No title', journal = '', type = '' },
  },
  collection: { visibleStatus = 'Draft', handlingEditor, customId },
}) => (
  <Root data-test-id={`fragment-${fragmentId}`} onClick={onCardClick}>
    <MainContainer>
      <Row alignItems="center" justify="space-between" mb={1}>
        <H3>{title}</H3>
        <Tag data-test-id="fragment-status" status>
          {visibleStatus}
        </Tag>
      </Row>
      {authors.length > 0 && (
        <Row alignItems="center" justify="flex-start" mb={1}>
          <AuthorTagList authors={authors} />
        </Row>
      )}
      <Row alignItems="center" justify="flex-start" mb={1}>
        <Text customId mr={1}>{`ID ${customId}`}</Text>
        <Text mr={3} secondary>
          {submitDate}
        </Text>
        <H4>{manuscriptType.label || type}</H4>
        <Text ml={1} secondary>
          {journal}
        </Text>
      </Row>
      <Row alignItems="center" justify="flex-start" mb={1}>
        <H4>Handling editor</H4>
        <Text ml={1} mr={3}>
          {get(handlingEditor, 'name', 'Unassigned')}
        </Text>
        {handlingEditor && (
          <ReviewerBreakdown fragment={fragment} label="Reviewer Reports" />
        )}
      </Row>
    </MainContainer>
    <SideNavigation>
      <IconButton icon="chevron-right" iconSize={2} />
    </SideNavigation>
  </Root>
)

export default compose(
  withJournal,
  withHandlers({
    onCardClick: ({ onClick, collection = {}, fragment = {} }) => () => {
      onClick(collection, fragment)
    },
  }),
  withProps(({ fragment: { submitted, metadata }, journal = {} }) => ({
    submitDate: submitted
      ? `Submitted on ${moment(submitted).format('DD.MM.YYYY')}`
      : '',
    manuscriptType: get(journal, 'manuscriptTypes', []).find(
      t => t.value === get(metadata, 'type', ''),
    ),
  })),
  setDisplayName('ManuscriptCard'),
)(ManuscriptCard)

// #region styles
const MainContainer = styled.div`
  justify-content: flex-start;
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: calc(${th('gridUnit')} * 2);
  padding-bottom: ${th('gridUnit')};

  ${Row} {
    ${H3} {
      margin-bottom: 0;
    }
  }
`

const SideNavigation = styled.div`
  align-items: center;
  background-color: ${th('colorBackgroundHue2')
    ? th('colorBackgroundHue2')
    : th('colorBackgroundHue')};
  border-top-right-radius: ${th('borderRadius')};
  border-bottom-right-radius: ${th('borderRadius')};
  display: flex;
  width: calc(${th('gridUnit')} * 5 / 2);
`

const Root = styled.div`
  background-color: #fff;
  border-radius: ${th('borderRadius')};
  box-shadow: ${th('boxShadow')};
  cursor: pointer;
  display: flex;
  margin: ${th('gridUnit')};

  &:hover {
    box-shadow: ${th('dashboardCard.hoverShadow')};
  }

  ${H3} {
    margin: 0;
    margin-bottom: ${th('gridUnit')};
  }
`
// #endregion