import React, { useEffect, ReactNode } from "react";

interface ModalProps {
  isOpen: boolean;
  onClose: () => void;
  onConfirm: () => void;
  title: string;
  message: string | ReactNode;
  confirmText?: string;
  cancelText?: string | null;
  confirmType?: "primary" | "danger";
}

export const Modal: React.FC<ModalProps> = ({
  isOpen,
  onClose,
  onConfirm,
  title,
  message,
  confirmText = "OK",
  cancelText,
  confirmType = "primary",
}) => {
  // Если cancelText не передан или пустая строка, скрываем кнопку отмены
  // Если передан null или пустая строка, не показываем кнопку
  // Если не передан вообще (undefined), используем дефолтное значение "Отмена"
  const shouldShowCancel = cancelText !== null && cancelText !== "";
  const displayCancelText = cancelText === undefined ? "Отмена" : cancelText;
  
  useEffect(() => {
    const handleEscape = (e: KeyboardEvent) => {
      if (e.key === "Escape") onClose();
    };

    if (isOpen) {
      document.addEventListener("keydown", handleEscape);
    }

    return () => document.removeEventListener("keydown", handleEscape);
  }, [isOpen, onClose]);

  if (!isOpen) return null;

  return (
    <div className="modal" style={{ display: "block" }} onClick={onClose}>
      <div className="modal-content" onClick={(e) => e.stopPropagation()}>
        <div className="modal-header">
          <h3>{title}</h3>
          <span className="modal-close" onClick={onClose}>
            &times;
          </span>
        </div>
        <div className="modal-body">
          {typeof message === "string" ? <p>{message}</p> : message}
        </div>
        <div className="modal-footer">
          <button
            className={confirmType === "danger" ? "btn-danger" : "btn-primary"}
            onClick={onConfirm}
          >
            {confirmText}
          </button>
          {shouldShowCancel && (
            <button className="btn-secondary" onClick={onClose}>
              {displayCancelText}
            </button>
          )}
        </div>
      </div>
    </div>
  );
};
