import React, { useCallback, useState } from 'react';
import { SilkeButton, SilkeButtonProps } from './silke-button';
import { SilkeConfirmationModal, SilkeConfirmationModalProps } from '../silke-modal';

type SilkeConfirmationButtonProps = {
  message?: React.ReactNode;
  modalSize?: SilkeConfirmationModalProps['size'];
} & Omit<SilkeButtonProps, 'onClick'> &
  Omit<SilkeConfirmationModalProps, 'children' | 'hide' | 'onClose' | 'size'>;

export function SilkeConfirmationButton({
  message,
  title,
  confirmKind,
  confirmIcon,
  confirmLabel,
  rejectLabel,
  modalSize = 'small',
  onConfirm,
  ...rest
}: SilkeConfirmationButtonProps) {
  const [show, setShow] = useState(false);
  const handleToggle = useCallback(() => setShow(!show), [show]);
  const handleConfirm = useCallback(() => {
    setShow(!show);
    onConfirm();
  }, [show, onConfirm]);

  return (
    <>
      <SilkeButton {...rest} onClick={handleToggle} />
      <SilkeConfirmationModal
        hide={!show}
        title={title}
        size={modalSize}
        confirmLabel={confirmLabel}
        confirmIcon={confirmIcon}
        confirmKind={confirmKind || rest.kind}
        rejectLabel={rejectLabel}
        onConfirm={handleConfirm}
        onClose={handleToggle}
      >
        {message}
      </SilkeConfirmationModal>
    </>
  );
}