import { registerPlugin } from '@wordpress/plugins';

import SidePanel from './SidePanel';
import { PluginDocumentSettingPanel } from '@wordpress/editor';
import { useEntityProp } from '@wordpress/core-data';
import Fields from './Fields';

const CustomFieldsPanel = () => {
	const { postType, fields } = window.jvbFieldConfig || {};
	const [meta, setMeta] = useEntityProp('postType', postType, 'meta');

	if (!fields || !fields.length) {
		return null;
	}

	const setField = (name, value) => setMeta({ ...meta, [name]: value });

	return (
		<PluginDocumentSettingPanel name="jvb-custom-fields" title="Custom Fields">
			{fields.map((field) => (
				<Fields
					key={field.name}
					field={field}
					value={meta?.[field.name]}
					onChange={(value) => setField(field.name, value)}
				/>
			))}
		</PluginDocumentSettingPanel>
	);
};

registerPlugin('jvb-meta-fields', {
	render: SidePanel
});
// registerPlugin('jvb-custom-fields', { render: CustomFieldsPanel });