import Link from "next/link";
import { useRouter } from "next/router";
import React, { useEffect } from "react";

import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography";
import useHoverable from "@Front/Hooks/useHoverable";

type IHeaderLinkProps = {
	text: string | JSX.Element;
	path: string;
	routesActive?: string[];
};

export default function HeaderSubmenuLink(props: IHeaderLinkProps) {
	const router = useRouter();
	const { pathname } = router;
	const [isActive, setIsActive] = React.useState(props.path === pathname);
	const { handleMouseLeave, handleMouseEnter, isHovered } = useHoverable();

	useEffect(() => {
		if (props.path === pathname) setIsActive(true);
		if (props.routesActive) {
			for (const routeActive of props.routesActive) {
				if (isActive) break;
				if (pathname.includes(routeActive)) setIsActive(true);
			}
		}
	}, [isActive, pathname, props.path, props.routesActive]);

	return (
		<Link href={props.path} onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>
			<Typography
				typo={isActive || isHovered ? ETypo.TEXT_LG_SEMIBOLD : ETypo.TEXT_LG_REGULAR}
				color={isActive || isHovered ? ETypoColor.COLOR_NEUTRAL_950 : ETypoColor.COLOR_NEUTRAL_500}>
				{props.text}
			</Typography>
		</Link>
	);
}