import React, { useEffect, useId, useState } from 'react';
import {Editor} from "@tinymce/tinymce-react";
import { tinyKey } from '../config'
import {useAppSelector} from "../stores/hooks";

export const RichTextField = ({ options, field, form, itemRef, showField }) => {
    const [value, setValue] = useState(null);
    const darkMode = useAppSelector((state) => state.style.darkMode);

    useEffect(() => {
        if (field.value) {
            setValue(field.value);
        }
    }, [field.value]);

    const handleChange = (value) => {
        form.setFieldValue(field.name, value);
        setValue(value);
    };

    return (
        <Editor
            onEditorChange={handleChange}
            value={value || ''}
            apiKey={tinyKey}
            init={{
                plugins:
                    'advlist autolink lists link image charmap print preview anchor' +
                    'searchreplace visualblocks code fullscreen' +
                    'insertdatetime media table paste help wordcount',
                toolbar:
                    'undo redo | formatselect | ' +
                    'bold italic backcolor | alignleft aligncenter ' +
                    'alignright alignjustify | bullist numlist outdent indent | ' +
                    'removeformat | code',

                  content_style: `${darkMode ? 'body { color: #ffffff; }' : ''}`,

            }}
        />
    );
};