/**
 * Inspector — maps to [movie_engine_person_list] attributes.
 */
import {
	PanelBody,
	RangeControl,
	TextControl,
	ToggleControl,
	SelectControl,
} from '@wordpress/components';
import { __ } from '@wordpress/i18n';

export default function PersonListInspector({ attributes, setAttributes, defaults }) {
	const {
		limit,
		columns,
		columnsLaptop,
		columnsTablet,
		columnsMobile,
		orderby,
		order,
		department,
		search,
		enableAjax,
		showFilters,
		filterLayout,
		ratio,
		customRatio,
		cardStyle,
		layout,
		autoplay,
		autoplaySpeed,
		loop,
		pauseOnHover,
		showDots,
		gap,
		customClass,
	} = attributes;

	const colHelp = __('0 = use design settings for this breakpoint.', 'cine-movie-engine');

	return (
		<>
			<PanelBody title={__('Query', 'cine-movie-engine')} initialOpen={true}>
				<RangeControl
					label={__('Items per page', 'cine-movie-engine')}
					value={limit > 0 ? limit : 24}
					onChange={(v) => setAttributes({ limit: v > 0 ? v : 24 })}
					min={1}
					max={100}
				/>
				<SelectControl
					label={__('Order by', 'cine-movie-engine')}
					value={orderby}
					options={[
						{ label: __('Title', 'cine-movie-engine'), value: 'title' },
						{ label: __('Date', 'cine-movie-engine'), value: 'date' },
						{ label: __('Modified', 'cine-movie-engine'), value: 'modified' },
						{ label: __('Random', 'cine-movie-engine'), value: 'rand' },
					]}
					onChange={(v) => setAttributes({ orderby: v || 'title' })}
				/>
				<SelectControl
					label={__('Order', 'cine-movie-engine')}
					value={order}
					options={[
						{ label: __('Ascending', 'cine-movie-engine'), value: 'ASC' },
						{ label: __('Descending', 'cine-movie-engine'), value: 'DESC' },
					]}
					onChange={(v) => setAttributes({ order: v || 'ASC' })}
				/>
				<TextControl
					label={__('Department / known-for (slug)', 'cine-movie-engine')}
					value={department}
					onChange={(v) => setAttributes({ department: v || '' })}
					help={__(
						'Filter by person department meta (e.g. Acting, Directing).',
						'cine-movie-engine'
					)}
				/>
				<TextControl
					label={__('Search keyword (optional)', 'cine-movie-engine')}
					value={search}
					onChange={(v) => setAttributes({ search: v || '' })}
					help={__(
						'Pre-filter the list; URL search still applies when filters are on.',
						'cine-movie-engine'
					)}
				/>
			</PanelBody>

			<PanelBody title={__('Layout & grid', 'cine-movie-engine')} initialOpen={true}>
				<RangeControl
					label={__('Columns — desktop', 'cine-movie-engine')}
					help={colHelp}
					value={columns > 0 ? columns : 0}
					onChange={(v) => setAttributes({ columns: v > 0 ? v : 0 })}
					min={0}
					max={15}
					initialPosition={defaults.archiveColumnsDesktop}
				/>
				<RangeControl
					label={__('Columns — laptop', 'cine-movie-engine')}
					help={colHelp}
					value={columnsLaptop > 0 ? columnsLaptop : 0}
					onChange={(v) => setAttributes({ columnsLaptop: v > 0 ? v : 0 })}
					min={0}
					max={15}
					initialPosition={defaults.archiveColumnsLaptop}
				/>
				<RangeControl
					label={__('Columns — tablet', 'cine-movie-engine')}
					help={colHelp}
					value={columnsTablet > 0 ? columnsTablet : 0}
					onChange={(v) => setAttributes({ columnsTablet: v > 0 ? v : 0 })}
					min={0}
					max={15}
					initialPosition={defaults.archiveColumnsTablet}
				/>
				<RangeControl
					label={__('Columns — mobile', 'cine-movie-engine')}
					help={colHelp}
					value={columnsMobile > 0 ? columnsMobile : 0}
					onChange={(v) => setAttributes({ columnsMobile: v > 0 ? v : 0 })}
					min={0}
					max={15}
					initialPosition={defaults.archiveColumnsMobile}
				/>
				<SelectControl
					label={__('Layout mode', 'cine-movie-engine')}
					value={layout}
					options={[
						{ label: __('Grid', 'cine-movie-engine'), value: 'grid' },
						{ label: __('Slider', 'cine-movie-engine'), value: 'slider' },
					]}
					onChange={(v) => setAttributes({ layout: v || 'grid' })}
				/>
				<SelectControl
					label={__('Card style', 'cine-movie-engine')}
					value={cardStyle}
					options={[
						{ label: __('Classic', 'cine-movie-engine'), value: 'classic' },
						{ label: __('Modern', 'cine-movie-engine'), value: 'modern' },
						{ label: __('Grid', 'cine-movie-engine'), value: 'grid' },
					]}
					onChange={(v) => setAttributes({ cardStyle: v || 'classic' })}
				/>
				<SelectControl
					label={__('Poster ratio', 'cine-movie-engine')}
					value={ratio}
					options={[
						{ label: __('Portrait', 'cine-movie-engine'), value: 'portrait' },
						{ label: __('Landscape', 'cine-movie-engine'), value: 'landscape' },
						{ label: __('Custom (set below)', 'cine-movie-engine'), value: 'custom' },
					]}
					onChange={(v) => setAttributes({ ratio: v || 'portrait' })}
				/>
				{ratio === 'custom' && (
					<TextControl
						label={__('Custom ratio (e.g. 2/3)', 'cine-movie-engine')}
						value={customRatio}
						onChange={(v) => setAttributes({ customRatio: v || '' })}
					/>
				)}
				<TextControl
					label={__('Gap (px)', 'cine-movie-engine')}
					value={gap}
					onChange={(v) => setAttributes({ gap: v || '' })}
					help={__('Example: 15', 'cine-movie-engine')}
				/>
			</PanelBody>

			<PanelBody title={__('Filters & AJAX', 'cine-movie-engine')} initialOpen={false}>
				<ToggleControl
					label={__('Enable AJAX filtering', 'cine-movie-engine')}
					checked={enableAjax !== false}
					onChange={(v) => setAttributes({ enableAjax: v })}
				/>
				<ToggleControl
					label={__('Show person filters', 'cine-movie-engine')}
					checked={!!showFilters}
					onChange={(v) => setAttributes({ showFilters: v })}
				/>
				<SelectControl
					label={__('Filter bar layout', 'cine-movie-engine')}
					value={filterLayout}
					options={[
						{ label: __('Sidebar', 'cine-movie-engine'), value: 'sidebar' },
						{ label: __('Top', 'cine-movie-engine'), value: 'top' },
					]}
					onChange={(v) => setAttributes({ filterLayout: v || 'sidebar' })}
				/>
			</PanelBody>

			{layout === 'slider' && (
				<PanelBody title={__('Slider options', 'cine-movie-engine')} initialOpen={false}>
					<ToggleControl
						label={__('Autoplay', 'cine-movie-engine')}
						checked={!!autoplay}
						onChange={(v) => setAttributes({ autoplay: v })}
					/>
					<RangeControl
						label={__('Autoplay speed (ms)', 'cine-movie-engine')}
						value={autoplaySpeed || 3000}
						onChange={(v) => setAttributes({ autoplaySpeed: v })}
						min={1000}
						max={20000}
						step={500}
					/>
					<ToggleControl
						label={__('Loop', 'cine-movie-engine')}
						checked={!!loop}
						onChange={(v) => setAttributes({ loop: v })}
					/>
					<ToggleControl
						label={__('Pause on hover', 'cine-movie-engine')}
						checked={pauseOnHover !== false}
						onChange={(v) => setAttributes({ pauseOnHover: v })}
					/>
					<ToggleControl
						label={__('Show dots', 'cine-movie-engine')}
						checked={!!showDots}
						onChange={(v) => setAttributes({ showDots: v })}
					/>
				</PanelBody>
			)}

			<PanelBody title={__('Advanced', 'cine-movie-engine')} initialOpen={false}>
				<TextControl
					label={__('Extra CSS class', 'cine-movie-engine')}
					value={customClass}
					onChange={(v) => setAttributes({ customClass: v || '' })}
				/>
			</PanelBody>
		</>
	);
}
