import Input from "@/components/Forms/Input";
import InputGroup from "@/components/Forms/InputGroup";
import InputSelectComponent from "@/components/Forms/InputSelect";
import { listarUsuarios } from "@/requests/CRM/Dashboard/listarDashboard";
import { listarTiposTarefas } from "@/requests/CRUD/Tarefa/listarTipoTarefa";
import { useAuth } from "@/src/contexts/authContext";
import { GetForm } from "@/utils";
import { PlusIcon, Trash } from "lucide-react";
import { useEffect, useState } from "react";

const FormTarefas = ({
  onSubmitFunction,
  defaultValues,
  disabledFields,
  children,
  ...rest
}: any) => {
  const { handleSubmit, ...form } = GetForm();
  const [usuarios, setUsuarios] = useState([]);
  const [tiposTarefas, setTiposTarefas] = useState([]);
  const { valuesSession } = useAuth();
  const { session } = valuesSession();
  const [itensChecklist, setItensChecklist] = useState<string[]>(
    defaultValues["descricao_checklist_tarefa"]?.filter(
      (field: any) =>
        field.codCampo_checklist_tarefa == defaultValues["id_tarefa"]
    ) ?? []
  );
  useEffect(() => {
    const fetchUsuarios = async () => {
      const response = await listarUsuarios();
      setUsuarios(response);
    };
    const fetchTipoTarefa = async () => {
      const response = await listarTiposTarefas();
      setTiposTarefas(
        response.filter((tipo: any) => tipo.status_tipo_tarefa == "1")
      );
    };
    fetchTipoTarefa();
    fetchUsuarios();
  }, []);

  useEffect(() => {
    if (defaultValues["descricao_checklist_tarefa"]) {
      itensChecklist.forEach((value: any, index: number) => {
        form.setValue(
          `descricao_checklist_tarefa[${index}]`,
          value.descricao_checklist_tarefa
        );
      });
    }
  }, []);

  const handleAddChecklistItem = () => {
    setItensChecklist((prev: any) => [
      ...prev,
      { descricao: "", subOpcoes: ["", ""] },
    ]);
  };

  const handleChecklistItemChange = (index: number, value: string) => {
    setItensChecklist((prev) =>
      prev.map((item: any, i) =>
        i === index ? { ...item, descricao: value } : item
      )
    );
    form.setValue(`descricao_checklist_tarefa[${index}]`, value);
  };

  const handleSubOptionChange = (
    index: number,
    subIndex: number,
    value: string
  ) => {
    setItensChecklist((prev) =>
      prev.map((item: any, i) =>
        i === index
          ? {
              ...item,
              subOpcoes: item.subOpcoes?.map((sub: any, j: any) =>
                j === subIndex ? value : sub
              ),
            }
          : item
      )
    );
    form.setValue(`subOption_${index}[${subIndex}]`, value);
  };

  const handleRemoveChecklistItem = (index: any) => {
    const updatedChecklist = itensChecklist.filter((_, i) => i !== index);

    form.setValue(`descricao_checklist_tarefa[${index}]`, undefined);
    form.setValue(`subOption_${index}[0]`, undefined);
    form.setValue(`subOption_${index}[1]`, undefined);

    setItensChecklist(updatedChecklist);

    updatedChecklist.forEach((item: any, newIndex) => {
      form.setValue(`descricao_checklist_tarefa[${newIndex}]`, item.descricao);
      item.subOpcoes?.forEach((sub: any, subIndex: any) => {
        form.setValue(`subOption_${newIndex}[${subIndex}]`, sub);
      });
    });
  };

  const submitFunction = async (data: any) => {
    if (defaultValues["id_tarefa"]) {
      data["id_tarefa"] = defaultValues["id_tarefa"];
    }
    const taskData = {
      titulo_tarefa: data.titulo_tarefa,
      descricao_tarefa: data.descricao_tarefa,
      tipo_tarefa: data.tipo_tarefa,
      usuarioCriacao_tarefa: session.id_usuario,
    };

    const checklistData = data.descricao_checklist_tarefa?.map(
      (descricao: string, index: number) => ({
        descricao_checklist_tarefa: descricao,
        subOption: data[`subOption_${index}`] || [],
      })
    );

    const payload = {
      ...taskData,
      descricao_checklist_tarefa: checklistData?.map(
        (item: { descricao_checklist_tarefa: any }) =>
          item.descricao_checklist_tarefa
      ),
      ...checklistData?.reduce((acc: any, item: any, index: any) => {
        acc[`subOption_${index}`] = item.subOption;
        return acc;
      }, {}),
    };

    onSubmitFunction(payload);
  };

  return (
    <>
      <form onSubmit={handleSubmit(submitFunction)} {...rest}>
        <InputGroup>
          <Input
            name="titulo_tarefa"
            label="Título Tarefa"
            formulario={form}
            error={"Preencha o Título da Tarefa"}
            required
            defaultValue={defaultValues && defaultValues["titulo_tarefa"]}
            disabled={disabledFields?.includes("titulo_tarefa")}
          />

          <InputSelectComponent
            name="tipo_tarefa"
            label="Tipo Tarefa"
            options={tiposTarefas.map((tipo: any) => ({
              label: tipo.nome_tipo_tarefa,
              value: tipo.id_tipo_tarefa,
            }))}
            formulario={form}
            error={"Preencha o Tipo da Tarefa"}
            required
            defaultValue={defaultValues && defaultValues["tipo_tarefa"]}
            disabled={disabledFields?.includes("tipo_tarefa")}
          />
          {/* <InputSelectComponent
            name="usuarioCriacao_tarefa"
            label="Usuário Criação"
            options={usuarios.map((usuario: any) => ({
              label: usuario.nome_usuario,
              value: usuario.id_usuario,
            }))}
            formulario={form}
            error={"Preencha o Usuário de Criação"}
            required
            defaultValue={
              defaultValues && defaultValues["usuarioCriacao_tarefa"]
            }
            disabled={disabledFields?.includes("usuarioCriacao_tarefa")}
          /> */}
        </InputGroup>
        <InputGroup>
          <Input
            name="descricao_tarefa"
            label="Descrição Tarefa"
            type="textarea"
            formulario={form}
            error={"Preencha a Descrição da Tarefa"}
            required
            defaultValue={defaultValues && defaultValues["descricao_tarefa"]}
            disabled={disabledFields?.includes("descricao_tarefa")}
          />
        </InputGroup>
        <div>
          <button
            type="button"
            className="bg-primary flex items-center rounded-md text-white p-2"
            onClick={handleAddChecklistItem}
          >
            <PlusIcon size={15} /> Adicionar Item
          </button>
          {itensChecklist.map((item: any, index: any) => (
            <InputGroup className="ml-3 mt-2 flex-row" key={index}>
              <div className="grid ">
                <Input
                  name={`descricao_checklist_tarefa[${index}]`}
                  label={`Item ${index + 1}`}
                  formulario={form}
                  onChange={(e) =>
                    handleChecklistItemChange(index, e.target.value)
                  }
                  defaultValue={
                    defaultValues && item.descricao_checklist_tarefa
                  }
                />
                <label className="text-sm">Opções:</label>
                <div className="ml-4  !text-xs flex gap-2 items-center">
                  <Input
                    formulario={form}
                    name={`subOption_${index}[0]`}
                    onChange={(e) =>
                      handleSubOptionChange(index, 0, e.target.value)
                    }
                    defaultValue={
                      defaultValues["descricao_checklist_tarefa"] &&
                      item.subOpcoes_checklist_tarefa?.split(",")[0]
                    }
                  />
                  <Input
                    formulario={form}
                    name={`subOption_${index}[1]`}
                    onChange={(e) =>
                      handleSubOptionChange(index, 1, e.target.value)
                    }
                    defaultValue={
                      defaultValues["descricao_checklist_tarefa"] &&
                      item.subOpcoes_checklist_tarefa?.split(",")[1]
                    }
                  />
                </div>
              </div>
              <button
                className="w-fit mt-[33px]"
                type="button"
                onClick={() => handleRemoveChecklistItem(index)}
              >
                <Trash color="red" />
              </button>
            </InputGroup>
          ))}
          <button
            type="button"
            className="bg-red-500 flex items-center rounded-md text-white p-2 mt-2"
            onClick={handleRemoveChecklistItem}
          >
            <Trash size={15} /> Remover Último Item
          </button>
        </div>
        {children}
      </form>
    </>
  );
};

export default FormTarefas;