import Input from "@/components/Forms/Input";
import InputGroup from "@/components/Forms/InputGroup";
import InputSelectComponent from "@/components/Forms/InputSelect";
import {
  Desc_TipoTarefa,
  Desc_Urgencia,
  Desc_Verdade,
  TipoTarefa,
  Urgencia,
  Verdade,
  getOptionsFromEnum,
} from "@/enums/enums";
import { listarTodosKanbans } from "@/requests/CRM/kanban";
import {
  listarContatos,
  listarNegociosCliente,
} from "@/requests/CRUD/Cliente/listarClientes";
import { useAuth } from "@/src/contexts/authContext";
import { useScreenContext } from "@/src/contexts/ScreenContext";
import { getDateBrasil } from "@/utils";
import { useEffect, useState } from "react";
import { MdKeyboardArrowRight } from "react-icons/md";

const NewDateScheduler = ({
  taskSelecionada,
  selectedDateTime,
  haTask,
  idNegocio = null,
  idCliente = null,
  form,
  defaultValue,
  hasClient = false,
}: any) => {
  const [cliente, setCliente] = useState([]);
  const [funis, setFunis] = useState<any[]>([]);
  const [negociosCliente, setNegociosCliente] = useState([]);
  // const [tipoAgendamentoCreate, setTipoAgendamentoCreate] = useState<any[]>([]);
  const [tipoSelect, setTipoSelect] = useState<any>(1);
  const [selectedFunilDestiny, setSelectedFunilDestiny] = useState<any>("");
  const [etapas, setEtapas] = useState<any[]>([]);

  const optionsVerdade = getOptionsFromEnum(Verdade, Desc_Verdade);
  const optionsUrgencia = getOptionsFromEnum(Urgencia, Desc_Urgencia);
  const optionsTipoTarefa = getOptionsFromEnum(TipoTarefa, Desc_TipoTarefa);

  const { usuario } = useAuth();
  const { isMobile } = useScreenContext();

  // Leo - Será utilizado Enum

  // const arrayOrigem = [
  //   { value: "1", label: "Baixa" },
  //   { value: "2", label: "Média" },
  //   { value: "3", label: "Alta" },
  // ];

  useEffect(() => {
    // const optionsAgendamento = [
    //   {
    //     value: "1",
    //     label: "Evento com o Cliente",
    //   },
    //   {
    //     value: "2",
    //     label: "Evento Pessoal",
    //   },
    // ];
    // setTipoAgendamentoCreate(optionsAgendamento);
    const buscarCliente = async () => {
      try {
        const response = await listarContatos({
          id_usuario: usuario.id_usuario,
        });
        const clientesNumerico = response.map((cliente: any) => ({
          value: cliente.id_cliente,
          label: cliente.nome_cliente,
        }));
        setCliente(clientesNumerico);
      } catch (error) {
        console.error("Erro ao buscar clientes:", error);
      }
    };
    buscarCliente();
  }, []);

  const listarFunis = () => {
    listarTodosKanbans().then((res) => setFunis(res));
  };

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

  useEffect(() => {
    if (idCliente !== null) {
      buscarNegociosDoCliente(idCliente);
    } else {
      setNegociosCliente([]);
    }
  }, [idCliente]);

  const handleClienteSelecionadoChange = (selectedOption: any) => {
    buscarNegociosDoCliente(selectedOption.value);
  };
  const buscarNegociosDoCliente = async (idCliente: any) => {
    const response = await listarNegociosCliente({
      cliente_coleta: idCliente,
    });
    const negocios = response.map((negocio: any) => ({
      value: negocio.id_coleta,
      label: negocio.nome_negocio_coleta,
    }));
    setNegociosCliente(negocios);
  };
  const handleChangeTypeScheduler = (type: any) => {
    setTipoSelect(type);
  };

  return (
    <>
      <div className="flex flex-col gap-2">
        {!idCliente && (
          <InputGroup>
            <InputSelectComponent
              formulario={form}
              name="tipo_agendamento"
              label="Tipo Agendamento *"
              width={isMobile ? "w-full" : "w-1/4"}
              options={optionsTipoTarefa}
              defaultValue={tipoSelect}
              onChange={(e: any) => handleChangeTypeScheduler(e.value)}
              // required
              // error="Preencha o Cliente"
            />
          </InputGroup>
        )}
        <InputGroup>
          {/* Este grupo quero que o primeiro e o ultimo ocupe, uns 25% da tela e os outros dois o restante*/}
          <InputSelectComponent
            formulario={form}
            name="urgencia_agendamento"
            label="Urgência *"
            width={isMobile ? "w-full" : "w-1/4"}
            options={optionsUrgencia}
            // required
            // error="Preencha a Urgência"
          />
          {tipoSelect == TipoTarefa.Cliente && (
            <>
              <InputSelectComponent
                formulario={form}
                name="cod_cliente"
                disabled={hasClient}
                label="Cliente *"
                width={isMobile ? "w-full" : "w-1/4"}
                options={cliente}
                defaultValue={idCliente != null && idCliente}
                onChange={handleClienteSelecionadoChange}
                // required={tipoSelect == TipoTarefa.Cliente}
                // error="Selecione um Cliente"
                // disabled={idCliente != null || tipoSelect != TipoTarefa.Cliente}
              />

              <InputSelectComponent
                formulario={form}
                name="nome_negocio"
                label="Negócio *"
                disabled={hasClient}
                width={isMobile ? "w-full" : "w-1/4"}
                options={negociosCliente}
                defaultValue={idNegocio != null && idNegocio}
                isMulti={true}
                // required={tipoSelect == TipoTarefa.Cliente}
                // error="Preencha o nome do Negócio"
                // disabled={idNegocio != null || tipoSelect != TipoTarefa.Cliente}
              />

              <InputSelectComponent
                formulario={form}
                name="visita_cliente_agendamento"
                label="Visita ao Cliente? *"
                width={isMobile ? "w-full" : "w-1/4"}
                options={optionsVerdade}
                // required={tipoSelect == TipoTarefa.Cliente}
                // error="Informe se é uma visita ao cliente"
                // disabled={idCliente != null || tipoSelect != TipoTarefa.Cliente}
                // defaultValue={defaultValues && defaultValues["visita_cliente_agendamento"]}
              />
            </>
          )}
        </InputGroup>

        <InputGroup className="items-center">
          <Input
            formulario={form}
            label="Data Início *"
            mascara="data"
            name="dt_inicio_agendamento"
            defaultValue={selectedDateTime && getDateBrasil(undefined, selectedDateTime)}
            // required
            // error="Preencha a data"
          />

          <Input
            formulario={form}
            label="Hora Início *"
            type="time"
            name="hora_inicio_agendamento"

            // required
            // error="Preencha a hora"
          />
        </InputGroup>

        <InputGroup className="items-center ">
          <Input
            formulario={form}
            name="dt_fim_agendamento"
            label="Data Fim"
            mascara="data"
          />

          <Input
            formulario={form}
            name="hora_fim_agendamento"
            type="time"
            label="Hora Fim"
          />
        </InputGroup>

        {/* * OS 323669 - Leonardo
         * A princípio não faremos esta automatização
         *  */}
        {/* {tipoSelect == 1 && ( */}
        {false && (
          <div className="relative border rounded-md p-3 border-black border-opacity-50">
            <p className="text-black absolute bg-white px-2 top-[-13px]">
              Quando finalizar, mover card
            </p>
            <InputGroup className="items-center">
              <div className="flex flex-col sm:flex-row mt-2 items-center w-full gap-4">
                <InputSelectComponent
                  name="acao_card_paralelizacao"
                  label="Ação?"
                  options={[
                    { label: "Mover", value: "1" },
                    { label: "Duplicar", value: "0" },
                  ]}
                  formulario={form}
                  width=""
                />
                <InputSelectComponent
                  name="funil_destino"
                  label="Funil"
                  formulario={form}
                  options={funis.map((funil: any) => ({
                    value: String(funil.id_funil),
                    label: funil.titulo_funil,
                  }))}
                  onChange={(e: any) => {
                    setSelectedFunilDestiny(String(e.value));
                  }}
                  // defaultValue={selectedFunilDestiny && selectedFunilDestiny}
                  error="Selecione um funil"
                  required={tipoSelect == TipoTarefa.Cliente}
                />
                <MdKeyboardArrowRight
                  className={`w-20 rotate-90 sm:rotate-0 mt-2 sm:mt-0`}
                />
                <InputSelectComponent
                  name="etapa_destino_funil_paralelo"
                  label="Etapa"
                  formulario={form}
                  options={etapas
                    .filter(
                      (etapa: any) =>
                        etapa.grupo_etapa_funil == selectedFunilDestiny,
                    )
                    .map((etapa: any) => ({
                      value: String(etapa.id_etapa_funil),
                      label: etapa.titulo_etapa_funil,
                    }))}
                  // defaultValue={
                  //   funis.find(
                  //     (funil: any) => funil.id_funil == selectedFunilDestiny
                  //   )?.listas_kanban[0]?.id_etapa_funil
                  // }
                  error="Selecione uma etapa"
                  required={tipoSelect == TipoTarefa.Cliente}
                />
              </div>
            </InputGroup>
          </div>
        )}
        <InputGroup className="mb-5 ">
          <Input
            formulario={form}
            type="textarea"
            label="Descrição *"
            name="descricao_agendamento"
            // required
            // error="Preencha a Descrição"
          />
        </InputGroup>
      </div>
    </>
  );
};

export default NewDateScheduler;