"use client";

import LangLink from "@/components/ui/localization/LangLink";
import TranslateClient from "@/components/ui/localization/TranslateClient";
import MainButton from "@/components/ui/MainButton";
import Header from "@/components/views/header/Header";
import ChangePasswordForm from "@/components/views/profile/ChangePasswordForm";
import OrderHistory from "@/components/views/profile/OrderHistory";
import ProfileInformationForm from "@/components/views/profile/ProfileInformationForm";
import useCurrentLanguage from "@/hooks/useCurrentLanguage";
import { images } from "@/lib/images";

const Page = ({ params: { tap } }: { params: { tap: string } }) => {
  const { lang, locale } = useCurrentLanguage();
  // const { data: product, isLoading } = useGetQuery<Product>({
  //     endpoint: `api/Product_web/${id}`,
  //     queryKey: ["products", id],
  //     select(data) {
  //         return data.data
  //     },
  // })

  // const crumb = [
  //     { path: `/${lang}`, label: locale.home },
  //     { path: `/${lang}/products`, label: locale.products },
  //     { path: `/${lang}`, label: product?.category?.title?.[lang] },
  //     { path: `/${lang}`, label: product?.subcategory?.title?.[lang] },
  // ]

  const crumb = [
    {
      path: `/${lang}`,
      label: locale.home,
    },
    {
      path: `/${lang}/profile/${tap}`,
      label: locale.profile_page,
    },
  ];

  return (
    <>
      <Header crumb={crumb} image={images?.header} title="profile_page" />
      <div className="container sm:flex items-center justify-center mt-10 gap-x-4 pt-10">
        <LangLink href="profile/settings" className="flex sm:inline">
          <MainButton
            className="capitalize w-full max-w-xs mx-auto sm:mx-0 sm:max-w-full mb-4 sm:mb-0"
            intent={tap === "settings" ? "primary" : "outline"}
          >
            <TranslateClient text="profile_settings" />
          </MainButton>
        </LangLink>
        <LangLink href="profile/change_password" className="flex sm:inline">
          <MainButton
            className="capitalize w-full max-w-xs mx-auto sm:mx-0 sm:max-w-full mb-4 sm:mb-0"
            intent={tap === "change_password" ? "primary" : "outline"}
          >
            <TranslateClient text="change_password" />
          </MainButton>
        </LangLink>
        <LangLink href="profile/order_history" className="flex sm:inline">
          <MainButton
            className="capitalize w-full max-w-xs mx-auto sm:mx-0 sm:max-w-full mb-4 sm:mb-0"
            intent={tap === "order_history" ? "primary" : "outline"}
          >
            <TranslateClient text="order_history" />
          </MainButton>
        </LangLink>
      </div>

      {tap === "settings" ? (
        <ProfileInformationForm />
      ) : tap === "order_history" ? (
        <OrderHistory />
      ) : (
        <ChangePasswordForm />
      )}
    </>
  );
};

export default Page;