import useSettings from "@/Hooks/useSettings";
import { cn } from "@/utils/functions";
import {
  AppstoreOutlined,
  CodeSandboxOutlined,
  FileDoneOutlined,
  FileOutlined,
  FileProtectOutlined,
  FileSyncOutlined,
  HomeOutlined,
  ImportOutlined,
  MinusSquareOutlined,
  OrderedListOutlined,
  PlusSquareOutlined,
  SettingOutlined,
  ShoppingCartOutlined,
  SolutionOutlined,
  TeamOutlined,
  UngroupOutlined,
  UnorderedListOutlined,
  UserOutlined,
  UserSwitchOutlined,
  UsergroupAddOutlined,
  WalletOutlined,
} from "@ant-design/icons";
import { useState } from "react";
import { BiSolidDiscount } from "react-icons/bi";
import { BsBuildingFillGear } from "react-icons/bs";
import { FaBusinessTime, FaStore } from "react-icons/fa";
import { GiTicket } from "react-icons/gi";
import { HiOutlineBuildingOffice2 } from "react-icons/hi2";
import { IoIosArrowBack, IoIosArrowForward } from "react-icons/io";
import { IoDocumentTextOutline } from "react-icons/io5";
import {
  MdAcUnit,
  MdOutlineAttachMoney,
  MdOutlineColorLens,
  MdOutlineEditAttributes,
  MdOutlinePermMedia,
} from "react-icons/md";
import { TbShoppingCartCog } from "react-icons/tb";
import { useSelector } from "react-redux";
import { NavLink } from "react-router-dom";
import Menu from "../../UI/Menu";
import usePermissions from "../../utils/usePermissions";
import SideNavLoader from "./SideNavLoader";

const SideNav = ({ collapsed, setCollapsed }) => {
  const { permissions } = usePermissions();
  const [isSetting, setIsSetting] = useState(false);
  const { loading } = useSelector((state) => state.auth);
  const { isSaleCommission, isPos } = useSettings([
    "isSaleCommission",
    "isPos",
  ]);
  const { data } = useSelector((state) => state?.setting) || {};

  const menu = [
    Array.isArray(permissions) &&
      permissions.length > 0 && {
        label: (
          <NavLink to="/admin/dashboard">
            <span>DASHBOARD</span>
          </NavLink>
        ),
        key: "dashboard",
        icon: <HomeOutlined />,
      },

    {
      label: "INVENTORY",
      key: "inventory",
      permit: {
        permissions: [
          "create-product",
          "readAll-product",
          "create-stockTransfer",
          "readAll-stockTransfer",
          "create-manufacturer",
          "readAll-manufacturer",
          "create-productCategory",
          "readAll-productCategory",
          "readAll-stock",
        ],
        operator: "or",
      },
      icon: <CodeSandboxOutlined />,
      children: [
        {
          permit: {
            permissions: [
              "create-product",
              "readAll-product",
              "readSingle-product",
              "update-product",
              "delete-product",
            ],
            operator: "or",
          },
          label: (
            <NavLink to="/admin/product">
              <span>Product</span>
            </NavLink>
          ),
          key: "products",
          icon: <UnorderedListOutlined />,
        },
        {
          permit: {
            permissions: ["create-product", "readAll-product"],
            operator: "or",
          },
          label: (
            <NavLink to="/admin/product-sort-list">
              <span>Shortage Products</span>
            </NavLink>
          ),
          key: "productSortList",
          icon: <OrderedListOutlined />,
        },
        {
          permit: {
            permissions: ["readAll-stock", "readSingle-stock"],
            operator: "or",
          },
          label: (
            <NavLink to="/admin/damage-product">
              <span>Damage Products</span>
            </NavLink>
          ),
          key: "damage-product",
          icon: <OrderedListOutlined />,
        },
        {
          permit: {
            permissions: [
              "create-stockTransfer",
              "readAll-stockTransfer",
              "readSingle-stockTransfer",
              "update-stockTransfer",
              "delete-stockTransfer",
            ],
            operator: "or",
          },
          label: (
            <NavLink to="/admin/stock-transfer">
              <span>Stock Transfer</span>
            </NavLink>
          ),
          key: "stock-transfer",
          icon: <OrderedListOutlined />,
        },
        {
          permit: {
            permissions: [
              "create-manufacturer",
              "readAll-manufacturer",
              "readSingle-manufacturer",
              "update-manufacturer",
              "delete-manufacturer",
            ],
            operator: "or",
          },
          label: (
            <NavLink to="/admin/manufacturer">
              <span>Manufacturer</span>
            </NavLink>
          ),
          key: "manufacturer",
          icon: <OrderedListOutlined />,
        },
      ],
    },

    {
      label: "PURCHASE",
      permit: {
        permissions: [
          "create-purchaseInvoice",
          "readAll-purchaseInvoice",
          "create-supplier",
          "readAll-supplier",
          "create-returnPurchaseInvoice",
          "readAll-returnPurchaseInvoice",
          "create-purchaseReorderInvoice",
          "readAll-purchaseReorderInvoice",
        ],
        operator: "or",
      },
      key: "PURCHASE",
      icon: <PlusSquareOutlined />,
      children: [
        {
          permit: {
            permissions: [
              "create-purchaseInvoice",
              "readAll-purchaseInvoice",
              "readSingle-purchaseInvoice",
              "update-purchaseInvoice",
              "delete-purchaseInvoice",
            ],
            operator: "or",
          },
          label: (
            <NavLink to="/admin/purchase">
              <span>Purchase Invoice</span>
            </NavLink>
          ),
          key: "purchases",
          icon: <UnorderedListOutlined />,
        },
        {
          permit: {
            permissions: [
              "create-supplier",
              "readAll-supplier",
              "readSingle-supplier",
              "update-supplier",
              "delete-supplier",
            ],
            operator: "or",
          },
          label: (
            <NavLink to="/admin/supplier">
              <span>Suppliers</span>
            </NavLink>
          ),
          key: "suppliers",
          icon: <UserOutlined />,
        },
        {
          permit: {
            permissions: [
              "create-returnPurchaseInvoice",
              "readAll-returnPurchaseInvoice",
              "readSingle-returnPurchaseInvoice",
              "update-returnPurchaseInvoice",
              "delete-returnPurchaseInvoice",
            ],
            operator: "or",
          },
          label: (
            <NavLink to="/admin/purchase-return-list">
              <span>Purchase Return List</span>
            </NavLink>
          ),
          key: "purchaseReturn",
          icon: <OrderedListOutlined />,
        },
        {
          permit: {
            permissions: [
              "create-purchaseReorderInvoice",
              "readAll-purchaseReorderInvoice",
              "readSingle-purchaseReorderInvoice",
              "update-purchaseReorderInvoice",
              "delete-purchaseReorderInvoice",
            ],
            operator: "or",
          },
          label: (
            <NavLink to="/admin/purchase-order">
              <span>Purchase Order </span>
            </NavLink>
          ),
          key: "purchaseOrder",
          icon: <OrderedListOutlined />,
        },
      ],
    },
    {
      label: "SALE",
      permit: {
        permissions: [
          "create-saleInvoice",
          "readAll-saleInvoice",
          "create-customer",
          "readAll-customer",
          "create-ReturnSaleInvoice",
          "readAll-ReturnSaleInvoice",
          "create-saleCommission",
          "readAll-saleCommission",
        ],
        operator: "or",
      },
      key: "SALE",
      icon: <MinusSquareOutlined />,
      children: [
        {
          permit: {
            permissions: [
              "create-saleInvoice",
              "readAll-saleInvoice",
              "readSingle-saleInvoice",
              "update-saleInvoice",
              "delete-saleInvoice",
            ],
            operator: "or",
          },
          label: (
            <NavLink to="/admin/sale">
              <span>Sale Invoice</span>
            </NavLink>
          ),
          key: "sells",
          icon: <UnorderedListOutlined />,
        },
        {
          permit: {
            permissions: [
              "create-customer",
              "readAll-customer",
              "readSingle-customer",
              "update-customer",
              "delete-customer",
            ],
            operator: "or",
          },
          label: (
            <NavLink to="/admin/customer">
              <span>Customers</span>
            </NavLink>
          ),
          key: "customers",
          icon: <UserOutlined />,
        },
        {
          permit: {
            permissions: [
              "create-returnSaleInvoice",
              "readAll-returnSaleInvoice",
              "readSingle-returnSaleInvoice",
              "update-returnSaleInvoice",
              "delete-returnSaleInvoice",
            ],
            operator: "or",
          },
          label: (
            <NavLink to="/admin/sale-return-list">
              <span>Sale Return List</span>
            </NavLink>
          ),
          key: "saleReturn",
          icon: <OrderedListOutlined />,
        },
        {
          permit: {
            permissions: [
              "create-saleCommission",
              "readAll-saleCommission",
              "readSingle-saleCommission",
              "update-saleCommission",
              "delete-saleCommission",
            ],
            operator: "or",
          },
          label: (
            <NavLink to="/admin/sales-commission">
              <span>Sales Commission </span>
            </NavLink>
          ),
          key: "SalesCommission",
          icon: <OrderedListOutlined />,
          hidden: isSaleCommission === "false",
        },

        // {
        //   label: (
        //     <NavLink to="/admin/quotation">
        //       <span>Quotation</span>
        //     </NavLink>
        //   ),
        //   permit: {
        //     permissions: ["create-quote", "readAll-quote"],
        //     operator: "or",
        //   },
        //   key: "QUOTATION",
        //   icon: <MdRequestQuote />,
        // },
      ],
    },

    {
      label: "ACCOUNTS",
      permit: {
        permissions: [
          "create-account",
          "readAll-account",
          "create-transaction",
          "readAll-transaction",
        ],
        operator: "or",
      },
      key: "accounts",
      icon: <WalletOutlined />,
      children: [
        {
          permit: {
            permissions: [
              "create-account",
              "readAll-account",
              "readSingle-account",
              "update-account",
              "delete-account",
            ],
            operator: "or",
          },
          label: (
            <NavLink to="/admin/account/">
              <span>Account</span>
            </NavLink>
          ),
          key: "accountList",
          icon: <UnorderedListOutlined />,
        },
        {
          permit: {
            permissions: [
              "create-transaction",
              "readAll-transaction",
              "readSingle-transaction",
              "update-transaction",
              "delete-transaction",
            ],
            operator: "or",
          },
          label: (
            <NavLink to="/admin/transaction/">
              <span>Transaction</span>
            </NavLink>
          ),
          key: "transactionList",
          icon: <UnorderedListOutlined />,
        },
        {
          permit: {
            permissions: ["readAll-account"],
            operator: "or",
          },
          label: (
            <NavLink to="/admin/account/trial-balance">
              <span>Trial Balance</span>
            </NavLink>
          ),
          key: "trialBalance",
          icon: <FileDoneOutlined />,
        },
        {
          permit: {
            permissions: ["readAll-account"],
            operator: "or",
          },
          label: (
            <NavLink to="/admin/account/balance-sheet">
              <span>Balance Sheet</span>
            </NavLink>
          ),
          key: "balanceSheet",
          icon: <FileOutlined />,
        },
        {
          permit: {
            permissions: ["readAll-account"],
            operator: "or",
          },
          label: (
            <NavLink to="/admin/account/income">
              <span>Income Statement</span>
            </NavLink>
          ),
          key: "incomeStatement",
          icon: <FileSyncOutlined />,
        },
      ],
    },
    {
      label: "REPORT",
      key: "report",
      permit: {
        permissions: [
          "create-product",
          "readAll-product",
          "create-purchaseInvoice",
          "readAll-purchaseInvoice",
          "create-saleInvoice",
          "readAll-saleInvoice",
          "create-supplier",
          "readAll-supplier",
          "create-customer",
          "readAll-customer",
          "create-adjust",
          "readAll-adjust",
        ],
        operator: "or",
      },
      icon: <IoDocumentTextOutline size={16} />,
      children: [
        {
          label: (
            <NavLink to="/admin/product-report">
              <span>Inventory Report</span>
            </NavLink>
          ),
          permit: {
            permissions: ["create-product", "readAll-product"],
            operator: "or",
          },
          key: "productReport",
          icon: <FileSyncOutlined />,
        },
        {
          label: (
            <NavLink to="/admin/purchase-report">
              <span>Purchase Report</span>
            </NavLink>
          ),
          permit: {
            permissions: ["create-purchaseInvoice", "readAll-purchaseInvoice"],
            operator: "or",
          },
          key: "purchaseReport",
          icon: <FileSyncOutlined />,
        },
        {
          label: (
            <NavLink to="/admin/sale-report">
              <span>Sale Report</span>
            </NavLink>
          ),
          permit: {
            permissions: ["create-saleInvoice", "readAll-saleInvoice"],
            operator: "or",
          },
          key: "saleReport",
          icon: <FileSyncOutlined />,
        },
        {
          label: (
            <NavLink to="/admin/supplier-report">
              <span>Supplier Report</span>
            </NavLink>
          ),
          permit: {
            permissions: ["create-supplier", "readAll-supplier"],
            operator: "or",
          },
          key: "supplierReport",
          icon: <FileSyncOutlined />,
        },
        {
          label: (
            <NavLink to="/admin/customer-report">
              <span>Customer Report</span>
            </NavLink>
          ),
          permit: {
            permissions: ["create-customer", "readAll-customer"],
            operator: "or",
          },
          key: "customerReport",
          icon: <FileSyncOutlined />,
        },

        {
          label: (
            <NavLink to="/admin/adjust-report">
              <span>Adjust Report</span>
            </NavLink>
          ),
          permit: {
            permissions: ["create-adjust", "readAll-adjust"],
            operator: "or",
          },
          key: "paymentReport",
          icon: <FileSyncOutlined />,
        },
      ],
    },

    {
      label: (
        <NavLink to="/admin/pos?collapsed=true">
          <span>POS</span>
        </NavLink>
      ),
      permit: {
        permissions: ["create-saleInvoice", "readAll-saleInvoice"],
        operator: "or",
      },
      key: "pos",
      icon: <ShoppingCartOutlined />,
      hidden: isPos === "false",
    },
    {
      label: (
        <NavLink to="/admin/media">
          <span>MEDIA</span>
        </NavLink>
      ),
      permit: {
        permissions: ["create-media", "readAll-media"],
        operator: "or",
      },
      key: "media",
      icon: <MdOutlinePermMedia />,
    },
    {
      label: (
        <NavLink to="/admin/store">
          <span>STORE</span>
        </NavLink>
      ),
      permit: {
        permissions: [
          "create-store",
          "readAll-store",
          "update-store",
          "delete-store",
        ],
        operator: "or",
      },
      key: "store",
      icon: <FaStore />,
    },
  ];

  const SettingMenu = [
    {
      label: (
        <NavLink to="/admin/company-settings">
          <span>Company settings</span>
        </NavLink>
      ),
      permit: {
        permissions: ["update-setting"],
        operator: "or",
      },
      key: "invoiceSetting",
      icon: <BsBuildingFillGear />,
    },
    {
      label: (
        <NavLink to="/admin/app-settings">
          <span>App settings</span>
        </NavLink>
      ),
      permit: {
        permissions: ["update-setting"],
        operator: "or",
      },
      key: "appSettings",
      icon: <MdOutlineColorLens />,
    },
    {
      label: "HR",
      permit: {
        permissions: [
          "create-user",
          "readAll-user",
          "create-role",
          "readAll-role",
          "create-designation",
          "readAll-designation",
          "create-department",
          "readAll-department",
          "create-shift",
          "readAll-shift",
          "create-employmentStatus",
          "readAll-employmentStatus",
        ],
        operator: "or",
      },
      key: "hr",
      icon: <TeamOutlined />,
      children: [
        {
          permit: {
            permissions: [
              "create-user",
              "readAll-user",
              "update-user",
              "delete-user",
              "delete-user",
            ],
            operator: "or",
          },
          label: (
            <NavLink to="/admin/hr/staffs">
              <span>Staffs</span>
            </NavLink>
          ),
          key: "staffs",
          icon: <UsergroupAddOutlined />,
        },
        {
          permit: {
            permissions: [
              "create-role",
              "readAll-role",
              "update-role",
              "delete-role",
              "delete-role",
            ],
            operator: "or",
          },
          label: (
            <NavLink to="/admin/role">
              <span>Role & Permissions</span>
            </NavLink>
          ),
          key: "roleAndPermissions",
          icon: <UserSwitchOutlined />,
        },
        {
          permit: {
            permissions: [
              "create-designation",
              "readAll-designation",
              "update-designation",
              "delete-designation",
              "delete-designation",
            ],
            operator: "or",
          },
          label: (
            <NavLink to="/admin/designation/">
              <span>Designation</span>
            </NavLink>
          ),
          key: "designation",
          icon: <SolutionOutlined />,
        },
        {
          permit: {
            permissions: [
              "create-department",
              "readAll-department",
              "update-department",
              "delete-department",
              "delete-department",
            ],
            operator: "or",
          },
          label: (
            <NavLink to="/admin/department/">
              <span>Department</span>
            </NavLink>
          ),
          key: "department",
          icon: <HiOutlineBuildingOffice2 />,
        },
        {
          permit: {
            permissions: [
              "create-shift",
              "readAll-shift",
              "update-shift",
              "delete-shift",
              "delete-shift",
            ],
            operator: "or",
          },
          label: (
            <NavLink to="/admin/shift/">
              <span>Shift</span>
            </NavLink>
          ),
          key: "shift",
          icon: <FaBusinessTime />,
        },
        {
          permit: {
            permissions: [
              "create-employmentStatus",
              "readAll-employmentStatus",
              "update-employmentStatus",
              "delete-employmentStatus",
              "delete-employmentStatus",
            ],
            operator: "or",
          },
          label: (
            <NavLink to="/admin/employment-status/">
              <span>Employment Status</span>
            </NavLink>
          ),
          key: "employmentStatus",
          icon: <FaBusinessTime />,
        },
      ],
    },
    {
      permit: {
        permissions: [
          "create-productCategory",
          "readAll-productCategory",
          "create-productSubCategory",
          "readAll-productSubCategory",
          "create-productBrand",
          "readAll-productBrand",
          "create-productAttribute",
          "readAll-productAttribute",
          "create-product",

          "create-uom",
          "readAll-uom",
          "create-manufacturer",
          "readAll-manufacturer",
          "create-wightUnit",
          "readAll-wightUnit",
          "create-dimensionUnit",
          "readAll-dimensionUnit",
          "create-adjust",
          "readAll-adjust",
          "create-pageSize",
          "readAll-pageSize",
        ],
        operator: "or",
      },
      label: "Inventory",
      key: "inventory",
      icon: <TbShoppingCartCog />,
      children: [
        {
          permit: {
            permissions: [
              "create-productCategory",
              "readAll-productCategory",
              "update-productCategory",
              "delete-productCategory",
              "delete-productCategory",
            ],
            operator: "or",
          },

          label: (
            <NavLink to="/admin/product-category">
              <span>Product Category</span>
            </NavLink>
          ),
          key: "productCategory",
          icon: <AppstoreOutlined />,
        },
        {
          label: (
            <NavLink to="/admin/product-subcategory">
              <span>Product Subcategory</span>
            </NavLink>
          ),
          permit: {
            permissions: [
              "create-productSubCategory",
              "readAll-productSubCategory",
              "readSingle-productSubCategory",
              "update-productSubCategory",
              "delete-productSubCategory",
            ],
            operator: "or",
          },
          key: "productSubcategory",
          icon: <UngroupOutlined />,
        },
        {
          label: (
            <NavLink to="/admin/product-brand">
              <span>Product Brand</span>
            </NavLink>
          ),
          permit: {
            permissions: [
              "create-productBrand",
              "readAll-productBrand",
              "readSingle-productBrand",
              "update-productBrand",
              "delete-productBrand",
            ],
            operator: "or",
          },
          key: "productBrand",
          icon: <FileProtectOutlined />,
        },

        {
          label: (
            <NavLink to="/admin/product-attribute">
              <span>Product Attribute</span>
            </NavLink>
          ),
          permit: {
            permissions: [
              "create-productAttribute",
              "readAll-productAttribute",
              "readSingle-productAttribute",
              "update-productAttribute",
              "delete-productAttribute",
            ],
            operator: "or",
          },
          key: "productAttribute",
          icon: <MdOutlineEditAttributes />,
        },
        {
          label: (
            <NavLink to="/admin/import-product">
              <span>Import Product </span>
            </NavLink>
          ),
          permit: {
            permissions: ["create-product"],
            operator: "or",
          },
          key: "import_csv",
          icon: <ImportOutlined />,
        },

        {
          label: (
            <NavLink to="/admin/uom">
              <span>UoM</span>
            </NavLink>
          ),
          permit: {
            permissions: [
              "create-uom",
              "readAll-uom",
              "readSingle-uom",
              "update-uom",
              "delete-uom",
            ],
            operator: "or",
          },
          key: "UoM",
          icon: <MdAcUnit />,
        },
        {
          label: (
            <NavLink to="/admin/manufacturer">
              <span>Manufacturer</span>
            </NavLink>
          ),
          permit: {
            permissions: [
              "create-manufacturer",
              "readAll-manufacturer",
              "readSingle-manufacturer",
              "update-manufacturer",
              "delete-manufacturer",
            ],
            operator: "or",
          },
          key: "manufacturer",
          icon: <OrderedListOutlined />,
        },
        {
          label: (
            <NavLink to="/admin/weight-unit">
              <span>Weight Unit</span>
            </NavLink>
          ),
          permit: {
            permissions: [
              "create-wightUnit",
              "readAll-wightUnit",
              "readSingle-wightUnit",
              "update-wightUnit",
              "delete-wightUnit",
            ],
            operator: "or",
          },
          key: "weightUnit",
          icon: <OrderedListOutlined />,
        },
        {
          label: (
            <NavLink to="/admin/dimension-unit">
              <span>Dimension Unit</span>
            </NavLink>
          ),
          permit: {
            permissions: [
              "create-dimensionUnit",
              "readAll-dimensionUnit",
              "readSingle-dimensionUnit",
              "update-dimensionUnit",
              "delete-dimensionUnit",
            ],
            operator: "or",
          },
          key: "dimensionUnit",
          icon: <OrderedListOutlined />,
        },
        {
          label: (
            <NavLink to="/admin/adjust-inventory">
              <span>Adjust Inventory</span>
            </NavLink>
          ),
          permit: {
            permissions: [
              "create-adjust",
              "readAll-adjust",
              "readSingle-adjust",
              "update-adjust",
              "delete-adjust",
            ],
            operator: "or",
          },
          key: "adjust-inventory",
          icon: <OrderedListOutlined />,
        },

        {
          label: (
            <NavLink to="/admin/print-page-setting">
              <span>Barcode page setting</span>
            </NavLink>
          ),
          permit: {
            permissions: [
              "create-pageSize",
              "readAll-pageSize",
              "readSingle-pageSize",
              "update-pageSize",
              "delete-pageSize",
            ],
            operator: "or",
          },
          key: "Barcode page setting",
        },
      ],
    },
    {permit: {
      permissions: [
        "create-coupon",
        "readAll-coupon",
        "create-discount",
        "readAll-discount",
        "create-currency",
        "readAll-currency",
        "create-vat",
        "readAll-vat",
      ],
      operator: "or",
    },
      
      label: "Others",
      key: "Others",
      icon: <SettingOutlined />,
      children: [
        {
          label: (
            <NavLink to="/admin/coupon">
              <span>Coupon</span>
            </NavLink>
          ),
          permit: {
            permissions: [
              "create-coupon",
              "readAll-coupon",
              "readSingle-coupon",
              "update-coupon",
              "delete-coupon",
            ],
            operator: "or",
          },
          key: "coupon",
          icon: <GiTicket />,
        },
        {
          label: (
            <NavLink to="/admin/discount">
              <span>Discount</span>
            </NavLink>
          ),
          permit: {
            permissions: [
              "create-discount",
              "readAll-discount",
              "readSingle-discount",
              "update-discount",
              "delete-discount",
            ],
            operator: "or",
          },
          key: "Discount",
          icon: <BiSolidDiscount />,
        },
        {
          label: (
            <NavLink to="/admin/currency">
              <span>Currency</span>
            </NavLink>
          ),
          permit: {
            permissions: [
              "create-currency",
              "readAll-currency",
              "readSingle-currency",
              "update-currency",
              "delete-currency",
            ],
            operator: "or",
          },
          key: "Currency",
          icon: <MdOutlineAttachMoney />,
        },
        {
          label: (
            <NavLink to="/admin/vat-tax">
              <span>VAT/TAX</span>
            </NavLink>
          ),
          permit: {
            permissions: [
              "create-vat",
              "readAll-vat",
              "readSingle-vat",
              "update-vat",
              "delete-vat",
            ],
            operator: "or",
          },
          key: "VAT/TAX",
          icon: <SettingOutlined />,
        },
      ],
    },
  ];

  return (
    <div className="overflow-y-auto no-scrollbar h-[calc(100vh)] pb-4 bg-white text-[15px]  text-gray-600 ">
      {loading ? (
        <SideNavLoader />
       
      ) : (
        <div className="relative">
          <div
            className={cn(
              `absolute w-full  transition-all duration-300 ${
                isSetting ? "left-[280px]" : "left-0"
              }`
            )}
          >
            <Menu
              items={menu}
              setCollapsed={setCollapsed}
              permissions={permissions}
              collapsed={collapsed}
            />
            {Array.isArray(permissions) && permissions.length > 0 && (
              <div
                className={cn(
                  "px-4 flex items-center justify-between font-Popins hover:bg-#f3f4f6 py-3 mx-3 cursor-pointer text-gray-600",
                  {
                    "flex items-center justify-center px-0 text-lg": collapsed,
                  }
                )}
                onClick={() => setIsSetting(true)}
              >
                <span className="flex items-center gap-1">
                  <SettingOutlined /> {!collapsed && "Settings"}
                </span>
                {!collapsed && <IoIosArrowForward />}
              </div>
            )}
          </div>

          <div
            className={cn(
              `absolute w-full text-gray-500  transition-all duration-300 ${
                isSetting ? "left-0" : "-left-[280px]"
              }`
            )}
          >
            <div
              className={cn(
                "px-4 flex items-center font-medium gap-1 font-Popins bg-#f3f4f6  py-3 cursor-pointer",
                {
                  "flex items-center justify-center text-lg": collapsed,
                }
              )}
              onClick={() => setIsSetting(false)}
            >
              <IoIosArrowBack /> {!collapsed && "Back to menu"}
            </div>
            <hr className=" border-gray-300" />
            <Menu
              items={SettingMenu}
              setCollapsed={setCollapsed}
              permissions={permissions}
              collapsed={collapsed}
            />
          </div>
        </div>
      )}
    </div>
  );
};

export default SideNav;
