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

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

const MultiAction = ({
  title,
  onClose,
  subtitle,
  onConfirm,
  modalError,
  isFetching,
  renderContent,
  confirmText = 'OK',
  cancelText = 'Cancel',
}) => (
  <Root>
    <IconButton icon="x" onClick={onClose} right={5} secondary top={5} />
    <H2>{title}</H2>
    {subtitle && <Text secondary>{subtitle}</Text>}
    {renderContent()}
    {modalError && (
      <Text error mt={1}>
        {modalError}
      </Text>
    )}
    <Buttons isFetching={isFetching}>
      {isFetching ? (
        <Spinner size={3} />
      ) : (
        <Fragment>
          <Button onClick={onClose}>{cancelText}</Button>
          <Button onClick={onConfirm} primary>
            {confirmText}
          </Button>
        </Fragment>
      )}
    </Buttons>
  </Root>
)

export default compose(
  withHandlers({
    onConfirm: ({ onConfirm, ...props }) => () => {
      if (onConfirm && typeof onConfirm === 'function') {
        onConfirm(props)
      }
    },
    onClose: ({ onCancel, ...props }) => () => {
      if (onCancel && typeof onCancel === 'function') {
        onCancel(props)
      }
      props.hideModal()
    },
    renderContent: ({ content }) => () => {
      if (!content) return null
      if (typeof content === 'object') {
        return content
      } else if (typeof content === 'function') {
        return content()
      }
      return <Text dangerouslySetInnerHTML={{ __html: content }} mb={1} />
    },
  }),
  setDisplayName('MultiActionModal'),
)(MultiAction)

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

  ${H2} {
    margin: 0 0 ${th('gridUnit')} 0;
    text-align: center;
  }

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

const Buttons = styled.div`
  display: flex;
  justify-content: ${props => (props.isFetching ? 'center' : 'space-evenly')};
  margin-top: calc(${th('gridUnit')} * 3);
  width: 70%;
`
// #endregion