import { type FC } from 'react';
import LogoImage from '@/assets/images/logo.svg';
import {
  DocumentText,
  Element3,
  ElementEqual,
  Home2,
  Logout,
  Messages3,
  MessageText,
  NotificationStatus,
  People,
  Printer,
  Receipt21,
  MoneyRecive,
  ShieldSecurity,
  Teacher,
  User,
} from 'iconsax-react';
import SideBarItem from './SidebarItem';
import { useLocation } from 'react-router-dom';
import { Paths } from '../config/Paths';
import { useSharedStore } from './store/useSharedStore';
import { clx } from '../helpers/utils';
import { t } from '../locale';
import { useGetDashboardCounts } from '@/pages/dashboard/hooks/useDashboardData';

const SideBar: FC = () => {

  const { openSidebar, setOpenSidebar } = useSharedStore();
  const location = useLocation();
  const { data: dashboardCounts } = useGetDashboardCounts();
  const counts = dashboardCounts?.data;

  const isActive = (name: string) => {
    return location.pathname.includes(name);
  };

  const iconSizeSideBar = 20;

  return (
    <>
      {openSidebar && (
        <div
          className="fixed top-0 left-0 right-0 bottom-0 bg-black bg-opacity-50 z-10"
          onClick={() => setOpenSidebar(false)}
        />
      )}
      <div
        className={clx(
          'fixed xl:flex translate-x-[400px] xl:translate-x-0 transition-all ease-in-out opacity-0 invisible xl:visible xl:opacity-100  xl:right-4 right-0 xl:top-4 top-0 xl:bottom-4 bottom-0 xl:rounded-[32px] w-[240px] bg-white flex-col py-12',
          openSidebar && 'opacity-100 visible -translate-x-[0px] block z-40'
        )}
      >
        <div className="px-6">
          <div className="flex border-b-2 border-[#F5F7FC] pb-10">
            <img src={LogoImage} className="w-[120px]" />
          </div>
        </div>

        <div className="flex-1 h-full overflow-y-auto no-scrollbar px-6">
          <div className="mt-10 text-description px-6 text-header text-sm font-bold">{t('sidebar.menu')}</div>

          <div className="mt-3">
            <SideBarItem
              icon={<Home2 size={iconSizeSideBar} color="#4F5260" />}
              title={t('sidebar.mainPage')}
              isActive={isActive('/home')}
              link={Paths.home}
              activeName=''
            />

            <SideBarItem
              icon={<Element3 size={iconSizeSideBar} color="#4F5260" />}
              title={'سفارشات'}
              isActive={isActive('order')}
              link={Paths.order.list}
              activeName={['view_orders', 'view_assigned_orders']}
              badge={counts?.ordersCount}
            />

            <SideBarItem
              icon={<Receipt21 size={iconSizeSideBar} color="#4F5260" />}
              title={'پیش فاکتور'}
              isActive={isActive('/invoice')}
              link={Paths.perfomaInvoice.list}
              activeName='view_invoices'
              badge={counts?.invoicesCount}
            />
            
            <SideBarItem
              icon={<MessageText size={iconSizeSideBar} color="#4F5260" />}
              title={'درخواست ها'}
              isActive={isActive('requests')}
              link={Paths.requests.list}
              activeName='view_requests'
              badge={counts?.requestsCount}
            />

            <SideBarItem
              icon={<MoneyRecive size={iconSizeSideBar} color="#4F5260" />}
              title={'پرداخت‌ها'}
              isActive={isActive('/payments')}
              link={Paths.payments.list}
              activeName='manage_payments'
              badge={counts?.paymentsCount}
            />





            <SideBarItem
              icon={<People size={iconSizeSideBar} color="#4F5260" />}
              title={'مشتریان'}
              isActive={isActive('users')}
              link={Paths.users.list}
              activeName='view_users'
            />

            <SideBarItem
              icon={<Printer size={iconSizeSideBar} color="#4F5260" />}
              title={'فرم ساز'}
              isActive={isActive('print')}
              link={Paths.print.list}
              activeName='view_print_form'
            />

            <SideBarItem
              icon={<User size={iconSizeSideBar} color="#4F5260" />}
              title={'ادمین'}
              isActive={isActive('admin')}
              link={Paths.admin.list}
              activeName='manage_admins'
            />

            <SideBarItem
              icon={<ShieldSecurity size={iconSizeSideBar} color="#4F5260" />}
              title={'نقش‌ها'}
              isActive={isActive('role')}
              link={Paths.role.list}
              activeName='manage_roles'
            />

            <SideBarItem
              icon={<ElementEqual size={iconSizeSideBar} color="#4F5260" />}
              title={'محصولات'}
              isActive={isActive('product')}
              link={Paths.product.list}
              activeName='manage_products'
            />
          </div>

          <div className="mt-10 px-6 text-description text-sm font-bold">{t('sidebar.other')}</div>

          <div className="mt-3">

            <SideBarItem
              icon={<Messages3 size={iconSizeSideBar} color="#4F5260" />}
              title={t('sidebar.tickets')}
              isActive={isActive('/tickets')}
              link={Paths.tickets.list}
              activeName='manage_tickets'
            />

            <SideBarItem
              icon={<NotificationStatus size={iconSizeSideBar} color="#4F5260" />}
              title={t('sidebar.announcement')}
              isActive={isActive('/announcement')}
              link={Paths.announcement.list}
              activeName='manage_announcements'
            />

            <SideBarItem
              icon={<DocumentText size={iconSizeSideBar} color="#4F5260" />}
              title={t('sidebar.criticisms')}
              isActive={isActive('/criticisms')}
              link={Paths.criticisms.list}
              activeName='manage_criticisms'
            />

            <SideBarItem
              icon={<Teacher size={iconSizeSideBar} color="#4F5260" />}
              title={t('sidebar.learning')}
              isActive={isActive('/learning')}
              link={Paths.learning.list}
              activeName='manage_learnings'
            />
          </div>

          <div className="flex-1 items-end mt-14 pb-8">
            <div className='text-xs text-[#8C90A3]'>
              <SideBarItem
                icon={<Logout variant={isActive('logout') ? 'Bold' : 'Outline'} color={isActive('logout') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
                title={t('sidebar.logout')}
                isActive={isActive('logout')}
                link={`#`}
                activeName=''
                isLogout
              />
            </div>
          </div>
        </div>
      </div>
    </>
  );
};

export default SideBar;