import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { listarMenusDisponiveis } from "@/requests/CRM/kanban";
import { useAuth } from "@/src/contexts/authContext";
import { useEffect, useState } from "react";

const TabsCard = ({
  activeTab,
  kanbanId,
  dadosCard,
  setActiveTab,
  handleModalAnexo,
  dadosFunil,
  renderTabContent,
  somenteLeitura = false,
}: any) => {
  const [menusDisponiveis, setMenusDisponiveis] = useState<any[]>([]);
  const { perfil } = useAuth();

  useEffect(() => {
    if (perfil) {
      listarMenusDisponiveis(perfil).then((res) => {
        const filtrado = res?.filter((aba: any) => {
          if (aba.status_aba_card === "0") return false;
          if (dadosFunil?.tipo_negocio_funil == 2) {
            if (["2", "8"].includes(aba.id_aba_card)) {
              return false;
            }
          }
          return true;
        });

        const renomeado = filtrado.map((aba: any) => {
          if (
            aba.nome_aba_card === "Dados Fatura" &&
            ["2", "3"].includes(dadosCard?.tipoNegocio_coleta)
          ) {
            return { ...aba, nome_aba_card: "Dados Técnicos" };
          }
          return aba;
        });

        setMenusDisponiveis(renomeado);
        return res;
      });
    }
  }, []);

  return (
    <Tabs
      value={
        menusDisponiveis.some((menu) => menu.id_aba_card === activeTab[0])
          ? activeTab[0]
          : menusDisponiveis[0]?.id_aba_card || "1"
      }
      defaultValue={menusDisponiveis[0]?.id_aba_card || "1"}
    >
      <div className="bg-white max-sm:pt-2  rounded-lg">
        <div className="relative flex justify-center items-center w-full">
          <h2 className="text-sm font-bold">
            Abas do Card{somenteLeitura ? " (somente visualização)" : ""}
          </h2>
        </div>
        <div className="overflow-x-auto overflow-y-hidden ">
          <TabsList className="w-fit lg:w-full flex flex-row flex-wrap flex-1 OverflowTabListEditCard h-auto border-none overflow-x-auto overflow-y-hidden">
            {menusDisponiveis.map((menu: any) => (
              <TabsTrigger
                className="rounded-none text-xs "
                key={menu.id_aba_card}
                value={menu.id_aba_card}
                onClick={() => {
                  if (menu.id_aba_card === "10") handleModalAnexo();
                  setActiveTab([menu.id_aba_card, null]);
                }}
              >
                {menu.nome_aba_card}
              </TabsTrigger>
            ))}
          </TabsList>
        </div>
      </div>

      <div className="h-full">
        <div className="overflow-auto">
          {menusDisponiveis.map((menu) => (
            <TabsContent
              key={menu.id_aba_card}
              value={menu.id_aba_card}
              className="relative"
            >
              {renderTabContent(menu.id_aba_card)}
            </TabsContent>
          ))}
        </div>
      </div>
    </Tabs>
  );
};

export default TabsCard;