import Breadcrumb from "@/components/Breadcrumbs/Breadcrumb";
import Container from "@/components/Forms/Container";
import ImgAwsGallery from "@/components/ImgAwsGallery/ImgAwsGallery";
import ReactTable from "@/components/ReactTable/ReactTable";
import { listarUsuarios } from "@/requests/CRM/Dashboard/listarDashboard";
import {
  cadastrarTipoTarefa,
  editarTipoTarefa,
} from "@/requests/CRUD/Tarefa/cadastrarTarefa";
import { listarTiposTarefas } from "@/requests/CRUD/Tarefa/listarTipoTarefa";
import { GetGallery } from "@/utils";
import { useEffect, useState } from "react";
import FormTipoTarefa from "./FormTipoTarefa";

const TipoTarefa = () => {
  const [imagens, setImagens] = useState<any[]>([]);
  const { openGallery, setGallery } = GetGallery();
  const [usuarios, setUsuarios] = useState<any[]>([]);

  useEffect(() => {
    const fetchUsuarios = async () => {
      const response = await listarUsuarios();
      setUsuarios(response);
    };

    fetchUsuarios();
  }, []);

  useEffect(() => {
    imageGallery();
  }, [imagens]);

  const imageGallery = () => {
    setGallery(
      imagens.map((imagem) => ({
        src: imagem.src,
        name: imagem?.imagem_item?.split("/").pop(),
      })),
    );
  };

  const columns = [
    {
      header: "ID Tipo Tarefa",
      accessorKey: "id_tipo_tarefa",
    },
    {
      header: "Nome",
      accessorKey: "nome_tipo_tarefa",
    },
    {
      header: "Ícone",
      accessorKey: "icone_tipo_tarefa",
    },
    {
      header: "Cor",
      accessorKey: "cor_tipo_tarefa",
    },
    {
      header: "Usuário Criação",
      accessorKey: "usuarioCriacao_tipo_tarefa",
    },
    {
      header: "Status Tipo Tarefa",
      accessorKey: "status_tipo_tarefa",
    },
  ];

  const handleSubmit = async (data: any) => {
    return cadastrarTipoTarefa(data);
  };

  const formatFunction = async (data: any) => {
    return data.map((item: any, index: any) => {
      return {
        ...item,
        icone_tipo_tarefa: (
          <ImgAwsGallery
            key={index}
            caminho={item.icone_tipo_tarefa}
            indexImagem={index}
            setImagens={setImagens}
            onClick={() => openGallery(index, false)}
          />
        ),
        cor_tipo_tarefa: (
          <div className="flex justify-center items-center w-full">
            <div
              className="w-10 h-10 rounded-lg border-2 border-gray-200 shadow-sm overflow-hidden"
              style={{ backgroundColor: item.cor_tipo_tarefa }}
            ></div>
          </div>
        ),
        usuarioCriacao_tipo_tarefa: usuarios.find(
          (usuario: any) =>
            usuario.id_usuario == item["usuarioCriacao_tipo_tarefa"],
        )?.nome_usuario,
      };
    });
  };

  const handleEdit = async (data: any) => {
    data["caminho_icone_tipo_tarefa"] = data["caminho_icone_tipo_tarefa"];
    if (
      data["status_tipo_tarefa"] == true ||
      data["status_tipo_tarefa"] == false
    ) {
      data["status_tipo_tarefa"] = data["status_tipo_tarefa"] == true ? 1 : 0;
    }
    return editarTipoTarefa(data);
  };

  return (
    <Container>
      <Breadcrumb pageName="Tipos de Tarefas" />
      <ReactTable
        columns={columns}
        listFunction={listarTiposTarefas}
        idCol="id_tipo_tarefa"
        isActiveCol="status_tipo_tarefa"
        formatFunction={formatFunction}
        canEdit
        canDesactive
        editFunction={handleEdit}
        createFunction={handleSubmit}
        Form={FormTipoTarefa}
        pageName="Tipo Tarefa"
      />
    </Container>
  );
};

export default TipoTarefa;