import React, { FC } from 'react';
import { Modal } from '../Modal';
import { Button } from '../Button';
import { ButtonLarge } from '../ButtonLarge';

type ModalProps = React.ComponentProps<typeof Modal>;

export interface Props extends ModalProps {
  isActionDisabled?: boolean;
  actionButtonText?: string;
  cancelButtonText?: string;
  onSubmit: () => void;
  onClose: () => void;
}

const ModalConfirmBase: FC<Props> = props => {
  const {
    isOpen,
    onClose,
    onSubmit,
    isActionDisabled,
    actionButtonText,
    cancelButtonText,
    children,
    ...otherProps
  } = props;
  return (
    <Modal isOpen={isOpen} onClose={onClose} {...otherProps}>
      {children}
      <Modal.Footer>
        <Button variant="secondary" onClick={onClose}>
          {cancelButtonText}
        </Button>
        <Button
          variant="primary"
          onClick={onSubmit}
          disabled={isActionDisabled}
        >
          {actionButtonText}
        </Button>
      </Modal.Footer>
    </Modal>
  );
};

export const ModalConfirm = Object.assign(ModalConfirmBase, {
  Header: Modal.Header,
  Body: Modal.Body,
  defaultProps: {
    isActionDisabled: false,
    actionButtonText: 'Confirm',
    cancelButtonText: 'Cancel',
  },
});
