import React from 'react'
import styled from 'styled-components'
import { th } from '@pubsweet/ui-toolkit'
import { DateParser, Button } from '@pubsweet/ui'
import { get, isEqual, orderBy } from 'lodash'
import { compose, shouldUpdate, withHandlers, withProps } from 'recompose'

import { Label, PersonInvitation, Text } from '../'

const PublonsTable = ({
  reviewers,
  onInviteReviewer,
  renderAcceptedLabel,
  onResendReviewerInvite,
  onRevokeReviewerInvite,
}) =>
  reviewers.length > 0 && (
    <Table>
      <thead>
        <tr>
          <th>
            <Label>Full Name</Label>
          </th>
          <th>
            <Label>Affiliation</Label>
          </th>
          <th>
            <Label>No. of Reviews</Label>
          </th>
          <th>&nbsp;</th>
        </tr>
      </thead>
      <tbody>
        {reviewers.map(reviewer => (
          <TableRow key={reviewer.id}>
            <td>
              <Text>{`${get(reviewer, 'publishingName', '')}`}</Text>
            </td>
            <td>
              <Text>{`${get(reviewer, 'recentOrganizations.name', '')}`}</Text>
            </td>
            <td>{`${get(reviewer, 'numVerifiedReviews', '')}`}</td>
            <HiddenCell>
              <Button secondary size="small" onClick={onInviteReviewer}>
                SEND
              </Button>
            </HiddenCell>
          </TableRow>
        ))}
      </tbody>
    </Table>
  )

export default withHandlers({
  onInviteReviewer: props => reviewer => {
    console.log(reviewer)
  },
})(PublonsTable)

// #region styles
const Table = styled.table`
  border-collapse: collapse;

  & thead {
    border-bottom: 1px solid ${th('colorBorder')};
    background-color: ${th('colorBackgroundHue2')};
  }

  & th,
  & td {
    border: none;
    padding-left: calc(${th('gridUnit')} * 2);
    text-align: start;
    vertical-align: middle;

    height: calc(${th('gridUnit')} * 5);
    min-width: calc(${th('gridUnit')} * 12);
  }
`

const HiddenCell = styled.td`
  opacity: 0;
  padding-top: ${th('gridUnit')};
`

const HidableCell = styled.td`
  opacity: 1;
  padding-top: ${th('gridUnit')};
`

const CustomCell = styled.td`
  &:hover {
    ${Button} {
      display: block;
    }
    ${Text} {
      display: none;
    }
  }

  ${Button} {
    display: none;
  }
  ${Text} {
    display: inline-block;
  }
`

const TableRow = styled.tr`
  background-color: ${th('colorBackgroundHue2')};
  border-bottom: 1px solid ${th('colorBorder')};

  & td:first-child {
    min-width: calc(${th('gridUnit')} * 30);
  }

  &:hover {
    background-color: ${th('colorBackgroundHue3')};

    ${HiddenCell} {
      opacity: 1;
    }
    ${HidableCell} {
      opacity: 0;
    }
  }
`
// #endregion