import Button from "@/components/Forms/Button";
import InputSelectComponent from "@/components/Forms/InputSelect";
import ModalReact from "@/components/Modal/ModalReact";
import { useScreenContext } from "@/src/contexts/ScreenContext";
import { GetForm } from "@/utils";
import { useState } from "react";
import { FaLongArrowAltRight } from "react-icons/fa";
import { HiDuplicate } from "react-icons/hi";
import { MdEdit } from "react-icons/md";
import * as yup from "yup";

const CardFunilParalelo = ({
  etapaAuto,
  etapaOrigem,
  funilOrigem,
  etapaDestino,
  funilDestino,
  funis,
  etapas,
  isLoading,
  removerFunilParalelo,
  onSubmitFunction,
  indexCard,
}: any) => {
  const [isEditCard, setIsEditCard] = useState(false);
  const [yupSchema, setYupSchema] = useState<
    yup.ObjectSchema<{}, yup.AnyObject, {}, "">
  >(yup.object().shape({}));

  const { isMobile } = useScreenContext();

  const { handleSubmit, ...form } = GetForm(yupSchema, setYupSchema);

  const [selectedFunil, setSelectedFunil] = useState<any>(
    funilDestino && funilDestino?.id_funil
  );

  const editEtapaAutomatizada = (data: any) => {
    // data["acao_automatizacao"] = acaoAtual["id_acao"];
    // onSubmitFunction(data).then(() => setIsEditCard(false));
  };

  return (
    <>
      {isMobile ? (
        <tr
          className={`hover:bg-primary hover:bg-opacity-20 ${indexCard % 2 == 1 && "bg-body bg-opacity-10 dark:bg-graydark dark:bg-opacity-50 dark:hover:bg-primary dark:hover:bg-opacity-10"}`}
        >
          <td colSpan={6}>
            <div
              className="flex flex-col sm:flex-row items-center"
              onClick={() => setIsEditCard(true)}
            >
              <div className="p-2 text-center w-full">
                <div className="bg-white dark:bg-black rounded p-1">
                  {funilOrigem?.titulo_funil}
                </div>
              </div>
              {/* <div className="rotate-90 sm:rotate-0">
                <FaLongArrowAltRight />
              </div> */}
              <div className="p-2 text-center w-full">
                <div className="bg-white dark:bg-black rounded p-1">
                  {etapaOrigem?.titulo_etapa_funil}
                </div>
              </div>
              <div className="rotate-90 sm:rotate-0">
                <FaLongArrowAltRight />
              </div>
              <div className="p-2 text-center w-full">
                <div className="bg-white dark:bg-black rounded p-1">
                  {funilDestino?.titulo_funil}
                </div>
              </div>
              {/* <div className="rotate-90 sm:rotate-0">
                <FaLongArrowAltRight />
              </div> */}
              <div className="p-2 text-center w-full">
                <div className="bg-white dark:bg-black rounded p-1">
                  {etapaDestino?.titulo_etapa_funil}
                </div>
              </div>
            </div>
          </td>
        </tr>
      ) : (
        <tr
          className={`hover:bg-primary hover:bg-opacity-20 ${indexCard % 2 == 1 && "bg-body bg-opacity-10 dark:bg-graydark dark:bg-opacity-50 dark:hover:bg-primary dark:hover:bg-opacity-10"}`}
        >
          <td className="w-0 pl-2" onClick={() => setIsEditCard(!isEditCard)}>
            <button
              type="button"
              onClick={() => setIsEditCard(true)}
              className="rounded-full p-3 hover:bg-black-2 hover:bg-opacity-20 hover:text-white"
            >
              <MdEdit />
            </button>
          </td>
          <td className="p-2 text-center">
            <div className="bg-white dark:bg-black rounded p-1">
              {funilOrigem?.titulo_funil}
            </div>
          </td>

          <td className="p-2 text-center">
            <div className="bg-white dark:bg-black rounded p-1">
              {etapaOrigem?.titulo_etapa_funil}
            </div>
          </td>
          <td className="w-0">
            <HiDuplicate />
          </td>
          <td className="p-2 text-center">
            <div className="bg-white dark:bg-black rounded p-1">
              {funilDestino?.titulo_funil}
            </div>
          </td>
          {/* <td className="w-0">
            <FaLongArrowAltRight />
          </td> */}
          <td className="p-2 text-center">
            <div className="bg-white dark:bg-black rounded p-1">
              {etapaDestino?.titulo_etapa_funil}
            </div>
          </td>
        </tr>
      )}
      {isEditCard && (
        <ModalReact open={isEditCard} onClose={() => setIsEditCard(false)}>
          {funilDestino && etapaDestino && (
            <form
              className="p-4 flex flex-col gap-2"
              onSubmit={handleSubmit(editEtapaAutomatizada)}
            >
              <div>
                <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) => setSelectedFunil(String(e.value))}
                  defaultValue={funilDestino?.id_funil}
                  error="Selecione um funil"
                  required
                />
              </div>
              <div>
                {selectedFunil && (
                  <InputSelectComponent
                    name="etapa_destino_automatizacao"
                    label="Etapa Destino"
                    formulario={form}
                    options={etapas
                      .filter(
                        (etapa: any) => etapa.grupo_etapa_funil == selectedFunil
                      )
                      .map((etapa: any) => ({
                        value: String(etapa.id_etapa_funil),
                        label: etapa.titulo_etapa_funil,
                      }))}
                    defaultValue={etapaDestino?.id_etapa_funil}
                    error="Selecione uma etapa"
                    required
                  />
                )}
              </div>
              <div className="flex flex-row w-full justify-center gap-2">
                <Button
                  type="button"
                  onClick={() => setIsEditCard(false)}
                  className="bg-bodydark2"
                >
                  Cancelar
                </Button>
                <Button
                  onClick={() =>
                    removerFunilParalelo(etapaAuto["id_funil_paralelo"]).then(
                      () => setIsEditCard(false)
                    )
                  }
                  type="button"
                  loading={isLoading}
                  className="bg-danger"
                >
                  Remover
                </Button>
                <Button loading={isLoading}>Salvar</Button>
              </div>
            </form>
          )}
        </ModalReact>
      )}
    </>
  );
};

export default CardFunilParalelo;