import { useEffect, useRef, forwardRef } from "react";

const RichTextEditorRHF = forwardRef(function RichTextEditorRHF(
  { value = "", height = "300px", rhfRegister, rhfValidationRules = "", rhfFieldName },
  ref
) {
  const textareaRef = useRef(null);
  const editorInstanceRef = useRef(null);

  useEffect(() => {
    if (rhfValidationRules != "") rhfRegister(rhfFieldName, rhfValidationRules);
    else rhfRegister(rhfFieldName);

    const textarea = textareaRef.current;

    if (!textarea || editorInstanceRef.current) return;

    const timeout = setTimeout(() => {
      const instance = window.sceditor.create(textarea, {
        format: "bbcode",
        toolbar:
          "bold,italic,underline,strike|left,center,right|size|bulletlist,orderedlist|link,unlink,image,youtube|quote|removeformat,maximize,source",
        style: "/sceditor/minified/themes/content/default.min.css",
        width: "100%",
        height: height,
      });

      if (!instance) return;

      editorInstanceRef.current = instance;
    }, 10);

    return () => {
      clearTimeout(timeout);
      if (editorInstanceRef.current) {
        editorInstanceRef.current.destroy();
        editorInstanceRef.current = null;
      }
    };
  }, []);

  return (
    <textarea
      ref={(node) => {
        textareaRef.current = node;
        if (typeof ref === "function") {
          ref(node);
        } else if (ref) {
          ref.current = node;
        }
      }}
      style={{ width: "100%", height }}
      defaultValue={value}
    />
  );
});

export default RichTextEditorRHF;