import { InspectorControls, useBlockProps } from '@wordpress/block-editor';
import { PanelBody, SelectControl, Placeholder } from '@wordpress/components';
import { useEntityProp } from '@wordpress/core-data';
import { useSelect } from '@wordpress/data';
import Fields from '../_meta/Fields';

const Edit = ({ attributes, setAttributes }) => {
	const { fieldName } = attributes;
	const { fields } = window.jvbFieldConfig || {};

	const postType = useSelect(
		(select) => select('core/editor').getCurrentPostType(),
		[]
	);
	const [meta, setMeta] = useEntityProp('postType', postType, 'meta');

	const field = (fields || []).find((f) => f.name === fieldName);

	const blockProps = useBlockProps();

	return (
		<div {...blockProps}>
			<InspectorControls>
				<PanelBody title="Field">
					<SelectControl
						label="Meta field"
						value={fieldName}
						options={[
							{ label: 'Select a field…', value: '' },
							...(fields || []).map((f) => ({ label: f.label || f.name, value: f.name })),
						]}
						onChange={(value) => setAttributes({ fieldName: value })}
					/>
				</PanelBody>
			</InspectorControls>

			{ !field && <Placeholder label="Meta Field" instructions="Select a field in the block settings." /> }

			{ field && (
				<Fields
					field={field}
					value={meta?.[fieldName]}
					onChange={(value) => setMeta({ ...meta, [fieldName]: value })}
					meta={meta}
				/>
			) }
		</div>
	);
};

export default Edit;