import Button from "@/components/Forms/Button";
import Input from "@/components/Forms/Input";
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 {
  MdDelete,
  MdEdit,
  MdOutlineToggleOff,
  MdOutlineToggleOn,
} from "react-icons/md";
import Swal from "sweetalert2";
import * as yup from "yup";

const CardEtapaAutomatizada = ({
  etapaAuto,
  acaoAtual,
  reacaoAtual,
  etapaDestino,
  funilDestino,
  tipoNegocioAtual,
  funis,
  etapas,
  isLoading,
  removerAutomatizacao,
  onSubmitFunction,
  indexCard,
  tiposNegocios,
  reacoes,
}: 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["id_automatizacao"] = etapaAuto["id_automatizacao"];
    onSubmitFunction(data).then(() => setIsEditCard(false));
  };

  return (
    <>
      {isMobile ? (
        <tr
          className={`hover:bg-primary hover:bg-opacity-20 hover:cursor-pointer ${indexCard % 2 == 1 && "bg-body bg-opacity-10 dark:bg-graydark dark:bg-opacity-50 dark:hover:bg-primary dark:hover:bg-opacity-10"} ${etapaAuto.status_automatizacao == "0" && "opacity-60"}`}
        >
          <td colSpan={6}>
            <div
              className="flex flex-col sm:flex-row items-center"
              onClick={() => setIsEditCard(true)}
            >
              {/* <div className="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>
              {isEditCard && (
                <ModalReact
                  open={isEditCard}
                  onClose={() => setIsEditCard(false)}
                  title={`Automação da: ${acaoAtual?.nome_acao}`}
                >
                  {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={() =>
                            removerAutomatizacao(etapaAuto["id_automatizacao"]).then(() =>
                              setIsEditCard(false)
                            )
                          }
                          type="button"
                          loading={isLoading}
                          className="bg-danger"
                        >
                          Remover
                        </Button>
                        <Button loading={isLoading}>Salvar</Button>
                      </div>
                    </form>
                  )}
                </ModalReact>
              )}
            </div> */}
              <div className="p-2 text-center w-full">
                <div
                  className="flex flex-row justify-center items-center gap-1"
                  onClick={(e) => e.stopPropagation()}
                >
                  <button
                    type="button"
                    onClick={() => setIsEditCard(true)}
                    // className="rounded-full p-3 hover:bg-black-2 hover:bg-opacity-20 hover:text-white"
                    className="navButton buttonWarning"
                  >
                    <MdEdit />
                  </button>
                  <button
                    type="button"
                    onClick={() =>
                      Swal.fire({
                        title: "Confirmar a remoção",
                        icon: "warning",
                        html: "Tem certeza que deseja remover essa automação?",
                        confirmButtonText: "Sim",
                        confirmButtonColor: "#4CAF50",
                        showDenyButton: true,
                        denyButtonText: "Não",
                      }).then((result) => {
                        if (result.isConfirmed) {
                          removerAutomatizacao(etapaAuto["id_automatizacao"]);
                        }
                      })
                    }
                    // className="rounded-full p-3 hover:bg-error hover:bg-opacity-60 hover:text-white"
                    className={`navButton buttonDanger`}
                  >
                    <MdDelete />
                  </button>
                  <button
                    type="button"
                    onClick={() =>
                      Swal.fire({
                        title: `Confirmar a ${etapaAuto.status_automatizacao == "1" ? "Inativação" : "Ativação"}`,
                        icon: "warning",
                        html: `Tem certeza que deseja ${etapaAuto.status_automatizacao == "1" ? "Inativar" : "Ativar"} essa automação?`,
                        confirmButtonText: "Sim",
                        confirmButtonColor: "#4CAF50",
                        showDenyButton: true,
                        denyButtonText: "Não",
                      }).then((result) => {
                        if (result.isConfirmed) {
                          editEtapaAutomatizada({
                            status_automatizacao: !(
                              etapaAuto.status_automatizacao == "1"
                            ),
                          });
                        }
                      })
                    }
                    // className="rounded-full p-3 hover:bg-black-2 hover:bg-opacity-30 hover:text-white"
                    className={`navButton ${etapaAuto.status_automatizacao == "1" ? "buttonSuccess" : "buttonDanger"}`}
                  >
                    {/* {etapaAuto.status_automatizacao == "1" ? "Ativo" : "Inativo"} */}
                    {etapaAuto.status_automatizacao == "1" ? (
                      <MdOutlineToggleOn />
                    ) : (
                      <MdOutlineToggleOff />
                    )}
                  </button>
                </div>
              </div>
              <div className="p-2 text-center w-full">
                <div className="bg-white dark:bg-black rounded p-1">
                  {tipoNegocioAtual?.nome_tipo_negocio}
                </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">
                  {acaoAtual?.nome_acao}
                </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">
                  {reacaoAtual?.nome_reacao}
                </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"} ${etapaAuto.status_automatizacao == "0" && "opacity-60"}`}
        >
          <td className="">
            <div className="flex flex-row items-center justify-center gap-1">
              <button
                type="button"
                onClick={() => setIsEditCard(true)}
                // className="rounded-full p-3 hover:bg-black-2 hover:bg-opacity-20 hover:text-white"
                className="navButton buttonWarning"
              >
                <MdEdit />
              </button>
              <button
                type="button"
                onClick={() =>
                  Swal.fire({
                    title: "Confirmar a remoção",
                    icon: "warning",
                    html: "Tem certeza que deseja remover essa automação?",
                    confirmButtonText: "Sim",
                    confirmButtonColor: "#4CAF50",
                    showDenyButton: true,
                    denyButtonText: "Não",
                  }).then((result) => {
                    if (result.isConfirmed) {
                      removerAutomatizacao(etapaAuto["id_automatizacao"]);
                    }
                  })
                }
                // className="rounded-full p-3 hover:bg-error hover:bg-opacity-60 hover:text-white"
                className={`navButton buttonDanger`}
              >
                <MdDelete />
              </button>
              <button
                type="button"
                onClick={() =>
                  Swal.fire({
                    title: `Confirmar a ${etapaAuto.status_automatizacao == "1" ? "Inativação" : "Ativação"}`,
                    icon: "warning",
                    html: `Tem certeza que deseja ${etapaAuto.status_automatizacao == "1" ? "Inativar" : "Ativar"} essa automação?`,
                    confirmButtonText: "Sim",
                    confirmButtonColor: "#4CAF50",
                    showDenyButton: true,
                    denyButtonText: "Não",
                  }).then((result) => {
                    if (result.isConfirmed) {
                      editEtapaAutomatizada({
                        status_automatizacao: !(
                          etapaAuto.status_automatizacao == "1"
                        ),
                      });
                    }
                  })
                }
                // className="rounded-full p-3 hover:bg-black-2 hover:bg-opacity-30 hover:text-white"
                className={`navButton ${etapaAuto.status_automatizacao == "1" ? "buttonSuccess" : "buttonDanger"}`}
              >
                {/* {etapaAuto.status_automatizacao == "1" ? "Ativo" : "Inativo"} */}
                {etapaAuto.status_automatizacao == "1" ? (
                  <MdOutlineToggleOn />
                ) : (
                  <MdOutlineToggleOff />
                )}
              </button>
            </div>
          </td>
          <td className="p-2 text-center">
            <div className="bg-white dark:bg-black rounded p-1">
              {tipoNegocioAtual?.nome_tipo_negocio}
            </div>
          </td>
          <td className="w-0">
            <FaLongArrowAltRight />
          </td>
          <td className="p-2 text-center">
            <div className="bg-white dark:bg-black rounded p-1">
              {acaoAtual?.nome_acao}
            </div>
          </td>
          <td className="w-0">
            <FaLongArrowAltRight />
          </td>
          <td className="p-2 text-center">
            <div className="bg-white dark:bg-black rounded p-1">
              {reacaoAtual?.nome_reacao}
            </div>
          </td>
          <td className="w-0">
            <FaLongArrowAltRight />
          </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)}
          title={`Automação da ação: ${acaoAtual?.nome_acao}`}
        >
          {funilDestino && etapaDestino && (
            <form
              className="p-4 flex flex-col gap-2"
              onSubmit={handleSubmit(editEtapaAutomatizada)}
            >
              <Input label="Ação" value={acaoAtual?.nome_acao} disabled />
              <InputSelectComponent
                name="tipo_negocio_automatizacao"
                label="Tipo de Negócio"
                width="w-full"
                formulario={form}
                options={tiposNegocios.map((tipo: any) => ({
                  value: tipo.id_tipo_negocio,
                  label: tipo.nome_tipo_negocio,
                }))}
                defaultValue={etapaAuto?.tipo_negocio_automatizacao}
                error="Selecione uma ação"
                required
              />
              <InputSelectComponent
                name="reacao_automatizacao"
                label="Reação"
                width="w-full"
                formulario={form}
                options={reacoes.map((reacao: any) => ({
                  value: String(reacao.id_reacao),
                  label: reacao.nome_reacao,
                }))}
                defaultValue={etapaAuto?.reacao_automatizacao}
                error="Selecione uma reação"
                required
              />
              <div>
                <InputSelectComponent
                  name="funil_destino"
                  label="Fluxo"
                  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={() =>
                    removerAutomatizacao(etapaAuto["id_automatizacao"]).then(
                      () => setIsEditCard(false)
                    )
                  }
                  type="button"
                  loading={isLoading}
                  className="bg-danger"
                >
                  Remover
                </Button>
                <Button loading={isLoading}>Salvar</Button>
              </div>
            </form>
          )}
        </ModalReact>
      )}
    </>
  );
};

export default CardEtapaAutomatizada;