/**
 * Person list block — inspector + server-side preview.
 */
import { InspectorControls, useBlockProps } from '@wordpress/block-editor';
import ServerSideRender from '@wordpress/server-side-render';
import { Spinner } from '@wordpress/components';
import { __ } from '@wordpress/i18n';

import PersonListInspector from './person-list-inspector';
import './editor.scss';

const FALLBACK_DEFAULTS = {
	archiveColumnsDesktop: 6,
	archiveColumnsLaptop: 4,
	archiveColumnsTablet: 3,
	archiveColumnsMobile: 2,
	archiveItemsPerPage: 12,
	searchItemsPerPage: 12,
};

export default function Edit({ attributes, setAttributes }) {
	const props = useBlockProps({
		className: 'movie-engine-person-list-block-editor',
	});

	const defaults =
		typeof movieEnginePersonListDefaults !== 'undefined' && movieEnginePersonListDefaults
			? movieEnginePersonListDefaults
			: FALLBACK_DEFAULTS;

	return (
		<>
			<InspectorControls>
				<PersonListInspector
					attributes={attributes}
					setAttributes={setAttributes}
					defaults={defaults}
				/>
			</InspectorControls>
			<div {...props}>
				<div className="movie-engine-person-list-block-editor__preview movie-engine-plugin">
					<ServerSideRender
						block="cine-movie-engine/person-list"
						attributes={attributes}
						LoadingResponsePlaceholder={() => (
							<p className="movie-engine-person-list-block-editor__preview-loading">
								<Spinner />
								{__('Loading preview…', 'cine-movie-engine')}
							</p>
						)}
						ErrorResponsePlaceholder={() => (
							<p className="movie-engine-person-list-block-editor__preview-loading">
								{__(
									'Preview unavailable. Check the front end or try saving the page.',
									'cine-movie-engine'
								)}
							</p>
						)}
					/>
				</div>
			</div>
		</>
	);
}
