import React, { Fragment } from 'react'
import styled from 'styled-components'
import { compose, withHandlers, defaultProps, setDisplayName } from 'recompose'

import { Text, OpenModal, IconButton, marginHelper } from './'

const PersonInvitation = ({
  hasAnswer,
  person: { name },
  revokeInvitation,
  resendInvitation,
  ...rest
}) => (
  <Root {...rest}>
    <Text>{name}</Text>
    {!hasAnswer && (
      <Fragment>
        <OpenModal
          onConfirm={resendInvitation}
          title="Are you sure you want to resend the invitation?"
        >
          {showModal => (
            <IconButton
              icon="refresh-cw"
              iconSize={2}
              ml={2}
              onClick={showModal}
              secondary
            />
          )}
        </OpenModal>
        <OpenModal
          confirmText="Remove invite"
          onConfirm={revokeInvitation}
          subtitle="Clicking ‘Remove’ will allow you to invite a different Handling Editor"
          title="Remove invitation to Handling Editor?"
        >
          {showModal => (
            <IconButton
              icon="x-circle"
              iconSize={2}
              ml={2}
              onClick={showModal}
              secondary
            />
          )}
        </OpenModal>
      </Fragment>
    )}
  </Root>
)

export default compose(
  defaultProps({
    person: {
      name: 'Unassigned',
    },
    onRevoke: id => {},
    onResend: id => {},
  }),
  withHandlers({
    revokeInvitation: ({ id, onRevoke }) => () => {
      typeof onRevoke === 'function' && onRevoke(id)
    },
    resendInvitation: ({ id, onResend, person: { email } }) => () => {
      typeof onResend === 'function' && onResend(email)
    },
  }),
  setDisplayName('PersonInvitation'),
)(PersonInvitation)

// #region styles
const Root = styled.div`
  align-items: center;
  display: flex;

  ${marginHelper};
`
// #endregion