<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css"
        integrity="sha512-SzlrxWUlpfuzQ+pcUCosxcglQRNAq/DZjVsC0lE40xsADsfeQoEypE+enwcOiGjk/bSuGGKHEyjSoQ1zVisanQ=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
</html>
import { useGlobalStore } from '@assist/state/globals';
import { Dialog, DialogTitle } from '@headlessui/react';
import { Button } from '@wordpress/components';
import { useEffect, useState } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import { close, Icon } from '@wordpress/icons';

export const Modal = () => {
	const { modals, popModal } = useGlobalStore();
	const ModalContent = modals[0];
	const [title, setTitle] = useState('');

	useEffect(() => {
		if (!modals[0]) setTitle('');
	}, [modals]);

	return (
		<Dialog
			as="div"
			className="extendify-assist"
			open={modals.length > 0}
			onClose={popModal}
		>
			<div className="fixed top-0 z-high mx-auto h-full w-full items-center justify-center overflow-hidden p-2 md:flex md:p-6">
				<div
					className="fixed inset-0 bg-black/40 transition-opacity"
					aria-hidden="true"
				/>
				<div className="relative mx-auto flex flex-col rounded-xs bg-white shadow-2xl sm:flex sm:min-w-md sm:overflow-hidden">
					<div className="flex items-center justify-between">
						<DialogTitle className="m-0 px-6 text-base text-gray-900">
							{title}
						</DialogTitle>
						<Button
							className="m-4 border-0"
							onClick={popModal}
							icon={<Icon icon={close} size={24} />}
							label={__('Close Modal', 'extendify-local')}
							showTooltip={false}
						/>
					</div>
					<div className="relative m-0 p-6 pt-0 text-left">
						{modals?.length > 0 && (
							<ModalContent popModal={popModal} setModalTitle={setTitle} />
						)}
					</div>
				</div>
			</div>
		</Dialog>
	);
};
