import { useScreenContext } from "@/src/contexts/ScreenContext";
import { GetForm } from "@/utils";
import { useState } from "react";
import { FaLongArrowAltRight } from "react-icons/fa";
import { MdClose } from "react-icons/md";
import * as yup from "yup";

const CardDocumentosPersonalizados = ({
  etapaAuto,
  perfilAtual,
  etapaDestino,
  funilDestino,
  funis,
  funilCount,
  etapaCount,
  perfisCount,
  etapas,
  perfis,
  isLoading,
  // onSubmitFunction,
  // removerAutomatizacao,
  automacaoDocumentos,
  indexCard,
}: any) => {
  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 removerAutomatizacaoSelecionada = () => {
  //   Swal.fire({
  //     title: "Excluir Configuração?",
  //     text: "A exclusão da configuração de etapas é Irreversível!",
  //     icon: "warning",
  //     showCancelButton: true,
  //     confirmButtonColor: "#3085d6",
  //     cancelButtonColor: "#d33",
  //     confirmButtonText: "Excluir",
  //     cancelButtonText: "Cancelar",
  //   }).then((result) => {
  //     if (result.isConfirmed) {
  //       removerAutomatizacao(
  //         etapaAuto["etapa_automacao_documentos_personalizados"]
  //       );
  //     }
  //   });
  // };

  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">
              <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 == "*" || funilDestino == "todos"
                    ? "Todas os Funis"
                    : 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 == "*" || etapaDestino == "todos"
                    ? "Todas as Etapas"
                    : etapaDestino?.titulo_etapa_funil}
                </div>
              </div>
              <div className="p-2 text-center w-full">
                <div className="bg-white dark:bg-black rounded p-1">
                  {perfilAtual && perfilAtual.length == perfis
                    ? "Todos os Perfis"
                    : perfilAtual && perfilAtual.length > 0
                      ? perfilAtual
                          .filter(
                            (perfil: any) =>
                              perfil.nome_perfil !== "Administrador"
                          )
                          .map((perfil: any) => perfil.nome_perfil)
                          .join(", ")
                      : "Todos os Perfis"}
                </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">
            <button
              type="button"
              className="rounded-full p-3 hover:bg-black-2 hover:bg-opacity-20 hover:text-white"
            >
              <MdClose />
            </button>
          </td>
          <td className="p-2 text-center">
            <div className="bg-white dark:bg-black rounded p-1">
              {funilDestino == "*" || funilDestino == "todos"
                ? "Todas os Funis"
                : 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 == "*" || etapaDestino == "todos"
                ? "Todas as Etapas"
                : etapaDestino?.titulo_etapa_funil}
            </div>
          </td>
          <td className="w-0">
            <FaLongArrowAltRight />
          </td>

          <td className="p-2 text-center">
            <div className="p-2 text-center w-full">
              <div className="bg-white dark:bg-black rounded p-1">
                {perfilAtual && perfilAtual.length == perfis
                  ? "Todos os Perfis"
                  : perfilAtual && perfilAtual.length > 0
                    ? perfilAtual
                        .filter(
                          (perfil: any) =>
                            perfil.nome_perfil !== "Administrador"
                        )
                        .map((perfil: any) => perfil.nome_perfil)
                        .join(", ")
                    : "Todos os Perfis"}
              </div>
            </div>
          </td>
        </tr>
      )}
    </>
  );
};

export default CardDocumentosPersonalizados;