'use client';
import PerfectScrollbar from 'react-perfect-scrollbar';
import { useDispatch, useSelector } from 'react-redux';
import Link from 'next/link';
import { toggleSidebar } from '@/store/themeConfigSlice';
import AnimateHeight from 'react-animate-height';
import { IRootState } from '@/store';
import { useState, useEffect } from 'react';
import IconCaretsDown from '@/components/icon/icon-carets-down';
import IconCaretDown from '@/components/icon/icon-caret-down';
import IconMinus from '@/components/icon/icon-minus';
import { usePathname } from 'next/navigation';
import { getTranslation } from '@/i18n';
import IconDollarSignCircle from '../icon/icon-dollar-sign-circle';

const Sidebar = () => {
    const dispatch = useDispatch();
    const { t } = getTranslation();
    const pathname = usePathname();
    const [currentMenu, setCurrentMenu] = useState<string>('');
    const themeConfig = useSelector((state: IRootState) => state.themeConfig);
    const semidark = useSelector((state: IRootState) => state.themeConfig.semidark);

    const toggleMenu = (value: string) => {
        setCurrentMenu((oldValue) => (oldValue === value ? '' : value));
    };

    useEffect(() => {
        const selector = document.querySelector('.sidebar ul a[href="' + window.location.pathname + '"]');
        if (selector) {
            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.length) {
                    ele = ele[0];
                    setTimeout(() => {
                        ele.click();
                    });
                }
            }
        }
    }, [pathname]);

    useEffect(() => {
        setActiveRoute();
        if (window.innerWidth < 1024 && themeConfig.sidebar) {
            dispatch(toggleSidebar());
        }
    }, [pathname]);

    const setActiveRoute = () => {
        let allLinks = document.querySelectorAll('.sidebar ul a.active');
        for (let i = 0; i < allLinks.length; i++) {
            const element = allLinks[i];
            element?.classList.remove('active');
        }
        const selector = document.querySelector('.sidebar ul a[href="' + window.location.pathname + '"]');
        selector?.classList.add('active');
    };

    return (
        <div className={semidark ? 'dark' : ''}>
            <nav
                className={`sidebar fixed bottom-0 top-0 z-50 h-full min-h-screen w-[260px] shadow-[5px_0_25px_0_rgba(94,92,154,0.1)] transition-all duration-300 ${semidark ? 'text-white-dark' : ''}`}
            >
                <div className="h-full bg-white dark:bg-black">
                    <div className="flex items-center justify-between px-4 py-3">
                        <Link href="/" className="main-logo flex shrink-0 items-center">
                            <img className="ml-[5px] w-[164px] h-[40px] flex-none block dark:hidden" src="/assets/images/logo_dark.png" alt="logo" />
                            <img className="ml-[5px] w-[164px] h-[40px] flex-none hidden dark:block" src="/assets/images/logo_light.png" alt="logo" />
                            {/* <span className="align-middle text-2xl font-semibold ltr:ml-1.5 rtl:mr-1.5 dark:text-white-light lg:inline">VG Products</span> */}
                        </Link>
                        <button
                            type="button"
                            className="collapse-icon flex h-8 w-8 items-center rounded-full transition duration-300 hover:bg-gray-500/10 rtl:rotate-180 dark:text-white-light dark:hover:bg-dark-light/10"
                            onClick={() => dispatch(toggleSidebar())}
                        >
                            <IconCaretsDown className="m-auto rotate-90" />
                        </button>
                    </div>
                    <PerfectScrollbar className="relative h-[calc(100vh-80px)]">
                        <ul className="relative space-y-0.5 p-4 py-0 font-semibold">
                            {/* <li className="menu nav-item">
                <button
                  type="button"
                  className={`${currentMenu === 'dashboard' ? 'active' : ''} nav-link group w-full`}
                  onClick={() => toggleMenu('dashboard')}
                >
                  <div className="flex items-center">
                    <span className="shrink-0 group-hover:!text-primary">🏠</span>
                    <span className="text-black ltr:pl-3 rtl:pr-3 dark:text-[#506690] dark:group-hover:text-white-dark">{t('dashboard')}</span>
                  </div>
                  <div className={currentMenu !== 'dashboard' ? '-rotate-90 rtl:rotate-90' : ''}>
                    <IconCaretDown />
                  </div>
                </button>
                <AnimateHeight duration={300} height={currentMenu === 'dashboard' ? 'auto' : 0}> */}
                            <li className="nav-item">
                                <Link href="/" className="group nav-link">
                                    <div className="flex items-center">
                                        <span className="shrink-0 group-hover:!text-primary">🏠</span>
                                        <span className="text-black ltr:pl-3 rtl:pr-3 dark:text-[#506690] dark:group-hover:text-white-dark">{t('Dashboard')}</span>
                                    </div>
                                </Link>
                            </li>
                            {/* </AnimateHeight>
              </li> */}

                            <h2 className="-mx-4 mb-1 flex items-center bg-[#0f2444] px-7 py-3 font-extrabold uppercase dark:bg-dark dark:bg-opacity-[0.08]">
                                <IconMinus className="hidden h-5 w-4 flex-none" />
                                <span>{t('settings')}</span>
                            </h2>

                            <li className="nav-item">
                                <Link href="/user" className="group nav-link">
                                    <div className="flex items-center">
                                        <span className="shrink-0 group-hover:!text-primary">👤</span>
                                        <span className="text-black ltr:pl-3 rtl:pr-3 dark:text-[#506690] dark:group-hover:text-white-dark">{t('User')}</span>
                                    </div>
                                </Link>
                            </li>
                            {/* <li className="nav-item">
                <Link href="/ebay-settings" className="group nav-link">
                  <div className="flex items-center">
                    <span className="shrink-0 group-hover:!text-primary">🛒</span>
                    <span className="text-black ltr:pl-3 rtl:pr-3 dark:text-[#506690] dark:group-hover:text-white-dark">{t('ebay_settings')}</span>
                  </div>
                </Link>
              </li>
              <li className="nav-item">
                <Link href="/store-settings" className="group nav-link">
                  <div className="flex items-center">
                    <span className="shrink-0 group-hover:!text-primary">🛒</span>
                    <span className="text-black ltr:pl-3 rtl:pr-3 dark:text-[#506690] dark:group-hover:text-white-dark">{t('store_settings')}</span>
                  </div>
                </Link>
              </li> */}

                            {/* <h2 className="-mx-4 mb-1 flex items-center bg-[#00d1ff] px-7 py-3 font-extrabold uppercase dark:bg-dark dark:bg-opacity-[0.08]">
                <IconMinus className="hidden h-5 w-4 flex-none" />
                <span>{t('management')}</span>
              </h2>

              <li className="nav-item">
                <Link href="/manage-brands" className="group nav-link">
                  <div className="flex items-center">
                    <span className="shrink-0 group-hover:!text-primary">🏷️</span>
                    <span className="text-black ltr:pl-3 rtl:pr-3 dark:text-[#506690] dark:group-hover:text-white-dark">{t('manage_brands')}</span>
                  </div>
                </Link>
              </li>
              <li className="nav-item">
                <Link href="/manage-products" className="group nav-link">
                  <div className="flex items-center">
                    <span className="shrink-0 group-hover:!text-primary">📦</span>
                    <span className="text-black ltr:pl-3 rtl:pr-3 dark:text-[#506690] dark:group-hover:text-white-dark">{t('manage_products')}</span>
                  </div>
                </Link>
              </li>
              <li className="nav-item">
                <Link href="/manage-added-products" className="group nav-link">
                  <div className="flex items-center">
                    <span className="shrink-0 group-hover:!text-primary">📦</span>
                    <span className="text-black ltr:pl-3 rtl:pr-3 dark:text-[#506690] dark:group-hover:text-white-dark">{t('manage_added_products')}</span>
                  </div>
                </Link>
              </li> */}
                            {/* <h2 className="-mx-4 mb-1 flex items-center bg-[#00d1ff] px-7 py-3 font-extrabold uppercase dark:bg-dark dark:bg-opacity-[0.08]">
                <IconMinus className="hidden h-5 w-4 flex-none" />
                <span>{t('account')}</span>
              </h2>

              <li className="nav-item">
                <Link href="/account-setting" className="group nav-link">
                  <div className="flex items-center">
                    <span className="shrink-0 group-hover:!text-primary">👤</span>
                    <span className="text-black ltr:pl-3 rtl:pr-3 dark:text-[#506690] dark:group-hover:text-white-dark">{t('Account Settings')}</span>
                  </div>
                </Link>
              </li>
              <li className="nav-item">
                <Link href="/pricing" className="group nav-link">
                  <div className="flex items-center">
                    <IconDollarSignCircle  className="w-12 h-12 text-gray-600 group-hover:text-primary transition" />
                    <span className="text-black ltr:pl-3 rtl:pr-3 dark:text-[#506690] dark:group-hover:text-white-dark">{t('Pricing Plan')}</span>
                  </div>
                </Link>
              </li> */}
                        </ul>
                    </PerfectScrollbar>
                </div>
            </nav>
        </div>
    );
};

export default Sidebar;