import Button from "@/components/Forms/Button";
import Input from "@/components/Forms/Input";
import InputGroup from "@/components/Forms/InputGroup";
import InputSelectComponent from "@/components/Forms/InputSelect";
import ModalComponente from "@/components/Modal/ModalComponente";
import {
  Table,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import { useEffect, useState } from "react";
import { IoInformationCircleSharp } from "react-icons/io5";

const TabelaFunil = ({
  defaultValues,
  funis,
  form,
  storageKeyFunis,
  storageKeyEtapas,
}: any) => {
  const [openModalEtapas, setOpenModalEtapas] = useState(false);
  const [selectedfunil, setSelectedFunil] = useState<any>([]);

  const [funisId, setFunisId] = useState<any[]>(() => {
    const storedFunis = localStorage.getItem(storageKeyFunis);
    if (storedFunis) {
      return JSON.parse(storedFunis);
    } else if (defaultValues && defaultValues["permissoes_funis_perfil"]) {
      return defaultValues["permissoes_funis_perfil"]
        .split("^")
        .filter((item: string) => item !== "");
    } else if (
      defaultValues &&
      Object.keys(defaultValues).includes("permissoes_funis_perfil")
    ) {
      return [];
    } else {
      return funis.map((funil: any) => funil.id_funil);
    }
  });

  const [etapasId, setEtapasId] = useState<any[]>(() => {
    const storedEtapas = localStorage.getItem(storageKeyEtapas);
    if (storedEtapas) {
      return JSON.parse(storedEtapas);
    } else if (defaultValues && defaultValues["permissoes_etapas_perfil"]) {
      return defaultValues["permissoes_etapas_perfil"]
        .split("^")
        .filter((item: string) => item !== "");
    } else if (
      defaultValues &&
      Object.keys(defaultValues).includes("permissoes_etapas_perfil")
    ) {
      return [];
    } else {
      return funis
        .flatMap((funil: any) => funil.etapas) // Isso vai aplanar todos os arrays de etapas dentro de cada funil
        .map((etapa: any) => etapa.id_etapa);
    }
  });

  useEffect(() => {
    form.setValue(
      "permissoes_funis_perfil",
      funisId.filter((item) => item !== "").join("^")
    );
    localStorage.setItem(storageKeyFunis, JSON.stringify(funisId));
  }, [funisId]);

  useEffect(() => {
    form.setValue(
      "permissoes_etapas_perfil",
      etapasId.filter((item) => !!item).join("^")
    );
    localStorage.setItem(storageKeyEtapas, JSON.stringify(etapasId));
  }, [etapasId]);

  const marcarTodos = () => {
    // Extrair todos os IDs das etapas em todos os funis
    const allEtapasIds = funis
      .flatMap((funil: any) => funil.etapas) // Isso vai aplanar todos os arrays de etapas dentro de cada funil
      .map((etapa: any) => etapa.id_etapa); // Mapear os IDs das etapas

    // Marcar todos os fluxos e etapas correspondentes
    setFunisId(funis.map((funil: any) => funil.id_funil));
    setEtapasId(allEtapasIds);
  };

  const desmarcarTodos = () => {
    setFunisId([]);
    setEtapasId([]);
  };

  return (
    <>
      <InputGroup align="center">
        <InputSelectComponent
          formulario={form}
          name="permite_excluir_fluxos_perfil"
          label="Permite Excluir Fluxos"
          required
          width="xl:w-[300px]"
          options={[
            { value: "1", label: "Sim" },
            { value: "0", label: "Não" },
          ]}
          // label-size="font-bold"
          error="Preencha o nome!"
          defaultValue={defaultValues["permite_excluir_fluxos_perfil"] || "0"}
          skipEffect
        />
        <InputSelectComponent
          formulario={form}
          skipEffect
          name="permite_excluir_etapas_perfil"
          label="Permite Excluir Etapas do Fluxo"
          required
          width="xl:w-[300px]"
          options={[
            { value: "1", label: "Sim" },
            { value: "0", label: "Não" },
          ]}
          error="Preencha o perfil!"
          defaultValue={defaultValues["permite_excluir_etapas_perfil"] || "0"}
        />
      </InputGroup>
      <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-left">
              Etapas
            </TableHead>
            <TableHead className="font-bold  py-2 px-4 border-b text-center">
              Visualização dos Fluxos
            </TableHead>
            <TableHead className=" w-6 font-bold text-right">
              Visualizar
            </TableHead>
          </TableRow>
        </TableHeader>
        <tbody>
          <TableRow>
            <TableCell className="py-2 text-center"></TableCell>
            <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={() => {
                    desmarcarTodos();
                  }}
                >
                  Desmarcar Todos Fluxos
                </Button>
                <Button
                  type="button"
                  className="flex-1 py-1 px-2 text-sm"
                  onClick={() => {
                    marcarTodos();
                  }}
                >
                  Marcar Todos Fluxos
                </Button>
              </div>
            </TableCell>
          </TableRow>

          {funis?.map((funil: any) => {
            return (
              <TableRow key={funil.id_funil}>
                <TableCell
                  className="py-2 text-left w-[20px] cursor-pointer"
                  onClick={() => {
                    if (funil.etapas[0].id_etapa == null) return;
                    setSelectedFunil(funil);
                    setOpenModalEtapas(true);
                  }}
                >
                  {funil.etapas[0]?.id_etapa == null ? (
                    ""
                  ) : (
                    <IoInformationCircleSharp color="blue" size={24} />
                  )}
                </TableCell>
                <TableCell className="py-2 text-left">
                  {`${funil.titulo_funil}`}
                </TableCell>
                <TableCell className="py-2 text-center">
                  <Input
                    name=""
                    checked={
                      funisId.includes(funil.id_funil)
                      // ||  funil.etapas.some((etapa: any) =>
                      //   etapasId.includes(etapa.id_etapa)
                      // )
                    }
                    type="checkbox"
                    onChange={(e) => {
                      if (e.target.checked) {
                        setFunisId((previous) => [...previous, funil.id_funil]);
                        setEtapasId((prev) => [
                          ...new Set([
                            ...prev,
                            ...funil.etapas?.map(
                              (etapa: any) => etapa.id_etapa
                            ),
                          ]),
                        ]);
                        // setEtapasId((previous) => [
                        //   ...previous,
                        //   ...funil.etapas
                        //     .filter(
                        //       (etapa: any) => !etapasId.includes(etapa.id_etapa)
                        //     )
                        //     .map((etapa: any) => etapa.id_etapa),
                        // ]);
                      } else {
                        setFunisId((previous) =>
                          previous.filter(
                            (funilFilter) => funilFilter != funil.id_funil
                          )
                        );
                        setEtapasId((previous) =>
                          previous.filter(
                            (e) =>
                              !funil.etapas.some(
                                (etapa: any) => etapa.id_etapa == e
                              )
                          )
                        );
                      }
                    }}
                  />
                </TableCell>
              </TableRow>
            );
          })}
        </tbody>
      </Table>
      <ModalComponente
        hasForm={false}
        defaultW="300px"
        opened={openModalEtapas}
        hasSaveButton={false}
        onClose={() => setOpenModalEtapas(false)}
        header={`Etapas do Funil ${selectedfunil.titulo_funil}`}
      >
        <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">
                Visualização das Etapas
              </TableHead>
              <TableHead className=" w-6 font-bold text-right">
                {" "}
                Visualizar
              </TableHead>
            </TableRow>
          </TableHeader>
          <tbody>
            <TableRow>
              <TableCell className="py-2 text-center" colSpan={2}>
                <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={() => {
                      setEtapasId((prev) =>
                        prev.filter(
                          (etapa) =>
                            !selectedfunil.etapas
                              .map((etapaFunil: any) => etapaFunil.id_etapa)
                              .includes(etapa)
                        )
                      );
                    }}
                  >
                    Desmarcar Todas Etapas
                  </Button>
                  <Button
                    type="button"
                    className="flex-1 py-1 px-2 text-sm"
                    onClick={() => {
                      setEtapasId((prev) => [
                        ...new Set([
                          ...prev,
                          ...selectedfunil.etapas?.map(
                            (etapa: any) => etapa.id_etapa
                          ),
                        ]),
                      ]);
                    }}
                  >
                    Marcar Todas Etapas
                  </Button>
                </div>
              </TableCell>
            </TableRow>
            {selectedfunil.etapas?.map((etapa: any) => {
              return (
                <TableRow key={etapa.id_etapa}>
                  <TableCell className="py-2 text-center">
                    {`${etapa.titulo_etapa}`}
                  </TableCell>
                  <TableCell className="py-2 text-center">
                    <Input
                      name=""
                      checked={etapasId.some((id) => id == etapa.id_etapa)}
                      type="checkbox"
                      onChange={(e) => {
                        if (e.target.checked) {
                          setEtapasId((previous) => [
                            ...previous,
                            etapa.id_etapa,
                          ]);
                        } else {
                          setEtapasId((previous) => {
                            return previous.filter(
                              (menufiltro) => menufiltro !== etapa.id_etapa
                            );
                          });
                        }
                      }}
                    />
                  </TableCell>
                </TableRow>
              );
            })}
          </tbody>
        </Table>
      </ModalComponente>
    </>
  );
};

export default TabelaFunil;