import React from "react";
import {
  AddressIcon,
  OrdersIcon,
  OutlineDiscountIcon,
  WalletIcon,
  EditUserIcon,
  PointsIcon,
} from "@/assets/svgs/Icons";
import LocalePath from "@/components/UiComponents/LocalePath";
import AuthWrapper from "@/components/sharedComponents/AuthWrapper";
import { useTranslations } from "next-intl";
import AccountBtnsProvider from "@/components/sharedComponents/btns/AccountBtns";
import { ReturnsIcon, ShippingIcon, SubscriptionsIcon } from "@/assets/svgs/TraderIcons";
import WalletBalance from "./wallet/WalletBalance";




const SideNav = () => {
  const t = useTranslations();

  const NAV_ITEMS = [
    {
      items: [
        {
          href: "/account/addresses",
          icon: <AddressIcon />,
          text: "NAV.myAddresses",
        },
        {
          href: "/account/orders",
          icon: <OrdersIcon />,
          text: "NAV.orders",
          // authed_only: true,
        },
        // {
        //   href: "/account/points",
        //   icon: <PointsIcon />,
        //   text: "NAV.points",
        //   // authed_only: true,
        // },
        {
          href: "/account/returns",
          icon: <ReturnsIcon />,
          text: "NAV.returns",
          // authed_only: true,
        },
        {
          href: "/account/discount-coupons",
          icon: <OutlineDiscountIcon />,
          text: "NAV.discounts",
        },
        {
          href: "/account/wallet",
          icon: <WalletIcon className="size-6" />,
          text: "NAV.wallet",
          sub_title:<WalletBalance/>
        },
        // ...(user_data?.user_type == "vendor" ? [
          {
            href: "/account/subscriptions",
            icon: <SubscriptionsIcon />,
            text: "NAV.subscriptions",
            roles:["vendor"]
          },
          {
            href: "/account/shipping",
            icon: <ShippingIcon />,
            text: "NAV.shipping",
            roles:["vendor"]
          },
        // ] : []),
        {
          href: "/account/profile",
          icon: <EditUserIcon/>,
          text: "NAV.personalAccount",
          // authed_only: true,
        }
      ],
    }
  ];

  const renderListItemTemplate = (item: any, itemIndex: number) => (
    <li key={`profile_nav_item_${itemIndex}`}>
      <LocalePath className="flex items-center justify-between" href={item.href}>
        <div className="flex items-center gap-2">
          {item.icon && item.icon}
          <span>{t(item.text)}</span>
        </div>
        {item.sub_title && item.sub_title}
      </LocalePath>
    </li>
  );

  return (
    <>
    <div className="side">
      <aside>
        <div className="list">
          <ul>
            {NAV_ITEMS.map((section :any, index) => (
              <React.Fragment key={index}>
                {section?.label && <label>{section.label}</label>}
                {section.items.map((item: any, itemIndex:any) =>
                  item?.roles ? (
                    <AuthWrapper key={`side-nav_${itemIndex}`} allowedRoles={item?.roles}>
                      {renderListItemTemplate(item, itemIndex)}
                    </AuthWrapper>
                  ) : (
                    renderListItemTemplate(item, itemIndex)
                  )
                )}
              </React.Fragment>
            ))}
            <AccountBtnsProvider/>
          </ul>
        </div>
      </aside>
    </div>
    </>
  );
};

export default SideNav;