'use client';
import { useEffect, useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import Link from 'next/link';
import { IRootState } from '@/store';
import { toggleRTL, toggleSidebar } from '@/store/themeConfigSlice';
import IconMenu from '@/components/icon/icon-menu';

import { signOut, useSession } from 'next-auth/react';
import { getTranslation } from '../../../i18n';
import Dropdown from '../dropdown';
import { usePathname, useRouter } from 'next/navigation';
import { BASE_URL } from '@/services/api';
import IconUser from '../icon/icon-user';
const Header = () => {
    const pathname = usePathname();
    const dispatch = useDispatch();
    const { t, i18n } = getTranslation();
    const session = useSession();

    const router = useRouter();
    useEffect(() => {
        const selector = document.querySelector('ul.horizontal-menu a[href="' + window.location.pathname + '"]');
        if (selector) {
            const all: any = document.querySelectorAll('ul.horizontal-menu .nav-link.active');
            for (let i = 0; i < all.length; i++) {
                all[0]?.classList.remove('active');
            }

            let allLinks = document.querySelectorAll('ul.horizontal-menu a.active');
            for (let i = 0; i < allLinks.length; i++) {
                const element = allLinks[i];
                element?.classList.remove('active');
            }
            selector?.classList.add('active');

            const ul: any = selector.closest('ul.sub-menu');
            if (ul) {
                let ele: any = ul.closest('li.menu').querySelectorAll('.nav-link');
                if (ele) {
                    ele = ele[0];
                    setTimeout(() => {
                        ele?.classList.add('active');
                    });
                }
            }
        }
    }, [pathname]);


    const isRtl = useSelector((state: IRootState) => state.themeConfig.rtlClass) === 'rtl';

    const themeConfig = useSelector((state: IRootState) => state.themeConfig);
    const setLocale = (flag: string) => {
        if (flag.toLowerCase() === 'ar') {
            dispatch(toggleRTL('rtl'));
        } else {
            dispatch(toggleRTL('ltr'));
        }
        router.refresh();
    };



    return (
        <header id='header' className={themeConfig.semidark && themeConfig.menu === 'horizontal' ? 'dark' : 'h-[114px] max-md:px-4 md:px-[74px] pt-8 pb-6 bg-white border-b border-zinc-300 '}>
            <div className='flex gap-4 items-center  justify-between'>
                <button
                    type="button"
                    className="collapse-icon flex flex-none rounded-full  md:w-[32px]  hover:text-primary ltr:ml-2 rtl:mr-2 dark:bg-dark/40 dark:text-[#d0d2d6] dark:hover:bg-dark/60 dark:hover:text-primary md:hidden"
                    onClick={() => dispatch(toggleSidebar())}
                >
                    <IconMenu className='w-[32px] h-[32px] text-[#000]' />
                </button>

                <img className="w-[80px] h-[80px] hidden md:block" src={'/assets/images/logo.svg'} />



                <div className="justify-start items-start flex w-full">
                    <div className="px-6 py-1.5 justify-start items-start flex">
                        <ul className="horizontal-menu hidden    py-1.5 px-6 font-semibold text-black rtl:space-x-reverse   lg:space-x-1.5 xl:space-x-8">
                            <ItemMenu to={'/'} label={t('home')} />
                            {
                                // (session.data?.user?.userInfo?.UserSubs?.length ?? 0) > 0 &&
                                <ItemMenu to={'/subscriptions'} label={t('subscriptions')} />
                            }                            <ItemMenu to={'/blog'} label={t('blog')} />
                            <ItemMenu to={'/aboutUs'} label={t('aboutUs')} />
                        </ul>
                    </div>
                </div>
                <div className="justify-end items-center gap-8 hidden w-full md:flex">

                    {
                        session.status != "authenticated" ?
                            <>
                                <Link href={'/signIn'}
                                    className="text-primary text-lg font-medium font-['Alexandria'] leading-[27px]"
                                >
                                    {t('signIn')}
                                </Link>
                                <Link href={'/subscribeNow'}
                                    className=' px-4 py-3 bg-primary rounded-[60px] justify-start items-start gap-2.5 inline-flex'
                                >

                                    <div className="text-white text-lg font-medium font-['Alexandria'] leading-[27px]">{t('subscribeNow')}</div>

                                </Link>
                            </>
                            :
                            <div className="dropdown shrink-0">
                                <Dropdown
                                    offset={[0, 8]}
                                    placement={`${isRtl ? 'bottom-start' : 'bottom-end'}`}
                                    btnClassName="block p-2 rounded-full   dark:bg-dark/40 hover:text-primary hover:bg-gray-100 dark:hover:bg-dark/60"
                                    button={
                                        <div className='flex gap-2 justify-center items-center'>

                                            <Avatar />

                                            <div className="text-black text-opacity-90 text-base font-normal font-['Alexandria'] leading-normal">
                                                {session.data?.user.userInfo.username}
                                            </div>
                                        </div>
                                    }
                                >
                                    <ul className="w-[230px] !py-0 font-semibold text-dark dark:text-white-dark dark:text-white-light/90">
                                        <li>
                                            <div className="flex items-center px-4 py-4">
                                                <Avatar />
                                                <div className="ltr:pl-4 rtl:pr-4 truncate">
                                                    <h4 className="text-base">
                                                        {session.data?.user.userInfo.username}
                                                        {/* <span className="rounded bg-success-light px-1 text-xs text-success p-1 ltr:ml-2 rtl:ml-2">{session.data?.user.userInfo.role} </span> */}
                                                    </h4>
                                                    <button type="button" className="text-black/60 hover:text-primary dark:text-dark-light/60 dark:hover:text-white">
                                                        {session.data?.user.userInfo.fullName}
                                                    </button>
                                                </div>
                                            </div>
                                        </li>
                                        <li>
                                            <Link href="/account" className="dark:hover:text-white">
                                                <IconUser className="h-4.5 w-4.5 shrink-0 ltr:mr-2 rtl:ml-2" />
                                                {t("edit-account")}
                                            </Link>
                                        </li>

                                        <li className="border-t border-white-light dark:border-white-light/10">
                                            <div className="mx-4 flex !py-3 text-danger hover:cursor-pointer" onClick={(handleSignout) => {

                                                signOut({
                                                    redirect: false,
                                                });
                                                router.push('/signIn')
                                            }}>
                                                <svg className="rotate-90 ltr:mr-2 rtl:ml-2" width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                    <path
                                                        opacity="0.5"
                                                        d="M17 9.00195C19.175 9.01406 20.3529 9.11051 21.1213 9.8789C22 10.7576 22 12.1718 22 15.0002V16.0002C22 18.8286 22 20.2429 21.1213 21.1215C20.2426 22.0002 18.8284 22.0002 16 22.0002H8C5.17157 22.0002 3.75736 22.0002 2.87868 21.1215C2 20.2429 2 18.8286 2 16.0002L2 15.0002C2 12.1718 2 10.7576 2.87868 9.87889C3.64706 9.11051 4.82497 9.01406 7 9.00195"
                                                        stroke="currentColor"
                                                        strokeWidth="1.5"
                                                        strokeLinecap="round"
                                                    />
                                                    <path d="M12 15L12 2M12 2L15 5.5M12 2L9 5.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
                                                </svg>
                                                <span>{t("SignOut")}</span>
                                            </div>
                                        </li>
                                    </ul>
                                </Dropdown>
                            </div>


                    }

                    {/* <div className="dropdown shrink-0">
                        <Dropdown
                            offset={[0, 8]}
                            placement={`${isRtl ? 'bottom-start' : 'bottom-end'}`}
                            btnClassName="block p-2 rounded-full bg-white-light/40 dark:bg-dark/40 hover:text-primary hover:bg-white-light/90 dark:hover:bg-dark/60"
                            button={i18n.language && <div className="h-5 w-5 rounded-full"  > {i18n.language.toUpperCase()}</div>}
                        >
                            <ul className="grid w-[280px] grid-cols-2 gap-2 !px-2 font-semibold text-dark dark:text-white-dark dark:text-white-light/90">
                                {themeConfig.languageList.map((item: any) => {
                                    return (
                                        <li key={item.code}>
                                            <button
                                                type="button"
                                                className={`flex w-full hover:text-primary ${i18n.language === item.code ? 'bg-primary/10 text-primary' : ''}`}
                                                onClick={() => {
                                                    i18n.changeLanguage(item.code);
                                                    setLocale(item.code);
                                                }}
                                            >
                                                <span className="ltr:ml-3 rtl:mr-3">{item.name}</span>
                                            </button>
                                        </li>
                                    );
                                })}
                            </ul>
                        </Dropdown>
                    </div> */}

                </div>
                <img className="w-[80px] h-[80px] hidden max-md:block" src={'/assets/images/logo.svg'} />

            </div>
        </header>
    );
};

export default Header;


export const ItemMenu = ({ to, label, icon }: { to: string, label: string, icon?: any }) => {
    return (
        <li className="menu nav-item relative">
            <Link href={to} className="nav-link">
                <div className="items-center flex gap-2">
                    {icon}
                    <span className=" text-opacity-90 text-base font-medium font-['Alexandria'] leading-normal">{label}</span>
                </div>
            </Link>
        </li>
    )
}



export const Avatar = () => {

    const [isError, setIsError] = useState(false)
    const session = useSession();

    return (
        !isError ? <img className='w-[52px] h-[52px] bg-white rounded-full border border-zinc-300  ' src={
            `${BASE_URL}users/${session.data?.user.userInfo.id}/${session.data?.user.userInfo.photo}`
        }
            onError={() => {
                setIsError(true)
            }}
        /> : <div className="w-[52px] h-[52px] bg-white rounded-[59px] border border-zinc-300 justify-center items-center gap-8 inline-flex">
            <div className="w-7 h-7 relative">
                <div className="w-[9.33px] h-[9.33px] left-[9.33px] top-[2.33px] absolute bg-black bg-opacity-90 rounded-full" />
                <div className="w-[16.33px] h-[9.33px] left-[5.83px] top-[15.17px] absolute bg-black bg-opacity-90 rounded-full" />
            </div>
        </div>
    )
}