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,
  Item,
  IconButton,
  ActionLink,
  AuthorTagList,
  ReviewerBreakdown,
} from './'

import { OpenModal } from './modals'

const ManuscriptCard = ({
  submitDate,
  onCardClick,
  onDelete,
  canDelete,
  fragment = {},
  manuscriptType = {},
  collection: { visibleStatus = 'Draft', handlingEditor, customId },
}) => {
  const { authors = [], id: fragmentId, metadata = {} } = fragment
  const { title = 'No title', journal = '', type = '' } = metadata
  return (
    <Root data-test-id={`fragment-${fragmentId}`} onClick={onCardClick}>
      <MainContainer>
        <Row alignItems="center" justify="space-between">
          <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} tooltip />
          </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" />
          )}
          {canDelete && (
            <Item justify="flex-end" onClick={e => e.stopPropagation()}>
              <OpenModal
                confirmAction={onDelete}
                confirmText="Delete"
                modalKey={`delete-${customId}`}
                title="Are you sure you want to delete this submission?"
              >
                {onClickEvent => (
                  <ActionLink icon="trash" onClick={onClickEvent}>
                    Delete
                  </ActionLink>
                )}
              </OpenModal>
            </Item>
          )}
        </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 = {},
      collection: { status = 'draft' },
    }) => ({
      submitDate: submitted
        ? `Submitted on ${moment(submitted).format('DD.MM.YYYY')}`
        : '',
      manuscriptType: get(journal, 'manuscriptTypes', []).find(
        t => t.value === get(metadata, 'type', ''),
      ),
      canDelete: status === 'draft',
    }),
  ),
  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