import Button from "@/components/Forms/Button";
import Input from "@/components/Forms/Input";
import InputGroup from "@/components/Forms/InputGroup";
import InputSelectComponent from "@/components/Forms/InputSelect";
import { listarTarefas } from "@/requests/CRUD/Tarefa/listarTarefas";
import { GetForm } from "@/utils";
import { useEffect, useState } from "react";
import { toast } from "react-toastify";

const FormTarefasGeradas = ({
  defaultValues,
  onSubmitFunction,
  etapas,
  selectedFunilDestiny,
  setSelectedFunilDestiny,
  usuarios,
  perfis,
  tiposTarefas,
  funis,
}: any) => {
  const formTarefas: any = GetForm();
  const [tarefas, setTarefas] = useState<any>([]);
  const [isLoading, setIsLoading] = useState(false);
  const [selectedTipoTarefa, setSelectedTipoTarefa] = useState<any>(
    defaultValues?.tipo_tarefa_id,
  );
  const [userOrProfile, setUserOrProfile] = useState<any>(
    defaultValues?.perfil_tarefa_id
      ? "profile"
      : defaultValues?.usuario_tarefa_id
        ? "user"
        : null,
  );

  useEffect(() => {
    if (defaultValues?.funil_destino_id) {
      setSelectedFunilDestiny(defaultValues?.funil_destino_id);
    }
    if (selectedTipoTarefa) {
      listarTarefas().then((res) => {
        setTarefas(
          res.filter((tarefa: any) => {
            return tarefa.tipo_tarefa == selectedTipoTarefa;
          }),
        );
      });
    }
  }, [selectedTipoTarefa]);

  const onSubmitFormTarefas = (data: any) => {
    if (userOrProfile == "user") {
      data["perfil_tarefa_id"] = "";
      if (data?.usuario_tarefa_id?.length == 0) {
        toast.error("Escolha um Usuário");
        return;
      }
    }
    if (userOrProfile == "profile") {
      data["usuario_tarefa_id"] = "";
      if (data?.perfil_tarefa_id?.length == 0) {
        toast.error("Escolha um Perfil");
        return;
      }
    }
    setIsLoading(true);
    onSubmitFunction(data).finally((res: any) => setIsLoading(false));
  };

  return (
    <div className="space-y-6">
      <div className="w-full bg-stroke border-l-4 border-black text-black p-2 rounded-md shadow-sm text-sm">
        <p>
          Tarefas atribuídas a{" "}
          <span className="font-medium">perfis de usuário</span> serão
          disponibilizadas a todos os usuários com o perfil selecionado, podendo
          ser concluídas por qualquer um deles. Já as tarefas atribuídas a{" "}
          <span className="font-medium">usuários específicos</span> serão
          exclusivas para os selecionados, e apenas eles poderão concluí-las. A
          tarefa será considerada finalizada quando o último usuário designado
          concluir sua parte.
        </p>
      </div>

      <form>
        <InputGroup>
          <InputSelectComponent
            label="Tipo de Tarefa"
            name="tipo_tarefa_id"
            formulario={formTarefas}
            options={tiposTarefas?.map((tipo: any) => ({
              value: tipo.id_tipo_tarefa,
              label: tipo.nome_tipo_tarefa,
            }))}
            required
            onChange={(e: any) => {
              setTarefas([]);
              setSelectedTipoTarefa(e?.value);
            }}
            defaultValue={defaultValues?.["tipo_tarefa_id"]}
            error="Escolha Algum Tipo de Tarefa"
          />
          <InputSelectComponent
            label="Tarefa"
            name="tarefa_loja_id"
            formulario={formTarefas}
            options={tarefas.map((tipo: any) => ({
              value: tipo.id_tarefa,
              label: tipo.titulo_tarefa,
              prazo: tipo.prazoEntrega_tarefa,
            }))}
            defaultValue={defaultValues?.["tarefa_loja_id"] ?? "nenhuma"}
            onChange={(e: any) => {
              formTarefas.setValue("prazo_tarefa" as never, e?.prazo);
            }}
            required
          />
          <InputSelectComponent
            label="Responsável"
            name="responsavel_tarefa_id"
            required
            formulario={formTarefas}
            options={[
              { value: "pre_vendedor", label: "Pré-Vendedor do Projeto" },
              { value: "vendedor", label: "Vendedor do Projeto" },
              { value: "tecnico", label: "Técnico do Projeto" },
              { value: "gerente", label: "Gerente do Projeto" },
              { value: "instalador", label: "Instalador do Projeto" },
              { value: "listaUsuario", label: "Lista de Usuários" },
              { value: "perfilUsuario", label: "Perfil de Usuários" },
            ]}
            defaultValue={defaultValues?.["responsavel_tarefa_id"]}
            onChange={(e: any) => {
              if (e?.value == "listaUsuario") {
                setUserOrProfile("user");
              } else if (e?.value == "perfilUsuario") {
                setUserOrProfile("profile");
              } else {
                setUserOrProfile(null);
              }
              formTarefas.setValue("usuario_tarefa_id" as never, []);
              formTarefas.setValue("perfil_tarefa_id" as never, []);
            }}
          />
          {userOrProfile == "user" && (
            <InputSelectComponent
              label="Usuário"
              name="usuario_tarefa_id"
              isMulti
              formulario={formTarefas}
              options={usuarios.map((usuario: any) => ({
                value: usuario.id_usuario,
                label: usuario.nome_usuario,
              }))}
              defaultValue={defaultValues?.["usuario_tarefa_id"]}
            />
          )}
          {userOrProfile == "profile" && (
            <InputSelectComponent
              label="Perfil"
              isMulti
              name="perfil_tarefa_id"
              formulario={formTarefas}
              options={perfis.map((perfil: any) => ({
                value: perfil.id_perfil,
                label: perfil.nome_perfil,
              }))}
              defaultValue={defaultValues?.["perfil_tarefa_id"]}
            />
          )}
          <Input
            label="Prazo"
            name="prazo_tarefa"
            formulario={formTarefas}
            mascara="numerico"
            required
            defaultValue={defaultValues?.["prazo_tarefa"] ?? ""}
          />
        </InputGroup>
        <InputGroup>
          <InputSelectComponent
            label="Fluxo Destino após concluir a Terefa"
            name="funil_destino_id"
            formulario={formTarefas}
            required
            options={[
              { value: "nenhum", label: "Nenhum" },
              ...funis
                .filter(
                  (res: any) => res.status_funil == 1 && res.id_funil != 0,
                )
                .map((funil: any) => ({
                  value: String(funil.id_funil),
                  label: funil.titulo_funil,
                }))
                .sort((a: any, b: any) => a.label.localeCompare(b.label)),
            ]}
            onChange={(e: any) => setSelectedFunilDestiny(String(e?.value))}
            defaultValue={defaultValues?.["funil_destino_id"]}
          />

          <InputSelectComponent
            label="Etapa Destino após Concluir a Tarefa"
            name="etapa_destino_id"
            formulario={formTarefas}
            options={[
              { value: "nenhuma", label: "Nenhuma" },
              ...etapas
                .filter(
                  (etapa: any) =>
                    etapa.grupo_etapa_funil == selectedFunilDestiny &&
                    etapa.status_etapa_funil == 1,
                )
                .map((etapa: any) => ({
                  value: String(etapa.id_etapa_funil),
                  label: etapa.titulo_etapa_funil,
                })),
            ]}
            defaultValue={defaultValues?.["etapa_destino_id"] ?? "nenhuma"}
          />
        </InputGroup>

        {/* Botão Salvar */}
        <div className="flex justify-center pt-4">
          <Button
            type="button"
            onClick={(e: any) => {
              formTarefas.handleSubmit(onSubmitFormTarefas)(e);
            }}
            loading={isLoading}
            className="bg-primary text-white px-6 py-2 rounded-xl shadow-md hover:bg-primary/90 transition font-primary"
          >
            Salvar Tarefa
          </Button>
        </div>
      </form>
    </div>
  );
};

export default FormTarefasGeradas;