import useOpenable from "@Front/Hooks/useOpenable";
import WindowStore from "@Front/Stores/WindowStore";
import { UserIcon } from "@heroicons/react/24/outline";
import React, { useEffect } from "react";

import IconButton from "../../IconButton";
import classes from "./classes.module.scss";
import ProfileModal from "./ProfileModal";

const headerBreakpoint = 1023;

export default function Profile() {
	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"]}>
			<IconButton icon={<UserIcon />} onClick={toggle} />
			<ProfileModal isOpen={isOpen} closeModal={close} />
		</div>
	);
}