import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
import TabContent from "./tab-content";
import { TLogItem } from "@/services/types/logs.type";
import { TLogAction } from "@/shared/types/home/logs";
import { FetchNextPageOptions } from "@tanstack/react-query";

type TActionTabsProps = {
  activeTab: string;
  setActiveTab: React.Dispatch<React.SetStateAction<string>>;
  logs: TLogItem[];
  isLoading: boolean;
  error: Error | null;
  hasNextPage?: boolean;
  isFetchingNextPage?: boolean;
  fetchNextPage?: (options?: FetchNextPageOptions) => Promise<any>;
};

const tabs: TTabsTriggerStyleProps[] = [
  {
    value: "all",
    name: "All",
  },
  {
    value: "delete",
    name: "Delete",
  },
  {
    value: "update",
    name: "Update",
  },
  {
    value: "create",
    name: "Create",
  },
];

const ActionTabs = ({
  activeTab,
  setActiveTab,
  logs,
  isLoading,
  error,
  hasNextPage,
  isFetchingNextPage,
  fetchNextPage
}: TActionTabsProps) => {
  const handleTabChange = (value: string) => {
    setActiveTab(value);
  };

  return (
    <>
      <Tabs
        value={activeTab}
        onValueChange={handleTabChange}
        className='w-full h-[calc(100vh_-_133px_-_95px_-15px_-_26px_-_150px)] flex flex-col'>
        <TabsList className='w-full bg-transparent p-0'>
          {tabs.map(({ value, name }: TTabsTriggerStyleProps) => {
            return (<TabsTriggerStyle
              key={value}
              value={value}
              name={name}
              notification={logs.length}
            />
            )
          })}
        </TabsList>
        <TabContent
          value={activeTab}
          logs={logs}
          status={activeTab as TLogAction}
          isLoading={isLoading}
          error={error}
          hasNextPage={hasNextPage}
          isFetchingNextPage={isFetchingNextPage}
          fetchNextPage={fetchNextPage}
        />
      </Tabs>
    </>
  );
};

type TTabsTriggerStyleProps = {
  value: TLogAction;
  name: string;
  notification?: number;
};

const TabsTriggerStyle = ({
  value,
  name,
  notification,
}: TTabsTriggerStyleProps) => {
  return (
    <TabsTrigger
      value={value}
      className='group pb-[11px] data-[state=active]:shadow-none data-[state=active]:bg-transparent data-[state=active]:text-main-color data-[state=active]:border-b-1 data-[state=active]:border-b-main-color rounded-none'>
      <span className='font-normal text-[18px] leading-[140%] text-center align-middle'>
        {name}
      </span>
      <span className='font-medium text-[16px] leading-[140%] text-center align-middle bg-[#F3F3F3] size-[25px] f-center p-1 rounded-[50%] group-data-[state=active]:bg-[#FFF0F5]'>
        {notification}
      </span>
    </TabsTrigger>
  );
};

export default ActionTabs;