import classNames from "classnames";
import Link from "next/link";
import { useRouter } from "next/router";
import React from "react";

import Typography, { ITypo } from "../../Typography";
import classes from "./classes.module.scss";

type IPropsClass = {
	text: string | JSX.Element;
	path?: string;
	isActive?: boolean;
};

type IStateClass = {};

class HeaderLinkClass extends React.Component<IPropsClass, IStateClass> {
	public override render(): JSX.Element {
		if (this.props.path !== "" && this.props.path !== undefined) {
			return (
				<Link href={this.props.path} className={classNames(classes["root"], this.props.isActive && classes["active"])}>
					<div className={classes["content"]}>
						<Typography typo={this.props.isActive ? ITypo.P_SB_18 : ITypo.NAV_HEADER_18}>{this.props.text}</Typography>
					</div>
					{this.props.isActive && <div className={classes["underline"]} />}
				</Link>
			);
		} else {
			return (
				<div className={classNames(classes["root"], classes["desactivated"])}>
					<div className={classes["content"]}>
						<Typography typo={ITypo.NAV_HEADER_18}>{this.props.text}</Typography>
					</div>
				</div>
			);
		}
	}
}

export default function HeaderLink(props: IPropsClass) {
	/**
	 * TODO: We need to fix the check and include subPathName
	 * BUT
	 * `/folder/archived` and `/folder/xxx` should be differenciated
	 */
	const router = useRouter();
	const { pathname } = router;
	const isActive = pathname === props.path;
	return <HeaderLinkClass {...props} isActive={isActive} />;
}