import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
// StyleableTextArea.tsx
import { memo, useEffect, useState, useCallback } from "react";
import { EditorContent } from '@tiptap/react';
import { GetSvgIcon, Loader } from "..";
import TextStyles from "./TextStyles";
import "./style.scss";
const StyleableTextArea = memo(({ placeholder = "", isNextDisabled, className, value, showHeader = true, headerPosition = "top", showError = true, editor, }) => {
    const [isValue, setIsValue] = useState(false);
    const [textAlignment, setTextAlignment] = useState("left");
    const updateAlignment = useCallback((alignment) => {
        const alignments = ["left", "center"];
        let newAlignment = alignment;
        if (alignment === alignments[0] && textAlignment === alignments[0]) {
            newAlignment = alignments[1];
        }
        else if (alignment === alignments[1] && textAlignment === alignments[1]) {
            newAlignment = alignments[0];
        }
        setTextAlignment(newAlignment);
        if (editor) {
            editor.chain().focus().setTextAlign(newAlignment).run();
        }
    }, [editor, textAlignment]);
    useEffect(() => {
        if (editor && value !== editor.getHTML()) {
            editor.commands.setContent(value);
        }
    }, [editor, value]);
    useEffect(() => {
        setIsValue(value !== "");
    }, [value]);
    if (!editor) {
        return null;
    }
    return (_jsx("div", { className: `${className ? className : ""}`, children: isNextDisabled ? (_jsx("span", { className: "loader--draft", children: _jsx(Loader, { width: "32", height: "32" }) })) : (_jsxs("div", { children: [_jsxs("div", { className: `main-draft ${(!isValue && showError) && 'msg-error-draft'}`, children: [showHeader && headerPosition === "top" && (_jsx("div", { className: "draft-head", children: _jsx(TextStyles, { editor: editor, updateAlignment: updateAlignment }) })), _jsx("div", { className: "editor-textarea", children: _jsx(EditorContent, { editor: editor, placeholder: placeholder, style: { textAlign: textAlignment } }) }), showHeader && headerPosition === "bottom" && (_jsx("div", { className: "draft-foot", children: _jsx(TextStyles, { editor: editor, updateAlignment: updateAlignment }) }))] }), (!isValue && showError) && (_jsxs("div", { className: "error-svg-draft", children: [_jsx("span", { className: "error-svg-span", children: _jsx(GetSvgIcon, { iconType: "excalamationCircle", iconSize: "24" }) }), _jsx("span", { children: "Message is empty" })] }))] })) }));
});
StyleableTextArea.displayName = "StyleableTextArea";
export default StyleableTextArea;
