import React from "react";

import Card from "@/components/ui/card/card";
import { Skeleton } from "@/components/ui/skeleton/skeleton";
import {
  Tabs,
  TabsContent,
  TabsList,
  TabsTrigger,
} from "@/components/ui/tabs/tabs";
import ContentHtmlSection from "@/components/widget/content/content-html-section";
import { useLocale } from "@/hooks/useLocale";
import { useAgreementQuery } from "@/services/eva-panel/agreement/agreement";

export default function Contract({ initialTab }: { initialTab: any }) {
  const agreement = useAgreementQuery();
  const agreementData = agreement?.data?.result.agreements;
  const { t } = useLocale();
  function getTabLabel(typeValue: number): string {
    switch (typeValue) {
      case 10:
        return t("Terms of use");
      case 11:
        return t("Privacy policy");
      case 12:
        return t("Information security policy");
      case 13:
        return t("KVKK disclosure text");
      case 1:
        return t("KVKK processing policy");
      case 14:
        return t("Cookie policy");
      default:
        return t("Terms of use");
    }
  }

  function getBodyByTypeValue(typeValue: number) {
    return (
      agreementData?.find((item) => item.typeValue === typeValue)?.body || null
    );
  }

  const tabValues = [10, 11, 12, 13, 1, 14];
  const defaultTabValue = initialTab || "10";
  const tabs = tabValues.map((typeValue) => ({
    value: typeValue.toString(),
    label: getTabLabel(typeValue),
    content: <ContentHtmlSection data={getBodyByTypeValue(typeValue)} />,
  }));

  if (!agreement.isSuccess || !agreement.data || !agreement.data.success) {
    return (
      <div>
        <Skeleton className="h-[800px]" />
      </div>
    );
  }

  return (
    <Card className="w-full">
      <h1 className="mb-5 text-2xl font-semibold text-gray-800">
        {t("Contracts")}
      </h1>
      <Tabs defaultValue={defaultTabValue}>
        <TabsList className="overflow-auto md:overflow-hidden">
          {tabs.map((tab) => (
            <TabsTrigger
              className="whitespace-nowrap px-2 text-xs text-gray-700"
              key={tab.value}
              value={tab.value}
            >
              {tab.label}
            </TabsTrigger>
          ))}
        </TabsList>
        {tabs.map((tab) => (
          <TabsContent key={tab.value} value={tab.value}>
            {tab.content}
          </TabsContent>
        ))}
      </Tabs>
    </Card>
  );
}