import React, { Fragment } from 'react'
import { get } from 'lodash'
import { H4 } from '@pubsweet/ui'
import styled from 'styled-components'
import { th } from '@pubsweet/ui-toolkit'
import { compose, withHandlers, withProps } from 'recompose'

import { Text } from './'

const ReviewerBreakdown = ({ getReportBreakdown }) => getReportBreakdown()

const roleFilter = role => i => i.role === role
const submittedFilter = r => r.review && r.review.submittedOn
const acceptedFilter = i => i.hasAnswer && i.isAccepted
const declinedFilter = i => i.hasAnswer && !i.isAccepted
const reviewerReduce = (acc, r) => ({
  ...acc,
  accepted: acceptedFilter(r) ? acc.accepted + 1 : acc.accepted,
  declined: declinedFilter(r) ? acc.declined + 1 : acc.declined,
  submitted: submittedFilter(r) ? acc.submitted + 1 : acc.submitted,
})

export default compose(
  withProps(({ fragment }) => ({
    invitations: get(fragment, 'invitations', []),
    recommendations: get(fragment, 'recommendations', []),
  })),
  withHandlers({
    getReportBreakdown: ({
      invitations,
      recommendations,
      label = '',
    }) => () => {
      const reviewerInvitations = invitations.filter(roleFilter('reviewer'))
      const invitationsWithRecommendations = reviewerInvitations.map(r => ({
        ...r,
        review: recommendations.find(rec => rec.userId === r.userId),
      }))
      const report = invitationsWithRecommendations.reduce(reviewerReduce, {
        accepted: 0,
        declined: 0,
        submitted: 0,
      })
      return (
        <Fragment>
          {!!label && <Label>{label}</Label>}
          {reviewerInvitations.length ? (
            <Text secondary>
              {`${reviewerInvitations.length} invited, ${
                report.accepted
              } agreed, ${report.declined} declined, ${
                report.submitted
              } submitted`}
            </Text>
          ) : (
            <Text secondary> {`${reviewerInvitations.length} invited`}</Text>
          )}
        </Fragment>
      )
    },
  }),
)(ReviewerBreakdown)

const Label = styled(H4)`
  display: inline-block;
  margin-right: ${th('gridUnit')};
`