import React from 'react';
import PropTypes from 'prop-types';
import compose from 'lodash.compose';

import { visualProvided } from '../atoms/VisualProvider';
import Card from '../atoms/Card';
import Modal from '../atoms/Modal';
import Button from '../atoms/Button';
import IconButton from '../atoms/IconButton';
import Spaced from '../atoms/Spaced';
import { readonly } from '../atoms/Readonly';


function ConfirmDialog({ t, open, onClose, onConfirm, confirmText, confirmTitle, disableConfirm }) {
  const handleClose = () => {
    if (onClose) onClose();
  };

  const handleConfirm = () => {
    onConfirm();
    handleClose();
  };

  return (
    <Modal
      isOpen={open}
      onClose={handleClose}
    >
      <Card>
        {
          confirmTitle && <Card.Title>{confirmTitle}</Card.Title>
        }
        <Spaced>
          {confirmText}
        </Spaced>
        <Card.Action>
          <Button type="button" onClick={handleClose}>{t('confirmDialogCancel')}</Button>
          <Button primary type="button" disabled={disableConfirm} onClick={handleConfirm}>{t('confirmDialogConfirm')}</Button>
        </Card.Action>
      </Card>
    </Modal>
  );
}

const WrappedConfirmDialog = compose(
  readonly({ readonly: false }),
  visualProvided
)(ConfirmDialog);

// --------------------
// --------------------
// --------------------

export function confirmable(Component) {
  class ConfirmableHoc extends React.Component {

    constructor(props) {
      super(props);
      this.state = { open: false };

      this.openDialog = this.openDialog.bind(this);
      this.closeDialog = this.closeDialog.bind(this);
    }

    openDialog(e) {
      if (e) e.stopPropagation();
      this.setState({ open: true });
    }

    closeDialog() {
      this.setState({ open: false });
    }

    render() {
      const { onConfirm, confirmText, confirmTitle, disableConfirm, ...rest } = this.props;
      const { open } = this.state;

      const handleClose = () => {
        this.closeDialog();
      };

      const handleConfirm = () => {
        onConfirm();
        this.closeDialog();
      };

      return (
        <div>
          <Component {...rest} onClick={this.openDialog} />
          <WrappedConfirmDialog open={open} onClose={handleClose} onConfirm={handleConfirm} confirmText={confirmText} confirmTitle={confirmTitle} disableConfirm={disableConfirm} />
        </div>
      );
    }
  }

  return ConfirmableHoc;
}


// --------------------
// --------------------
// --------------------

export const ConfirmButton = confirmable(Button);
export const ConfirmIconButton = confirmable(IconButton);

const propTypes = {
  children: PropTypes.node,
  primary: PropTypes.bool,
  icon: PropTypes.string,
  confirmTitle: PropTypes.string,
  confirmText: PropTypes.string,
  checked: PropTypes.bool,
  large: PropTypes.bool,
  // eslint-disable-next-line react/forbid-prop-types
  style: PropTypes.object,
  disabled: PropTypes.bool,
  onClick: PropTypes.func,
  onConfirm: PropTypes.func,
  type: PropTypes.string,
  disableConfirm: PropTypes.bool
};
ConfirmButton.propTypes = propTypes;
ConfirmIconButton.propTypes = propTypes;