import { listarRelacionamenosRapidos } from "@/requests/common/RelacionamentosRapidos/listarRelacionamenosRapidos";
import { useEffect, useState } from "react";

import { LinksunBackend } from "@/services/api";

async function editarRelacionamentosRapidos(data: any) {
  const nomeDaFuncao = "editarRelacionamentosRapidos";
  const response = await LinksunBackend.post(
    `?action=${nomeDaFuncao}&class=RelacionamentosRapidos`,
    data
  ).then((e) => e.body);
  return response;
}

export default function PaginaAgrupadoraDasTags() {
  const [relacionamentosRapidos, setRelacionamentosRapidos] = useState<any[]>(
    []
  );
  const [lastIdChecked, setLastIdChecked] = useState(0);

  const gruposRelacionamentosRapidos = [
    { label: "Usuários", value: "1", color: "#F5EFDA" },
    { label: "Contato", value: "2", color: "#F5DBDA" },
    { label: "Negócio", value: "3", color: "#DAF5E3" },
    { label: "Proposta", value: "4", color: "#DADBF5" },
    { label: "Contrato", value: "5", color: "#a6fac2" },
    { label: "Diversos", value: "6", color: "#f3e192" },
    { label: "Loja", value: "7", color: "#ffa7a7" },
  ];

  useEffect(() => {
    listarRelacionamenosRapidos().then(setRelacionamentosRapidos);
  }, []);

  return (
    <div className="">
      <div>
        {gruposRelacionamentosRapidos.map((grupo, indexGrupo) => (
          <div
            key={indexGrupo}
            onClick={() => {
              setRelacionamentosRapidos((prev) => {
                const newRelacionamentos = [...prev].map((relacionamento) => ({
                  ...relacionamento,
                  grupo_relacionamento_rapido: relacionamento.isCheck
                    ? grupo.value
                    : relacionamento.grupo_relacionamento_rapido,
                  isCheck: false,
                }));
                editarRelacionamentosRapidos(
                  newRelacionamentos.map((relacionamento) => ({
                    id_relacionamento_rapido: relacionamento.id_relacionamento_rapido,
                    grupo_relacionamento_rapido: relacionamento.grupo_relacionamento_rapido,
                  }))
                );
                return newRelacionamentos;
              });
            }}
            style={{ backgroundColor: grupo.color }}
          >
            {grupo.label}
          </div>
        ))}
      </div>
      <div>
        <div></div>
        <div className="bg-black-2/[0.01] w-fit max-h-[800px] overflow-auto p-2">
          <table>
            <thead>
              <tr>
                <th>A</th>
                <th>b</th>
              </tr>
            </thead>
            <tbody>
              {relacionamentosRapidos.map(
                (relacionamento, indexRelacionamento) => (
                  <tr
                    key={indexRelacionamento}
                    className="select-none cursor-pointer"
                    style={{
                      backgroundColor:
                        relacionamento.grupo_relacionamento_rapido
                          ? gruposRelacionamentosRapidos?.find(
                              (grupoRelacionamento) =>
                                grupoRelacionamento.value ==
                                relacionamento.grupo_relacionamento_rapido
                            )?.color
                          : "transparent",
                    }}
                    onClick={(e) => {
                      setLastIdChecked(indexRelacionamento);
                      setRelacionamentosRapidos((prev) => {
                        let newRelacionamentos = [...prev];
                        if (e.shiftKey) {
                          const start = lastIdChecked;
                          const end = indexRelacionamento;
                          newRelacionamentos = newRelacionamentos.map(
                            (newRelacionamento, indexNewRelacionamento) => {
                              return {
                                ...newRelacionamento,
                                isCheck:
                                  indexNewRelacionamento >=
                                    Math.min(start, end) &&
                                  indexNewRelacionamento <= Math.max(start, end)
                                    ? !newRelacionamentos[indexRelacionamento]
                                        .isCheck
                                    : newRelacionamento.isCheck,
                              };
                            }
                          );
                        } else {
                          newRelacionamentos.splice(indexRelacionamento, 1, {
                            ...newRelacionamentos[indexRelacionamento],
                            isCheck:
                              !newRelacionamentos[indexRelacionamento].isCheck,
                          });
                        }
                        return newRelacionamentos;
                      });
                    }}
                  >
                    <td
                      className={`p-2 ${indexRelacionamento == lastIdChecked && "bg-black-2/10"}`}
                    >
                      <input type="checkbox" checked={relacionamento.isCheck} />
                    </td>
                    <td
                      className={`p-2 ${indexRelacionamento == lastIdChecked && "bg-black-2/10"}`}
                    >
                      {relacionamento.nome_relacionamento_rapido}
                    </td>
                  </tr>
                )
              )}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
}