// Register test plugin; it also works in the DevTools console.
const {createElement: el, useState} = wp.element;
const {useSelect} = wp.data;
const {useEntityProp} = wp.coreData;
const registerPlugin = wp.plugins.registerPlugin;
const PluginDocumentSettingPanel = wp.editor.PluginDocumentSettingPanel;
const {TextControl} = wp.components;

function TestTermMetaControl() {
    const categoryId = useSelect( (select) => {
        return select('core/editor').getCurrentPost()?.categories?.[0];
    }, []);

    const [meta, setMeta] = useEntityProp('taxonomy', 'category', 'meta', categoryId);

    console.log('first category term id use for testing:', categoryId)
    console.log('meta:', meta)

    const handleInputChange = (newValue) => {
        setMeta({...meta, test_term_meta_field: newValue});
    };

    return el(PluginDocumentSettingPanel, {
        name: 'test-term-meta-field-panel',
        title: 'Test Term Meta Field'
    }, el(TextControl, {
        label: 'Test Term Meta Field',
        value: meta?.test_term_meta_field ?? '',
        onChange: handleInputChange,
        __next40pxDefaultSize: true,
        __nextHasNoMarginBottom: true
    }))
}

registerPlugin('test-term-meta-field-plugin', {
    render: TestTermMetaControl,
});