/* eslint-disable no-nested-ternary */
import React, { useState, useEffect } from "react";
import Router, { useRouter } from "next/router";

// Components
import Bell from "@Components/Commons/Icons/Bell/Bell";
import Plus from "@Components/Commons/Icons/Plus/Plus";
import Down from "@Components/Commons/Icons/Down/Down";

// Redux
import { useSelector, useDispatch } from "react-redux";
import { ActionConsts } from "@Definitions/ActionConsts";
import { RootState } from "@Redux";

import { WEBSITE_URL } from "src/config";
import styles from "./Navbar.module.css";

interface Props {
    isNotificationActive: boolean;
}

const Navbar: React.FunctionComponent<Props> = ({
    isNotificationActive,
}): JSX.Element => {
    const router = useRouter();
    const dispatch = useDispatch();
    const { isAuthenticated, user } = useSelector(
        (state: RootState) => state.AuthReducer
    );

    const [isActive, setIsActive] = useState(false);
    const [navbarSolid, setNavbarSolid] = useState(false);
    const [mounted, setMounted] = useState<boolean>(false);
    const [displayUserDropdown, setDisplayUserDropDown] = useState<boolean>(
        false
    );

    const handleClickEvent = () => {
        setDisplayUserDropDown(false);
    };

    const navbarState = () => {
        if (window.scrollY > 150) setNavbarSolid(true);
        if (window.scrollY < 150) setNavbarSolid(false);
    };

    useEffect(() => {
        setMounted(true);
        window.addEventListener("click", handleClickEvent);
        window.addEventListener("scroll", navbarState);

        return () => {
            window.removeEventListener("click", handleClickEvent);
            window.addEventListener("scroll", navbarState);
        };
    }, []);

    useEffect(() => {
        if (isActive) document.body.style.overflowY = "hidden";
        else document.body.style.overflowY = "auto";
    }, [isActive]);

    // useEffect(() => {
    //     const links1 = document.getElementById("celebrityschool-nav-links");
    //     const links2 = document.getElementById(
    //         "celebrityschool-nav-auth-links"
    //     );
    //     const ham = document.getElementById("navbar-hamburger-menu");

    //     if (links1 && links2 && ham) {
    //         if (
    //             router.pathname.includes("ht_access") ||
    //             router.pathname.includes("financepeer_access")
    //         ) {
    //             links1.style.display = "none";
    //             links2.style.display = "none";
    //             ham.style.display = "none";
    //         }
    //     }
    // }, [router]);

    const getSrc = () => {
        const { promocode } = router.query;

        if (window.location.href.includes("/hitachi")) {
            return promocode
                ? `/hitachi?promocode=${router.query.promocode}`
                : `/hitachi`;
        }

        const prefix = router.asPath.split("/")[1];

        if (prefix === "hitachi" || prefix === "us")
            return promocode
                ? `/${prefix}?promocode=${router.query.promocode}`
                : `/${prefix}`;

        return promocode ? `/?promocode=${router.query.promocode}` : `/`;
    };

    const handleLinkClick = (link: string) => {
        setIsActive(false);

        const { promocode } = router.query;

        const prefix = router.asPath.split("/")[1];

        if (prefix === "us" || prefix === "hitachi")
            return promocode
                ? Router.push(`/${prefix}/${link}?promcode=${promocode}`)
                : Router.push(`/${prefix}/${link}`);

        return promocode
            ? Router.push(`/${link}?promcode=${promocode}`)
            : Router.push(`/${link}`);
    };

    // const getLogoSrc = (): string => {
    //     console.log(router.asPath);
    //     if (router.asPath.includes("/ht_access"))
    //         return "/static/images/others/ht_logo.png";
    //     if (router.asPath.includes("/financepeer_access"))
    //         return "/static/images/others/financepeer_logo.png";
    //     return "/static/images/others/CelebritySchoolLogo.webp";
    // };

    const getLogo = (): JSX.Element => {
        if (router.pathname.includes("ht_access"))
            return (
                <img
                    src="/static/images/others/ht_logo.png"
                    alt=""
                    style={{ width: "150px" }}
                />
            );
        if (router.pathname.includes("financepeer_access"))
            return (
                <img
                    src="/static/images/others/financepeer_logo.png"
                    alt=""
                    style={{ width: "150px" }}
                />
            );

        if (router.pathname.includes("mesc"))
            return (
                <img
                    src="/static/images/others/MESC-CreativeWarriors.webp"
                    alt=""
                    style={{ width: "150px" }}
                />
            );

        if (router.pathname.includes("/hitachi"))
            return (
                <div className={styles.hitachi_logo_container}>
                    <div className={styles.hitachi_celebrityschool_logo}>
                        <img
                            src="/static/images/others/CelebritySchoolLogo.webp"
                            alt=""
                            // className={styles.hitachi_celebrityschool_logo}
                            // style={{ height: "40px", width: "50px" }}
                        />
                        <p
                            className={styles.logo_text}
                            style={{ fontSize: "16px" }}
                        >
                            CelebritySchool
                        </p>
                    </div>
                    {/* <div className={styles.hitachi_logo} /> */}
                    {/* <img
                        src="/static/images/clients/hitachi_logo.png"
                        alt=""
                        style={{
                            width: "50%",
                            maxWidth: "120px",
                            // marginLeft: "10px",
                            marginRight: "0px !important",
                        }}
                    /> */}
                </div>
            );

        if (
            router.pathname.includes("404") &&
            window.location.href.includes("/hitachi")
        )
            return (
                <div className={styles.hitachi_logo_container}>
                    <div className={styles.hitachi_celebrityschool_logo}>
                        <img
                            src="/static/images/others/CelebritySchoolLogo.webp"
                            alt=""
                            className={styles.hitachi_celebrityschool_logo}
                            // style={{ height: "40px", width: "50px" }}
                        />
                        <p
                            className={styles.logo_text}
                            style={{ fontSize: "16px" }}
                        >
                            CelebritySchool
                        </p>
                    </div>
                    {/* <div className={styles.hitachi_logo} /> */}
                    {/* <img
                        src="/static/images/clients/hitachi_logo.png"
                        alt=""
                        style={{
                            width: "50%",
                            maxWidth: "120px",
                            // marginLeft: "10px",
                            marginRight: "0px !important",
                        }}
                    /> */}
                </div>
            );
        return (
            <>
                <img
                    src="/static/images/others/CelebritySchoolLogo.webp"
                    alt=""
                />
                <p className={styles.logo_text}>CelebritySchool</p>
            </>
        );
    };

    if (
        router.pathname.includes("/arts-olympiad") ||
        router.pathname.includes("/cbo") ||
        router.pathname.includes("/cic") ||
        router.pathname.includes("/crm")
    )
        return <></>;

    if (!mounted || window.location.href.includes("/preferences"))
        return <nav id="celebrityschool-navbar" />;

    return (
        <>
            <nav
                id="celebrityschool-navbar"
                className={`${styles.nav} ${
                    router.pathname.includes("/hitachi")
                        ? styles.hitachi_nav
                        : ""
                } ${navbarSolid ? styles.nav_solid : ""}`}
            >
                <div className={styles.container}>
                    <div
                        className={styles.logo}
                        onClick={() => {
                            setIsActive(false);
                            if (
                                router.asPath.includes("ht_access") ||
                                router.asPath.includes("financepeer_access") ||
                                router.asPath.includes("mesc")
                            )
                                return;
                            Router.push(getSrc());
                        }}
                        onKeyDown={() => {}}
                        role="button"
                        tabIndex={0}
                        style={{
                            userSelect: "none",
                            outline: "none",
                            border: "none",
                            width: window.location.href.includes("/hitachi")
                                ? "auto"
                                : "auto",
                        }}
                    >
                        {getLogo()}
                    </div>
                    {router.pathname.includes("ht_access") ||
                    router.pathname.includes("financepeer_access") ||
                    router.pathname.includes("mesc") ||
                    router.pathname.includes("skillathon_jitogurukul") ? (
                        <></>
                    ) : isAuthenticated && user ? (
                        <ul
                            className={`${styles.auth_actions_mobile} ${
                                window.location.href.includes("/hitachi")
                                    ? styles.marginRight
                                    : ""
                            }`}
                            style={{ background: "red" }}
                        >
                            <li>
                                <div
                                    style={{
                                        height: "20px",
                                        width: "20px",
                                    }}
                                >
                                    <Plus />
                                </div>
                            </li>
                            <li>
                                <div
                                    style={{
                                        height: "22px",
                                        width: "22px",
                                        margin: "0 20px",
                                    }}
                                >
                                    <Bell />
                                </div>
                            </li>
                        </ul>
                    ) : (
                        <></>
                    )}
                    {router.pathname.includes("ht_access") ||
                    router.pathname.includes("financepeer_access") ||
                    router.pathname.includes("mesc") ||
                    router.pathname.includes("skillathon_jitogurukul") ? (
                        <></>
                    ) : (
                        <div
                            className={`${styles.links} ${
                                isActive ? styles.active : ""
                            }`}
                        >
                            <ul
                                id="celebrityschool-nav-links"
                                className={`${styles.page_links} ${
                                    isNotificationActive
                                        ? styles.notification_active
                                        : ""
                                }`}
                            >
                                {router.pathname.includes("ht_access") ||
                                router.pathname.includes(
                                    "financepeer_access"
                                ) ||
                                router.pathname.includes("mesc") ? (
                                    <></>
                                ) : isAuthenticated && user ? (
                                    <>
                                        {router.pathname.includes("/us") ||
                                        router.pathname.includes("/hitachi") ? (
                                            <></>
                                        ) : (
                                            <></>
                                            // <li
                                            //     onClick={() => {
                                            //         setIsActive(false);
                                            //         router.push("/career-test");
                                            //     }}
                                            //     className={
                                            //         styles.auth_action_link_mobile
                                            //     }
                                            // >
                                            //     <span>Career Test</span>
                                            // </li>
                                        )}
                                        {/* <li
                                            onClick={() => {
                                                setIsActive(false);
                                                router.push("/free-course");
                                            }}
                                            className={
                                                styles.auth_action_link_mobile
                                            }
                                        >
                                            <span>Avail Course</span>
                                        </li> */}
                                        {router.pathname.includes("/hitachi") ||
                                        router.pathname.includes("/us") ? (
                                            <></>
                                        ) : (
                                            <li
                                                onClick={() => {
                                                    setIsActive(false);
                                                    // window.location.href = `${WEBSITE_URL}/blogs/`;
                                                    router.push("/blog");
                                                }}
                                                className={
                                                    styles.auth_action_link_mobile
                                                }
                                            >
                                                <span>Blog</span>
                                            </li>
                                        )}
                                        <li
                                            className={
                                                styles.auth_action_link_mobile
                                            }
                                        >
                                            <span
                                                onClick={() =>
                                                    handleLinkClick("profile")
                                                }
                                            >
                                                View Profile
                                            </span>
                                        </li>
                                        <li
                                            className={
                                                styles.auth_action_link_mobile
                                            }
                                        >
                                            <span
                                                onClick={() =>
                                                    handleLinkClick("dashboard")
                                                }
                                            >
                                                Dashboard
                                            </span>
                                        </li>
                                        <li
                                            className={
                                                styles.auth_action_link_mobile
                                            }
                                            onClick={() => {
                                                setIsActive(false);
                                                dispatch({
                                                    type:
                                                        ActionConsts.Auth
                                                            .LOGOUT,
                                                });
                                            }}
                                        >
                                            <span>Logout</span>
                                        </li>
                                    </>
                                ) : (
                                    <></>
                                )}
                            </ul>

                            {router.pathname.includes("ht_access") ||
                            router.pathname.includes("financepeer_access") ||
                            router.pathname.includes("mesc") ? (
                                <></>
                            ) : isAuthenticated && user ? (
                                <ul
                                    id="celebrityschool-nav-auth-links"
                                    className={`${
                                        styles.authenticated_actions
                                    } ${
                                        window.location.href.includes(
                                            "/hitachi"
                                        )
                                            ? styles.marginRight
                                            : ""
                                    }`}
                                >
                                    <li>
                                        <div
                                            style={{
                                                height: "20px",
                                                width: "20px",
                                            }}
                                        >
                                            <Plus />
                                        </div>
                                    </li>
                                    <li>
                                        <div
                                            style={{
                                                height: "22px",
                                                width: "22px",
                                                margin: "0 20px",
                                            }}
                                        >
                                            <Bell />
                                        </div>
                                    </li>
                                    <li
                                        style={{
                                            display: "flex",
                                            alignItems: "center",
                                            cursor: "pointer",
                                            position: "relative",
                                        }}
                                        onClick={e => {
                                            e.stopPropagation();
                                            setDisplayUserDropDown(
                                                !displayUserDropdown
                                            );
                                        }}
                                    >
                                        {/* <img
                                        src={user.profilepic}
                                        alt=""
                                        className={styles.profilepic}
                                    /> */}
                                        <div
                                            style={{
                                                background: `url("${user.profilepic}") no-repeat center center/cover`,
                                                height: "35px",
                                                width: "35px",
                                                borderRadius: "50%",
                                                marginRight: "5px",
                                            }}
                                        />
                                        <p style={{ margin: "0 7px" }}>
                                            {user.name}
                                        </p>
                                        <div
                                            style={{
                                                height: "15px",
                                                width: "15px",
                                            }}
                                        >
                                            <Down />
                                        </div>
                                        <div
                                            className={`${
                                                styles.user_dropdown
                                            } ${
                                                displayUserDropdown
                                                    ? styles.display
                                                    : ""
                                            }`}
                                        >
                                            {router.pathname.includes("/us") ||
                                            router.pathname.includes(
                                                "/hitachi"
                                            ) ? (
                                                <></>
                                            ) : (
                                                <></>
                                                // <span
                                                //     onClick={() => {
                                                //         router.push(
                                                //             "/career-test"
                                                //         );
                                                //     }}
                                                // >
                                                //     Career Test
                                                // </span>
                                            )}
                                            {/* <span
                                                onClick={() => {
                                                    router.push("/free-course");
                                                }}
                                            >
                                                Avail Course
                                            </span> */}
                                            <span
                                                onClick={() => {
                                                    // window.location.href = `${WEBSITE_URL}/blogs/`;
                                                    router.push("/blog");
                                                }}
                                            >
                                                Blog
                                            </span>
                                            <span
                                                onClick={() =>
                                                    handleLinkClick("profile")
                                                }
                                            >
                                                View Profile
                                            </span>
                                            <span
                                                onClick={() =>
                                                    handleLinkClick("dashboard")
                                                }
                                            >
                                                Dashboard
                                            </span>
                                            <span
                                                onClick={() => {
                                                    dispatch({
                                                        type:
                                                            ActionConsts.Auth
                                                                .LOGOUT,
                                                    });
                                                }}
                                            >
                                                Logout
                                            </span>
                                        </div>
                                    </li>
                                </ul>
                            ) : (
                                <ul
                                    id="celebrityschool-nav-auth-links"
                                    className={`${styles.actions} ${
                                        window.location.href.includes(
                                            "/hitachi"
                                        )
                                            ? styles.marginRight
                                            : ""
                                    } ${
                                        isNotificationActive
                                            ? styles.notification_active
                                            : ""
                                    }`}
                                >
                                    {router.pathname.includes("/us") ||
                                    router.pathname.includes("/hitachi") ? (
                                        <></>
                                    ) : (
                                        <></>
                                        // <li
                                        //     onClick={() => {
                                        //         setIsActive(false);
                                        //         router.push("/career-test");
                                        //     }}
                                        //     style={{
                                        //         cursor: "pointer",
                                        //     }}
                                        // >
                                        //     <span>CAREER TEST</span>
                                        // </li>
                                    )}
                                    {router.pathname.includes("/hitachi") ||
                                    router.pathname.includes("/us") ? (
                                        <></>
                                    ) : (
                                        <li
                                            onClick={() => {
                                                setIsActive(false);
                                                // window.location.href = `${WEBSITE_URL}/blogs/`;
                                                router.push("/blog");
                                            }}
                                            style={{
                                                cursor: "pointer",
                                            }}
                                        >
                                            <span>BLOG</span>
                                        </li>
                                    )}
                                    <li
                                        onClick={() => {
                                            setIsActive(false);
                                            dispatch({
                                                type:
                                                    ActionConsts.AuthForm
                                                        .DISPLAY_SIGNIN,
                                            });
                                        }}
                                    >
                                        <span className={styles.sign_up}>
                                            LOGIN
                                        </span>
                                    </li>
                                </ul>
                            )}
                        </div>
                    )}
                    {router.asPath.includes("ht_access") ? (
                        <div>
                            <button
                                type="button"
                                style={{
                                    background: "#C73131",
                                    outline: "none",
                                    border: "none",
                                    color: "#fff",
                                    padding: "5px 10px",
                                    cursor: "pointer",
                                    borderRadius: "5px",
                                }}
                                onClick={() => {
                                    window.location.href =
                                        "https://htschool.hindustantimes.com/";
                                }}
                            >
                                Back To HT
                            </button>
                        </div>
                    ) : router.asPath.includes("financepeer_access") ? (
                        <div>
                            <button
                                type="button"
                                style={{
                                    background: "#C73131",
                                    outline: "none",
                                    border: "none",
                                    color: "#fff",
                                    padding: "5px 10px",
                                    cursor: "pointer",
                                    borderRadius: "5px",
                                }}
                                onClick={() => {
                                    window.location.href =
                                        "https://www.financepeer.com/edinfinity?utm_source=celeb_school&utm_medium=web&utm_campaign=partner_cs";
                                }}
                            >
                                Back To Financepeer
                            </button>
                        </div>
                    ) : router.asPath.includes("mesc") ? (
                        <div>
                            <button
                                type="button"
                                style={{
                                    background: "#C73131",
                                    outline: "none",
                                    border: "none",
                                    color: "#fff",
                                    padding: "5px 10px",
                                    cursor: "pointer",
                                    borderRadius: "5px",
                                }}
                                onClick={() => {
                                    window.location.href =
                                        "https://creativewarriors.co.in/";
                                }}
                            >
                                Back To CreativeWarriors
                            </button>
                        </div>
                    ) : (
                        <></>
                    )}
                    {router.pathname.includes("ht_access") ||
                    router.pathname.includes("financepeer_access") ||
                    router.pathname.includes("mesc") ||
                    router.pathname.includes("skillathon_jitogurukul") ? (
                        <></>
                    ) : (
                        <button
                            id="navbar-hamburger-menu"
                            className={`${styles.hamburger} ${
                                isActive ? styles.hamburger_active : ""
                            }`}
                            type="button"
                            onClick={() => {
                                setIsActive(!isActive);
                            }}
                            style={{
                                right: window.location.href.includes("/hitachi")
                                    ? "99%"
                                    : "0px",
                            }}
                        >
                            <div className={styles.line1} />
                            <div className={styles.line2} />
                            <div className={styles.line3} />
                        </button>
                    )}
                </div>
                {window.location.href.includes("/hitachi") ? (
                    <div
                        className={styles.hitachi_logos_container}
                        style={{
                            position: "absolute",
                            top: "-4px",
                            right: "calc(2% + 5px)",
                            zIndex: 50,
                            // background: "red",
                            // height: "100px",
                            width: "15%",
                            minWidth: "120px",
                        }}
                    >
                        <div
                            style={{}}
                            className={styles.hitachi_inspire_the_next}
                        >
                            <img
                                src="/static/images/clients/hitachi_logo.png"
                                alt=""
                                style={{
                                    width: "100%",
                                    // width: "210px",
                                    // maxWidth: "180px",
                                    marginLeft: "10px",
                                    marginRight: "0px !important",
                                }}
                            />
                        </div>
                        <div
                            style={{
                                position: "absolute",
                                // top: "45px",
                                top: "40%",
                            }}
                            className={styles.hitachi_systems_pvt_ltd}
                        >
                            <img
                                src="/static/images/clients/hitachi_logo_footer_2.png"
                                alt=""
                                style={{
                                    width: "100%",
                                    // maxWidth: "210px",
                                    marginLeft: "10px",
                                    marginRight: "0px !important",
                                }}
                            />
                        </div>
                    </div>
                ) : (
                    <></>
                )}
            </nav>
        </>
    );
};

export default Navbar;