import { DangerButton, PrimaryButton, SuccessButton, WarningButton } from "$/component/button";
import { Modal } from "$/component/modal";
import { createFileRoute } from "@tanstack/react-router";
import { useState } from "react";


export const Route = createFileRoute("/modal/")({
	component: ModalPage
});


function ModalPage(){
	const [ displayCenteredModal, setDisplayCenteredModal ] = useState(false);
	const [ displayTopModal, setDisplayTopModal ] = useState(false);


	return (
		<div
			className="flex flex-col items-center justify-center gap-y-16"
		>
			<h1
				className="text-4xl"
			>
				Modals
			</h1>
			<PrimaryButton
				onClick={() => setDisplayCenteredModal(true)}
			>
				Centered Modal
			</PrimaryButton>
			<PrimaryButton
				onClick={() => setDisplayTopModal(true)}
			>
				Top Modal
			</PrimaryButton>
			<div
				className="flex flex-row items-center justify-center gap-x-4">
				<PrimaryButton
					onClick={() => {}}
				>
					Timed Modal
				</PrimaryButton>
				<SuccessButton
					onClick={() => {}}
				>
					Timed Modal
				</SuccessButton>
				<WarningButton
					onClick={() => {}}
				>
					Timed Modal
				</WarningButton>
				<DangerButton
					onClick={() => {}}
				>
					Timed Modal
				</DangerButton>
			</div>

			<DemoCenteredModal
				display={displayCenteredModal}
				onClose={() => setDisplayCenteredModal(false)}
			/>
			<DemoTopModal
				display={displayTopModal}
				onClose={() => setDisplayTopModal(false)}
			/>
		</div>
	);
}

function DemoCenteredModal({
	display,
	onClose
}:{
	display: boolean;
	onClose: () => void;
}){
	return (
		<Modal
			display={display}
			onClose={onClose}
			className="bg-(--bg-color) text-(--text-color)"
		>
			<span>This is the centered modal.</span>
			<span>I am giving multiple lines so we can</span>
			<span>see how it looks.</span>
		</Modal>
	);
}

function DemoTopModal({
	display,
	onClose
}:{
	display: boolean;
	onClose: () => void;
}){
	return (
		<Modal
			display={display}
			onClose={onClose}
			className="bg-(--bg-color) text-(--text-color)"
			top={true}
		>
			<span>This is the top modal.</span>
			<span>I am giving multiple lines so we can</span>
			<span>see how it looks.</span>
		</Modal>
	);
}