import EditorQuill from "@/components/EditorQuill";
import PopoverCorFunil from "@/components/Kanban/popoverCorFunil";
import { useScreenContext } from "@/src/contexts/ScreenContext";
import { useEffect, useState } from "react";

const ConfiguracoesBasicasEtapa = ({
  form,
  defaultValues,
  dadosFunil,
}: any) => {
  const { isSmallDesktop } = useScreenContext();
  const [content, setContent] = useState("");
  const [isClient, setIsClient] = useState(false);

  useEffect(() => {
    setContent(defaultValues?.["informacoes_etapa_funil"] || "");
  }, [defaultValues]);

  const handleChange = (value: string) => {
    setContent(value);
    form.setValue("informacoes_etapa_funil", value);
  };

  return (
    <div>
      <div className="w-full text-center bg-black-2/10 rounded p-1 font-bold">
        Cores da Etapa e Informações Básicas da etapa
      </div>
      <div className={`flex ${isSmallDesktop ? "flex-col" : "flex-row"}`}>
        <div className="flex-1">
          <p className="font-bold p-1">Informe a cor para esta Etapa</p>
          <PopoverCorFunil
            defaultValues={
              form.control._formValues["cor_etapa_funil"]
                ? form.control._formValues["cor_etapa_funil"]
                : defaultValues
                  ? defaultValues["cor_etapa_funil"]
                  : dadosFunil.cor_funil
            }
            form={form}
          />
        </div>
        <div className="flex-1">
          <p className="font-bold p-1">
            Informe o que deverá ser feito Nesta Etapa
          </p>
          <EditorQuill value={content} onChange={handleChange} />
        </div>
      </div>
    </div>
  );
};

export default ConfiguracoesBasicasEtapa;