'use client'
/* 
  This is the header component.
  It contains the following components:
  - Header
*/
import SiteLogoImg from "@/public/images/logo.svg";
import { RootState } from "@/redux/slices";
import { commonActions } from "@/redux/slices/Common/commonSlice";
import { AppDispatch } from "@/redux/store";
import { HeaderFooterContent } from "@/src/types/StaticContent/headerfooter.content.type";
import { LRFFlowContent } from "@/src/types/StaticContent/lrfflow.content.type";
import { AUTH_COOKIES } from "@/src/utils/commonVariables";
import Routes from "@/src/utils/RouteConstants";
import { deleteCookie } from "cookies-next";
import Image from "next/image";
import Link from 'next/link';
import { usePathname, useRouter } from "next/navigation";
import { useEffect, useRef, useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import LRFPopUp from "../../CommonPopup/LRFPopUp";
import styles from "./Header.module.scss";
import { getEncryptedCookie, setEncryptedCookie } from "@/src/utils/commonFunctions";
import Popup from "../../Popup";
import { set } from "zod";

const Header = ({ LRFFlow, HeaderFooterContent, AuthToken }: { LRFFlow: LRFFlowContent, HeaderFooterContent: HeaderFooterContent, AuthToken: string }) => {

    const [isMenuOpen, setIsMenuOpen] = useState(false);
    const [isOpen, setIsOpen] = useState(false);
    const [isCookieOpen, setCookieIsOpen] = useState(false);
    const router = useRouter();

    const dispatch = useDispatch<AppDispatch>();
    // Get the isLoggedIn state from the Redux store
    const { isLoggedIn, LRFModalOpen, isBookingFlow } = useSelector((state: RootState) => state.common);

    // Define the ref for the dropdown
    const dropdownRef = useRef<HTMLDivElement | null>(null);
    // Define the pathname
    const pathname = usePathname();

    // Define the header menu items
    const HeaderMenuItems = [
        {
            label: HeaderFooterContent.FIND_A_HOME,
            href: Routes.FIND_A_HOME,
        },
        {
            label: HeaderFooterContent.LIST_A_HOME,
            href: Routes.LIST_A_HOME
        },
        {
            label: HeaderFooterContent.BLOG,
            href: Routes.BLOG
        },
        {
            label: HeaderFooterContent.CONTACT_US,
            href: Routes.CONTACT
        }
    ]

    /**
     * Toggle dropdown visibility
     */
    const toggleDropdown = () => {
        setIsOpen(!isOpen);
    };


    useEffect(() => {
        if (isMenuOpen) {
            document.body.classList.add("OverflowHidden");
        } else {
            document.body.classList.remove("OverflowHidden");
        }
    }, [isMenuOpen]);

    /**
     * Handle sign out
     */
    const handleSignOut = () => {
        dispatch(commonActions.setIsLoggedIn(false));
        deleteCookie(AUTH_COOKIES.USER_TOKEN)
        router.refresh();
    };
    useEffect(() => {
        const consent = getEncryptedCookie("cookie_consent");
        if (!consent) {
            setCookieIsOpen(true);
        }
    }, []);

    /**
     * Set cookie_consent to accepted and set cookieIsOpen to false
     * Used to accept the cookie consent
     */
    const handleAccept = () => {
        setEncryptedCookie("cookie_consent", "accepted");
        setCookieIsOpen(false);
    };

    /**
     * Set cookie_consent to declined and set cookieIsOpen to false
     * Used to decline the cookie consent
     */
    // const handleDecline = () => {
    //     setEncryptedCookie("cookie_consent", "declined");
    //     setCookieIsOpen(false);
    // };

    // Add class to header on scroll
    const [scrolled, setScrolled] = useState(false);

    useEffect(() => {
        const handleScroll = () => {
            if (window.scrollY > 25) {
                setScrolled(true);
            } else {
                setScrolled(false);
            }
        };

        window.addEventListener('scroll', handleScroll);
        return () => window.removeEventListener('scroll', handleScroll);
    }, []);

    useEffect(() => {
        if (window !== undefined) {
            window.scrollTo({ top: 0, behavior: 'instant' });
        }
        if (!pathname?.includes('/book/')) {
            dispatch(commonActions.isBookingFlow(false));
        }
    }, [pathname])

    return (
        <>
            <header className={`fixed w-full top-0 ${pathname?.includes(Routes.FIND_A_HOME) ? 'z-[20]' : 'z-[999]'}  lg:overflow-hidden bg-whiteColor lg:py-5 
                xxl:py-6 ${scrolled ? 'shadow-xs' : ''}`}>

                <div className={`container`}>
                    <div className={`${styles.HeaderWrapper} transition-all duration-200 ease-in-out h-[60px] lg:h-[30px] xxl:h-[40px]
                     ${pathname === Routes.HOME ? "after:hidden" : ""}`}>
                        <div className={`${styles.LogoWrap}`}>
                            <Link href={Routes.HOME} onClick={() => setIsMenuOpen(false)}>
                                <Image width={100} height={100} src={SiteLogoImg} alt="Logo" />
                            </Link>
                        </div>
                        <ul className={`${styles.PagelinksList} ${isMenuOpen ? `${styles.SidebarOpen}` : ""}`}>
                            {
                                HeaderMenuItems.map((item, index) => (
                                    <li key={index} onClick={() => setIsMenuOpen(false)}>
                                        <Link
                                            onClick={(e) => {
                                                if (isBookingFlow) {
                                                    e.preventDefault();
                                                    dispatch(commonActions.afterDraftedNavigation(item?.href))
                                                    dispatch(commonActions.draftedModal(true));
                                                }
                                            }}
                                            className={`${pathname.includes(item.href) ? `${styles.active}` : ""}`}
                                            href={isBookingFlow ? "#" : item.href}>
                                            {item.label}
                                        </Link>
                                    </li>
                                ))
                            }
                            {pathname.includes('/book/') ? (
                                ""
                            ) :
                                (
                                    (AuthToken || isLoggedIn) ?
                                        <>
                                            <li className={`${isMenuOpen ? `flex mt-4 max-w-[180px] w-full` : "hidden"}`} onClick={handleSignOut}>
                                                <button type="button" className="w-full SecondaryBorderedBtn after:hidden !text-secondaryColor !bg-white">
                                                    {HeaderFooterContent.LOGOUT}
                                                </button>
                                            </li>
                                        </>
                                        :
                                        <>
                                            <li className={`${isMenuOpen ? `flex mt-4 max-w-[180px] w-full` : "hidden"}`}>
                                                <Link href={Routes.GUEST_LOGIN} className="w-full SecondaryBorderedBtn after:hidden !text-secondaryColor !bg-white">
                                                    {HeaderFooterContent.LOGIN}
                                                </Link>
                                            </li>
                                            <li className={`${isMenuOpen ? `flex max-w-[180px] w-full` : "hidden"}`}>
                                                <Link href={Routes.GUEST_REGISTER} className="w-full PrimaryBtn after:hidden">
                                                    {HeaderFooterContent.REGISTER}
                                                </Link>
                                            </li>
                                        </>
                                )
                            }
                        </ul>
                        {false ? (
                            <div className={`flex gap-5 items-center`}>
                                <div className={`${styles.userDropdownWrapper} relative`} ref={dropdownRef}>
                                    <div className={`${styles.userImage} rounded-full overflow-hidden cursor-pointer`} onClick={toggleDropdown}>
                                        {/* <Image src={sessionData?.user?.profilePicture || UserAvtarImage} alt="UserAvtarImage" className={`w-full h-full object-cover`} /> */}
                                    </div>
                                    <div className={`${styles.userDropdownContent} absolute right-0 top-full rounded-lg overflow-hidden ${isOpen ? styles.active : ""}`}>
                                        <div className={`${styles.dropdownItem} ${styles.userDetails} flex items-center justify-start gap-3`}>
                                            <div className={`${styles.userimgbox} rounded-full overflow-hidden`}>
                                                {/* <Image src={sessionData?.user?.profilePicture || UserAvtarImage} alt="UserAvtarImage" className={`w-full !h-full object-cover`} /> */}
                                            </div>
                                            <div className={styles.userContent}>
                                                <h2 className={`fs-16 capitalize !mb-0 font-semibold ${styles.title}`}>{' '} {' '} </h2>
                                            </div>
                                        </div>
                                        <div className={`${styles.dropdownItem} ${styles.userDetails} ${styles.logoutBtn} w-full flex items-center gap-x-2 !border-0 hover:bg-whiteEC transition-all duration-300 ease-in-out`}>
                                            <i className={`icon IconLogout bg-grey475Color w-[20px] h-[20px]`}></i>
                                            <button onClick={handleSignOut} className={`fs-14 text-grey475Color font-medium w-full flex items-center gap-x-2`}><i className='icon icon-logout'></i>{HeaderFooterContent.LOGOUT}</button>
                                        </div>
                                    </div>
                                </div>
                                <span
                                    onClick={() => setIsMenuOpen(!isMenuOpen)}
                                    className={`${styles.MenuIcon} ${isMenuOpen ? `${styles.Open}` : ""}`}
                                >
                                    <span></span>
                                    <span></span>
                                    <span></span>
                                </span>
                            </div>

                        ) : (
                            pathname.includes('/book/') ? (
                                <>
                                    <span
                                        onClick={() => setIsMenuOpen(!isMenuOpen)}
                                        className={`${styles.MenuIcon} ${isMenuOpen ? `${styles.Open}` : ""}`}
                                    >
                                        <span></span>
                                        <span></span>
                                        <span></span>
                                    </span>
                                    <span className="hidden lg:block"></span>
                                </>
                            )
                                :
                                <div className={`flex gap-5 items-center`}>
                                    <div className={`${styles.HeaderButtonWrap}`}>
                                        {(AuthToken || isLoggedIn) ?
                                            <button type="button" className="SecondaryBorderedBtn hover:!underline" onClick={handleSignOut}>
                                                {HeaderFooterContent.LOGOUT}
                                            </button>
                                            :
                                            <>
                                                <Link href={Routes.GUEST_LOGIN} className="SecondaryBorderedBtn hover:!underline">
                                                    {HeaderFooterContent.LOGIN}
                                                </Link>
                                                <Link href={Routes.GUEST_REGISTER} className="PrimaryBtn hover:!underline">
                                                    {HeaderFooterContent.REGISTER}
                                                </Link>
                                            </>
                                        }
                                    </div>
                                    <span
                                        onClick={() => setIsMenuOpen(!isMenuOpen)}
                                        className={`${styles.MenuIcon} ${isMenuOpen ? `${styles.Open}` : ""}`}
                                    >
                                        <span></span>
                                        <span></span>
                                        <span></span>
                                    </span>
                                </div>

                        )}
                        {/* <span
                            onClick={() => setIsMenuOpen(!isMenuOpen)}
                            className={`${styles.MenuIcon} ${isMenuOpen ? `${styles.Open}` : ""}`}
                        >
                            <span></span>
                            <span></span>
                            <span></span>
                        </span> */}
                    </div>
                </div>
            </header >

            {LRFModalOpen && (
                <LRFPopUp CreateProfileContent={LRFFlow} />
            )}
            {isCookieOpen ? <>
                <div className="fixed bottom-0 left-0 right-0 z-[99] commonPopup ">
                    <div className="bg-[#006C6D] text-white px-6 py-4 flex flex-col md:flex-row md:items-center md:justify-between gap-4">

                        <div className="flex items-center gap-4">
                            {/* <div className="w-[100px] ">
                            <Image width={100} height={100} src={SiteLogoImg} alt="Logo" />
                        </div> */}
                            {/* Text Section */}
                            <div>
                                <h3 className="font-bold text-lg md:text-xl mb-1">{HeaderFooterContent.COOKIE_PREFERENCES}</h3>
                                <p className="text-sm md:text-base">
                                    {HeaderFooterContent.COOKIE_PREFERENCES_DESC}
                                </p>
                            </div></div>


                        {/* Buttons */}
                        <div className="flex gap-3 justify-end">
                            {/* <button
                            onClick={handleDecline}
                            className="bg-transparent border border-white text-white px-4 py-2 rounded-md text-sm hover:bg-white hover:text-[#006C6D] transition"
                        >
                            Decline
                        </button> */}
                            <button
                                onClick={handleAccept}
                                className="secondaryBtn"
                            >
                                {HeaderFooterContent.ACCEPT}
                            </button>
                        </div>
                    </div>
                </div>
            </> : <></>}


        </>
    );
};

export default Header;