import React from 'react';
import { Modal, ModalProps, Button } from 'react-bootstrap';
import "./Confirm.scss"

const colors = {
  confirm: '#00000033',
  warning: '#faad14',
  info: '#1890ff',
  error: '#ff4d4f'
}

const icons = {
  confirm: <i style={{ color: colors.warning }} className="bi bi-exclamation-circle bootstrap-confirm-icon"></i>,
  warning: <i style={{ color: colors.warning }} className="bi bi-exclamation-circle bootstrap-confirm-icon"></i>,
  info: <i style={{ color: colors.info }} className="bi bi-info-circle bootstrap-confirm-icon"></i>,
  error: <i style={{ color: colors.error }} className="bi bi-x-circle bootstrap-confirm-icon"></i>,
}

interface ConfirmProps extends ModalProps {
  title: string,
  children: React.ReactNode,
  show: boolean,
  centered: boolean,
  contentClassName: string,
  type: keyof typeof icons,
  noBtnText?: string,
  yesBtnText?: string,
  onSave?: () => void,
  onCancel?: () => void,
}

const Confirm = ({
  title = "Confirm",
  children,
  onSave, onCancel,
  type = "confirm",
  contentClassName,
  noBtnText = "No",
  yesBtnText = "Yes",
  ...props
}: ConfirmProps) => {
  return (
    <Modal
      backdrop={'static'}
      keyboard={false}
      contentClassName={`${contentClassName} ${type}`}
      {...props}
    >
      <Modal.Header className="bootstrap-confirm-header">
        <Modal.Title className="bootstrap-confirm-title">
          {icons[type]}
          {title}
        </Modal.Title>
      </Modal.Header>
      <Modal.Body className="bootstrap-confirm-body">
        {children}
      </Modal.Body>
      <Modal.Footer className="bootstrap-confirm-footer">
        {
          noBtnText && (
            <Button className="button-cancel" variant="secondary" size="sm" onClick={onCancel}>
              {noBtnText}
            </Button>
          )
        }

        {
          yesBtnText && (
            <Button className="button-save" variant="primary" size="sm" onClick={onSave}>
              {yesBtnText}
            </Button>
          )
        }
      </Modal.Footer>
    </Modal>
  );
};

export default Confirm;
export { Confirm, ConfirmProps };