import { Dialog } from '.';
import { Button } from '../button';
import { DialogRoot } from './dialog';
import type { ConfirmDialogProps } from './types';

export function ConfirmDialog({
  open,
  close,
  title,
  description,
  content,
  okCancel,
  displayCancel,
  displayOk,
  okText = 'OK',
  okButtonIntent = 'default',
  onOk,
  onCancel,
  cancelText = 'Cancel',
  onEscapeKeyDown,
  onInteractOutside,
  onPointerDownOutside,
  type,
  closable,
}: ConfirmDialogProps) {
  const cancelButton = (okCancel || displayCancel) && (
    <Button
      onClick={() => {
        onCancel?.();
        close();
      }}
    >
      {cancelText}
    </Button>
  );

  const okButton = displayOk && (
    <Button
      intent={okButtonIntent}
      onClick={() => {
        onOk?.();
        close();
      }}
    >
      {okText}
    </Button>
  );

  return (
    <DialogRoot open={open} onOpenChange={() => close()}>
      <Dialog.Content
        onEscapeKeyDown={onEscapeKeyDown}
        onInteractOutside={onInteractOutside}
        onPointerDownOutside={onPointerDownOutside}
        type={type}
        closable={closable}
      >
        {title && <Dialog.Title>{title}</Dialog.Title>}
        {description && <Dialog.Description>{description}</Dialog.Description>}
        {content}
        {(displayOk || okCancel || displayCancel) && (
          <div className="c-dialog-content__buttons">
            {cancelButton}
            {okButton}
          </div>
        )}
      </Dialog.Content>
    </DialogRoot>
  );
}
