import useOpenable from "@Front/Hooks/useOpenable";
import { Bars3BottomRightIcon, XMarkIcon } from "@heroicons/react/24/outline";
import React, { useEffect } from "react";

import IconButton from "../../IconButton";
import BurgerModal from "./BurgerModal";
import classes from "./classes.module.scss";
import WindowStore from "@Front/Stores/WindowStore";

const headerBreakpoint = 1023;

export default function BurgerMenu() {
	const { isOpen, toggle, close } = useOpenable();

	useEffect(() => {
		const onResize = (window: Window) => {
			if (window.innerWidth > headerBreakpoint && isOpen) close();
		};

		const windowResizeSubscription = WindowStore.getInstance().onResize((window) => onResize(window));

		return () => {
			windowResizeSubscription();
		};
	}, [close, isOpen]);

	return (
		<div className={classes["root"]}>
			{isOpen ? (
				<IconButton icon={<XMarkIcon />} onClick={toggle} />
			) : (
				<IconButton icon={<Bars3BottomRightIcon />} onClick={toggle} />
			)}
			<BurgerModal isOpen={isOpen} closeModal={close} />
		</div>
	);
}
