import "quill/dist/quill.snow.css";
import { useId, useMemo, useRef } from "react";
import styles from "./quill.module.css";
import { QuillPlaceholder } from "./QuillPlaceholder";
import { useToolbar } from "./toolbar";
import { useImageUpload } from "./useImageUpload";
import { useReactQuillPackages } from "./useReactQuillPackages";
const style = {
    display: "flex",
    flexDirection: "column",
    height: "100%",
};
export function RichTextArea(props) {
    const pkgs = useReactQuillPackages();
    const quillRef = useRef();
    const { toolbar, customToolbar, className, onImageUpload, onImageUploadError, onImageUploadingChange, ...reactQuillProps } = props;
    const actualToolbar = useToolbar({
        toolbar: props.toolbar,
        customToolbar: props.customToolbar,
    });
    const imageEnabled = !props.formats || props.formats.includes("image");
    const { imageHandler, imageUploading } = useImageUpload({
        pkgs,
        quillRef,
        onImageUpload: imageEnabled ? onImageUpload : undefined,
        onImageUploadError,
        onImageUploadingChange,
    });
    const modules = useMemo(() => {
        return {
            toolbar: actualToolbar,
            imageDropAndPaste: !imageHandler
                ? undefined
                : {
                    handler: imageHandler,
                },
        };
    }, [actualToolbar, imageHandler]);
    const actualClassName = `${className} ${styles.container} ${imageUploading ? styles.containerImageUploading : ""}`;
    const id = useId();
    if (!pkgs) {
        return (<div className={actualClassName} data-rich-text-area-container={id}>
        <QuillPlaceholder {...reactQuillProps} style={style}/>
      </div>);
    }
    return (<div className={actualClassName} data-rich-text-area-container={id}>
      <pkgs.ReactQuill.default {...reactQuillProps} ref={quillRef} style={style} modules={modules} bounds={`[data-rich-text-area-container="${id}"]`}/>
    </div>);
}
//# sourceMappingURL=RichTextArea.jsx.map