import React from "react";
import {X} from "@phosphor-icons/react";
import {useCurtains, useCurtain, useCallableCurtain} from "../Curtains/Curtains";
import {classes, Modify} from "../../Utils";
import {ModalType, ModalTypeIcon} from "./ModalsTypes";

/**
 * More natural name of useCurtains for modals.
 * @see useCurtains
 */
export const useModals = useCurtains;

/**
 * More natural name of useCurtain for modals.
 * @see useCurtain
 */
export const useModal = useCurtain;

/**
 * More natural name of useCallableCurtain for modals.
 * @see useCallableCurtain
 */
export const useCallableModal = useCallableCurtain;

/**
 * Modal main component.
 */
export function Modal({className, title, closable, type, children, ...props}: React.PropsWithChildren<Modify<React.HTMLAttributes<HTMLDivElement>, {
	/**
	 * Modal title.
	 */
	title?: string;

	/**
	 * Can disable close button.
	 */
	closable?: boolean;

	/**
	 * Modal type. None by default.
	 */
	type?: ModalType;
}>>)
{
	// Modal is closable by default.
	closable = closable !== undefined ? closable : true;

	// Modal type is NONE by default.
	type = type !== undefined ? type : ModalType.NONE;

	// Modal state.
	const {close} = useModal();

	return (
		<div className={classes("modal", type, className)} {...props}>
			<header>
				<h1>{ModalTypeIcon[type]} {title ?? ""}</h1>

				<button className={"icon-only close"} onClick={close} disabled={!closable}><X size={20} /></button>
			</header>

			<main>
				{children}
			</main>
		</div>
	);
}