"use client";
import EditorJodit from "@/components/EditorJodit";
import Input from "@/components/Forms/Input";
import InputGroup from "@/components/Forms/InputGroup";
import InputSelectComponent from "@/components/Forms/InputSelect";
import {
  opcoesTipoNotificacaoComTodos,
  paraListaDeTipos,
  tagsModeloNotificacao,
} from "@/constants/modeloNotificacao";
import { TipoNotificacaoCanal } from "@/enums/enums";
import { GetForm } from "@/utils";
import { useState } from "react";

const FormModeloEmail = ({
  onSubmitFunction,
  defaultValues,
  disabledFields,
  children,
  ...rest
}: any) => {
  const { handleSubmit, ...form } = GetForm();

  const [tiposNotificacao, setTiposNotificacao] = useState<string[]>(
    paraListaDeTipos(defaultValues?.tipo_notificacao)
  );

  const ehEmail = tiposNotificacao.includes(TipoNotificacaoCanal.Email);

  const handleDragStart = (e: React.DragEvent, value: string) => {
    e.dataTransfer.setData("text/plain", value);
  };

  return (
    <>
      <div className="mb-4 p-4 border rounded-lg bg-gray-50 shadow-sm">
        <p className="font-semibold text-gray-700 mb-3">
          Tags Disponíveis para uso nos Modelos de Notificação:
        </p>
        <div className="flex flex-wrap gap-3">
          {tagsModeloNotificacao.map((field, index) => (
            <div
              key={index}
              draggable
              onDragStart={(e) => handleDragStart(e, field.value)}
              className="px-4 py-2 bg-white border rounded-lg shadow-md cursor-move transition-all
                   hover:bg-blue-100 hover:border-blue-400 hover:shadow-lg
                   active:bg-blue-200 active:shadow-sm"
            >
              <span className="text-sm font-medium text-gray-800">
                {field.label}
              </span>
            </div>
          ))}
        </div>
      </div>

      <form onSubmit={handleSubmit(onSubmitFunction)} {...rest}>
        <InputGroup>
          <Input
            name="nome"
            label="Nome"
            formulario={form}
            error={"Preencha o Nome do modelo"}
            required
            defaultValue={defaultValues && defaultValues["nome"]}
            disabled={disabledFields?.some((field: string) => field == "nome")}
          />
          <InputSelectComponent
            name="tipo_notificacao"
            label="Tipo de Notificação"
            formulario={form}
            options={opcoesTipoNotificacaoComTodos}
            isMulti
            error="Selecione o Tipo de Notificação"
            required
            defaultValue={
              defaultValues?.tipo_notificacao || TipoNotificacaoCanal.Email
            }
            onChange={(selecionados: any) =>
              setTiposNotificacao(
                selecionados?.length ? paraListaDeTipos(selecionados) : []
              )
            }
            disabled={disabledFields?.some(
              (field: string) => field == "tipo_notificacao"
            )}
          />
        </InputGroup>


        {ehEmail && (
          <InputGroup>
            <Input
              name="assunto"
              label="Assunto"
              formulario={form}
              defaultValue={defaultValues && defaultValues["assunto"]}
              disabled={disabledFields?.some(
                (field: string) => field == "assunto"
              )}
            />
          </InputGroup>
        )}

        <InputGroup>
          <Input
            name="titulo"
            label="Título"
            formulario={form}
            error={"Preencha o Título"}
            required
            defaultValue={defaultValues && defaultValues["titulo"]}
            disabled={disabledFields?.some(
              (field: string) => field == "titulo"
            )}
          />
        </InputGroup>
        <InputGroup>
          <EditorJodit
            className="mt-1 "
            name="corpo_email"
            label={ehEmail ? "Corpo do E-mail" : "Corpo da Mensagem"}
            formulario={form}
            error="O conteúdo da notificação é obrigatório"
            required
            defaultValue={defaultValues && defaultValues["corpo_email"]}
          />
        </InputGroup>
        {children}
      </form>
    </>
  );
};

export default FormModeloEmail;