import ReactTable from "@/components/ReactTable/ReactTable";
import {
  cadastrarTarefa,
  editarTarefa,
} from "@/requests/CRUD/Tarefa/cadastrarTarefa";
import { listarTarefas } from "@/requests/CRUD/Tarefa/listarTarefas";

import Breadcrumb from "@/components/Breadcrumbs/Breadcrumb";
import Container from "@/components/Forms/Container";
import { listarTiposTarefas } from "@/requests/CRUD/Tarefa/listarTipoTarefa";
import { useEffect, useState } from "react";
import FormTarefas from "./FormTarefas";
import { listarUsuarios } from "@/requests/CRM/Dashboard/listarDashboard";

const ConsultaTarefas = () => {
  const [tiposTarefas, setTiposTarefas] = useState<any>([]);
  const [usuarios, setUsuarios] = useState<any[]>([]);

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

    fetchUsuarios();
  }, []);

  useEffect(() => {
    const fetchTipoTarefa = async () => {
      const response = await listarTiposTarefas();
      setTiposTarefas(response);
    };
    fetchTipoTarefa();
  }, []);

  const columns = [
    {
      header: "ID Tarefa",
      accessorKey: "id_tarefa",
    },
    {
      header: "Título Tarefa",
      accessorKey: "titulo_tarefa",
    },
    {
      header: "Descrição Tarefa",
      accessorKey: "descricao_tarefa",
    },
    {
      header: "Tipo Tarefa",
      accessorKey: "tipo_tarefa",
    },
    {
      header: "Usuário Criação",
      accessorKey: "usuarioCriacao_tarefa",
    },
    // {
    //   header: "Data Criação",
    //   accessorKey: "dataCriacao_tarefa",
    // },
    {
      header: "Status Tarefa",
      accessorKey: "status_tarefa",
    },
  ];
  const formatFunction = (data: any) => {
    return data.map((e: any) => {
      e["usuarioCriacao_tarefa"] = usuarios.find(
        (usuario: any) => usuario.id_usuario == e["usuarioCriacao_tarefa"]
      )?.nome_usuario;
      e["tipo_tarefa"] = tiposTarefas.find(
        (tipo: any) => tipo.id_tipo_tarefa == e["tipo_tarefa"]
      )?.nome_tipo_tarefa;
      return e;
    });
  };

  const handleEdit = (data: any) => {
    if (data["status_tarefa"] == true || data["status_tarefa"] == false) {
      data["status_tarefa"] = data["status_tarefa"] == true ? 1 : 0;
    }
    return editarTarefa(data);
  };

  return (
    <Container>
      <Breadcrumb pageName="Cadastro de Tarefas" />
      {/* {tiposTarefas.length > 0 && ( */}
      <ReactTable
        columns={columns}
        listFunction={listarTarefas}
        idCol="id_tarefa"
        isActiveCol="status_tarefa"
        formatFunction={formatFunction}
        canEdit
        canDesactive
        editFunction={handleEdit}
        createFunction={cadastrarTarefa}
        Form={FormTarefas}
        pageName="Tarefas"
      />
      {/* )} */}
    </Container>
  );
};

export default ConsultaTarefas;