import Button from "@/components/Forms/Button";
import Input from "@/components/Forms/Input";
import {
  Table,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import {
  Desc_Perm_Comissoes,
  getOptionsFromEnumPermision,
  Perm_Comissoes,
} from "@/enums/permissoesPerfil";
import { useEffect, useState } from "react";

const TabelaComissoes = ({
  onSubmitFunction,
  defaultValues,
  disabledFields,
  children,
  form,
  fullWidth,
  storageKey,
  ...rest
}: any) => {
  const [isLoaded, setIsLoaded] = useState(false);
  const [checkedValues, setCheckedValues] = useState<Record<string, boolean>>(
    {}
  );

  const perfis = getOptionsFromEnumPermision(
    Perm_Comissoes,
    Desc_Perm_Comissoes
  );

  useEffect(() => {
    // Carrega valores do localStorage se disponíveis, caso contrário, usa defaultValues
    const storedValues = localStorage.getItem(storageKey);
    const initialCheckedValues = storedValues
      ? JSON.parse(storedValues)
      : perfis.reduce(
          (acc, perfil) => {
            acc[perfil.value] =
              defaultValues && defaultValues[perfil.value] === "1";
            return acc;
          },
          {} as Record<string, boolean>
        );
    setCheckedValues(initialCheckedValues);
    setIsLoaded(true);
  }, [defaultValues]);

  useEffect(() => {
    // Atualiza o localStorage sempre que checkedValues mudar
    localStorage.setItem(storageKey, JSON.stringify(checkedValues));
  }, [checkedValues]);

  const marcarTodos = () => {
    const updatedValues = perfis.reduce(
      (acc, perfil) => {
        acc[perfil.value] = true;
        return acc;
      },
      {} as Record<string, boolean>
    );
    setCheckedValues(updatedValues);
    perfis.forEach((perfil) => form.setValue(perfil.value, "1"));
  };

  const desmarcarTodos = () => {
    const updatedValues = perfis.reduce(
      (acc, perfil) => {
        acc[perfil.value] = false;
        return acc;
      },
      {} as Record<string, boolean>
    );
    setCheckedValues(updatedValues);
    perfis.forEach((perfil) => form.setValue(perfil.value, "0"));
  };

  return (
    <div>
      <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">
              Nome
            </TableHead>
            <TableHead className="font-bold py-2 px-4 border-b text-end">
              Acesso
            </TableHead>
          </TableRow>
        </TableHeader>
        <tbody>
          <TableRow>
            <TableCell className="py-2 text-center">
              <div className="flex justify-center gap-2">
                <Button
                  type="button"
                  className="bg-meta-1 flex-1 py-1 px-2 text-sm"
                  onClick={desmarcarTodos}
                >
                  Desmarcar Todos
                </Button>
                <Button
                  type="button"
                  className="flex-1 py-1 px-2 text-sm"
                  onClick={marcarTodos}
                >
                  Marcar Todos
                </Button>
              </div>
            </TableCell>
          </TableRow>
          {perfis.map((perfil, index) => (
            <TableRow key={index}>
              <TableCell className="py-2 text-left">{perfil.label}</TableCell>
              <TableCell fullWidth={true} className="py-2 text-center">
                <Input
                  type="checkbox"
                  name={perfil.value}
                  checked={checkedValues[perfil.value] || false}
                  onChange={(e) => {
                    const newValue = e.target.checked ? "1" : "0";
                    form.setValue(perfil.value, newValue);
                    setCheckedValues((prev) => ({
                      ...prev,
                      [perfil.value]: e.target.checked,
                    }));
                  }}
                  disabled={disabledFields?.some(
                    (field: any) => field === perfil.value
                  )}
                />
              </TableCell>
            </TableRow>
          ))}
        </tbody>
      </Table>

      {children}
    </div>
  );
};

export default TabelaComissoes;