import ReactTable from "@/components/ReactTable/ReactTable";
import { listarTodosKanbans } from "@/requests/CRM/kanban";
import { editarTipoNegocio } from "@/requests/CRUD/TiposNegocios/editarTipoNegocio";
import { listarTiposNegocios } from "@/requests/CRUD/TiposNegocios/listarTiposNegocios";
import { useEffect, useState } from "react";
import DesignerContrato from "../Contrato/DesignerContrato";
import DesignerProposta from "../Proposta/DesignerProposta";
import FormTiposNegocios from "./FormTiposNegocios";

const TiposNegociosComponent = () => {
  const [etapas, setEtapas] = useState<any[]>([]);
  const [funis, setFunis] = useState<any[]>([]);

  useEffect(() => {
    setEtapas([...funis.map((funil) => funil.listas_kanban).flat()]);
  }, [funis]);

  async function formatarLista(arr: any) {
    let funilList: any[] = [];
    let etapaList: any[] = [];
    if (funis[0] == undefined) {
      funilList = await listarTodosKanbans().then((res: any) => {
        setFunis(res);
        return res;
      });
    } else {
      funilList = funis;
    }

    if (etapas[0] == undefined) {
      etapaList = funilList.map((funil) => funil.listas_kanban).flat();
      setEtapas(etapaList);
    } else {
      etapaList = etapas;
    }

    return arr.map((e: any) => {
      // e["funil_tipo_negocio"] = funilList.find(
      //   (funil: any) => funil.id_funil == e["funil_tipo_negocio"]
      // )?.titulo_funil;

      // e["etapa_tipo_negocio"] = etapaList.find(
      //   (etapa: any) => etapa.id_etapa_funil == e["etapa_tipo_negocio"]
      // )?.titulo_etapa_funil;
      return e;
    });
  }

  const columns = [
    {
      header: "Código",
      accessorKey: "id_tipo_negocio",
    },
    {
      header: "Nome",
      accessorKey: "nome_tipo_negocio",
    },
    // {
    //   header: "Funil Inicial",
    //   accessorKey: "funil_tipo_negocio",
    // },
    // {
    //   header: "Etapa Inicial",
    //   accessorKey: "etapa_tipo_negocio",
    // },
    {
      header: "Status",
      accessorKey: "status_tipo_negocio",
    },
  ];

  const getContrastColor = (hexColor: any) => {
    const r = parseInt(hexColor.slice(1, 3), 16);
    const g = parseInt(hexColor.slice(3, 5), 16);
    const b = parseInt(hexColor.slice(5, 7), 16);
    const brightness = (r * 299 + g * 587 + b * 114) / 1000;

    return brightness > 128 ? "#000" : "#fff";
  };

  const getRandomColor = () => {
    const letters = "0123456789ABCDEF";
    let color = "#";
    for (let i = 0; i < 6; i++) {
      color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
  };

  return (
    <ReactTable
      columns={columns}
      // createFunction={onSubmitFunction}
      listFunction={listarTiposNegocios}
      formatFunction={formatarLista}
      idCol="id_tipo_negocio"
      isActiveCol="status_tipo_negocio"
      // canEdit
      // canDesactive
      canProposta
      canContrato
      editFunction={editarTipoNegocio}
      Form={FormTiposNegocios}
      propostaFunction={DesignerProposta}
      contratoFunction={DesignerContrato}
      pageName="Tipos de Negócios"
    />
  );
};

export default TiposNegociosComponent;