import Button from "@/components/Forms/Button";
import Input from "@/components/Forms/Input";
import { Accordion } from "@/components/ui/accordion";
import {
  Table,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import React, { useEffect, useState } from "react";

interface MenuItem {
  exclusivo_customax: string;
  icone_menu: string;
  id_menu_configuracao: string;
  index_menu: number | null;
  menu_favorito: boolean;
  menu_pai: string;
  menus: MenuItem[];
  nome_menu_configuracao: string;
  rotina_menu: string;
  tipo_icone_menu: string;
  tipo_menu: string;
}

const TabelaMenuConfiguracoes = ({
  form,
  defaultValues,
  menus,
  storageKey,
  letra,
}: any) => {
  const [mobileView, setMobileView] = useState(false);

  const [menusId, setMenusId] = useState<any[]>(() => {
    const storedMenus = localStorage.getItem(storageKey);
    if (storedMenus) {
      return JSON.parse(storedMenus);
    } else if (defaultValues && defaultValues["permissoes_menu_cfg_perfil"]) {
      return defaultValues["permissoes_menu_cfg_perfil"]
        .split("^")
        .filter((item: string) => item !== "");
    } else {
      return [];
    }
  });

  useEffect(() => {
    form.setValue("permissoes_menu_cfg_perfil", menusId.join("^"));
    localStorage.setItem(storageKey, JSON.stringify(menusId));
  }, [menusId]);

  useEffect(() => {
    const windowSize = window.innerWidth;
    setMobileView(windowSize < 640);
  }, []);

  return (
    <>
      {mobileView ? (
        <Accordion type="single" collapsible>
          {/* Implementação mobile pode ser adicionada aqui se necessário */}
        </Accordion>
      ) : (
        <Table className="min-w-full bg-white dark:bg-[#1d2a39] border border-gray-300 shadow-sm">
          <TableHeader>
            <TableRow>
              <TableHead className="font-bold py-2 px-4 border-b text-center">
                Menu
              </TableHead>
              <TableHead className="w-6 font-bold">Acesso</TableHead>
            </TableRow>
          </TableHeader>
          <tbody>
            <TableRow>
              <TableCell className="py-2 text-center ">
                <div className="mx-auto flex flex-row gap-2">
                  <Button
                    type="button"
                    className="bg-meta-1 flex-1 py-1 px-2 text-sm"
                    onClick={() => {
                      setMenusId([]);
                    }}
                  >
                    Desmarcar Todos Menus
                  </Button>
                  <Button
                    type="button"
                    className="flex-1 py-1 px-2 text-sm"
                    onClick={() => {
                      setMenusId(
                        menus
                          .map((menu: any) => menu.id_menu_configuracao)
                          .flat()
                      );
                    }}
                  >
                    Marcar Todos Menus
                  </Button>
                </div>
              </TableCell>
              <TableCell className="py-2 text-center"></TableCell>
            </TableRow>
            {menus?.map((menu: MenuItem, index: number) => (
              <React.Fragment key={menu.id_menu_configuracao}>
                <TableRow key={menu.id_menu_configuracao}>
                  <TableCell className="py-2 text-left">
                    {letra
                      ? `${letra}${index + 1}. Mostrar Menu ${menu.nome_menu_configuracao}`
                      : `Mostrar Menu ${menu.nome_menu_configuracao}`}
                  </TableCell>
                  <TableCell className="py-2 text-center">
                    <Input
                      name=""
                      checked={menusId.some((id) => id == menu.id_menu_configuracao)}
                      type="checkbox"
                      onChange={(e) => {
                        if (e.target.checked) {
                          setMenusId((previous) => [
                            ...previous,
                            menu.id_menu_configuracao,
                          ]);
                        } else {
                          setMenusId((previous) =>
                            previous.filter(
                              (menufiltro) =>
                                menufiltro !== menu.id_menu_configuracao
                            )
                          );
                        }
                      }}
                    />
                  </TableCell>
                </TableRow>
              </React.Fragment>
            ))}
          </tbody>
        </Table>
      )}
    </>
  );
};

export default TabelaMenuConfiguracoes;