"use client";

import React from "react";
import AppSidebar from "@/components/ui/sidebar";
import {
  InfoCircleOutlined,
  UserOutlined,
  TeamOutlined,
  GiftOutlined,
  AppstoreOutlined,
  SettingOutlined,
} from "@ant-design/icons";
import { useRouter } from "next/navigation";
import { useParams, usePathname } from "next/navigation";
import {useBreakpoint} from "@/hooks/useBreakpoint";
import {useTranslations} from "next-intl";

const SidebarApp: React.FC = () => {
  const params = useParams();
  const t = useTranslations("AppPage");
  const pathname = usePathname();
  const router = useRouter();

  const appId = params.id;
  const locale = pathname.split("/")[1];
  const { isTablet } = useBreakpoint();

  const menuItems = [
    {
      key: "app-info",
      label: t("information.title"),
      icon: <InfoCircleOutlined />,
      onClick: () => {
        router.push(`/${locale}/admin/app/${appId}/information`);
      },
    },
    {
      key: "app-settings",
      label:t("settings.title"),
      icon: <SettingOutlined />,
      onClick: () => {
        router.push(`/${locale}/admin/app/${appId}/settings`);
      },
    },
    {
      key: "app-member",
      label: t("member.title"),
      icon: <UserOutlined />,
      onClick: () => {
        router.push(`/${locale}/admin/app/${appId}/member`);
      },
    },
    {
      key: "app-customer",
      label: t("customer.title"),
      icon: <TeamOutlined />,
      onClick: () => {
        router.push(`/${locale}/admin/app/${appId}/customer`);
      },
    },
    {
      key: "app-coupon",
      label: t("coupon.title"),
      icon: <GiftOutlined />,
      onClick: () => {
        router.push(`/${locale}/admin/app/${appId}/coupon`);
      },
    },
    // {
    //   key: "app-subscription-plan",
    //   label: t("subscription.title"),
    //   icon: <AppstoreOutlined />,
    //   onClick: () => {
    //     router.push(`/${locale}/admin/app/${appId}/subscription-plan`);
    //   },
    // },
  ];

  return (
    <AppSidebar
      showTitle={false}
      menuItems={menuItems}
      backgroundColor="#f5f5f5"
      collapsed={isTablet}
    />
  );
};

export default SidebarApp;