import React from 'react'
import styled from 'styled-components'
import { th } from '@pubsweet/ui-toolkit'
import { Button, Icon, H2 } from '@pubsweet/ui'
import { compose, setDisplayName, withHandlers } from 'recompose'

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

const SingleActionModal = ({
  error,
  title,
  content,
  onClick,
  subtitle,
  confirmText = 'OK',
}) => (
  <Root>
    <IconButton icon="x" onClick={onClick} right={5} secondary top={5} />
    <Icon error={error} primary={!error} size={6}>
      {error ? 'x-circle' : 'check-circle'}
    </Icon>
    {title && <H2>{title}</H2>}
    {subtitle && <Text secondary>{subtitle}</Text>}
    <Button data-test-id="modal-confirm" onClick={onClick} primary>
      {confirmText}
    </Button>
  </Root>
)

export default compose(
  withHandlers({
    onClick: ({ onCancel, onConfirm, hideModal }) => {
      typeof onCancel === 'function' && onCancel()
      typeof onConfirm === 'function' && onConfirm()
      hideModal()
    },
  }),
  setDisplayName('SingleActionModal'),
)(SingleActionModal)

// #region styles
const Root = styled.div`
  align-items: center;
  border: ${th('borderWidth')} ${th('borderStyle')} transparent;
  border-radius: ${th('borderRadius')};
  background: ${th('colorBackground')};
  box-shadow: ${th('boxShadow')};
  display: flex;
  flex-direction: column;
  position: relative;
  padding: calc(${th('gridUnit')} * 5);
  width: calc(${th('gridUnit')} * 40);

  ${H2} {
    margin: calc(${th('gridUnit')} * 2) 0;
  }

  ${Text} {
    margin-bottom: ${th('gridUnit')};
  }

  ${Button} {
    margin-top: ${th('gridUnit')};
  }
`
// #endregion