import React from "react";
import classes from "./classes.module.scss";
import Link from "next/link";
import classNames from "classnames";
import { useRouter } from "next/router";
import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Typography";

type IProps = {
	text: string | JSX.Element;
	path?: string;
	onClick?: () => void;
	isEnabled?: boolean;
	isActive?: boolean;
	routesActive?: string[];
	target?: "blank" | "self" | "_blank";
};

type IPropsClass = IProps;
type IStateClass = {};

class NavigationLinkClass extends React.Component<IPropsClass, IStateClass> {
	static defaultProps = { isEnabled: true };
	public override render(): JSX.Element | null {
		if (!this.props.isEnabled) return null;
		return (
			<Link
				href={this.props.path ?? ""}
				className={classNames(classes["root"], this.props.isActive && [classes["active"]])}
				onClick={this.props.onClick}
				target={this.props.target}>
				<div className={classes["content"]}>
					<Typography
						typo={this.props.isActive ? ITypo.TEXT_LG_SEMIBOLD : ITypo.TEXT_LG_REGULAR}
						color={this.props.isActive ? ITypoColor.COLOR_NEUTRAL_950 : ITypoColor.COLOR_NEUTRAL_500}>
						{this.props.text}
					</Typography>
				</div>
			</Link>
		);
	}
}

export default function NavigationLink(props: IProps) {
	const router = useRouter();
	const { pathname } = router;
	let isActive = props.path === pathname;
	if (props.routesActive) {
		for (const routeActive of props.routesActive) {
			if (isActive) break;
			isActive = pathname.includes(routeActive);
		}
	}
	return <NavigationLinkClass {...props} isActive={isActive} />;
}