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

const TYPE_OPTIONS = [
	{ label: __('Genre', 'cine-movie-engine'), value: 'genre' },
	{ label: __('Year', 'cine-movie-engine'), value: 'year' },
	{ label: __('Tag', 'cine-movie-engine'), value: 'tag' },
	{ label: __('Country', 'cine-movie-engine'), value: 'country' },
	{ label: __('Language', 'cine-movie-engine'), value: 'language' },
	{ label: __('Studio', 'cine-movie-engine'), value: 'studio' },
	{ label: __('Network', 'cine-movie-engine'), value: 'network' },
	{ label: __('Quality', 'cine-movie-engine'), value: 'quality' },
	{ label: __('Actor', 'cine-movie-engine'), value: 'actor' },
	{ label: __('Director', 'cine-movie-engine'), value: 'director' },
	{ label: __('Creator', 'cine-movie-engine'), value: 'creator' },
];

export default function TaxonomiesInspector({ attributes, setAttributes }) {
	const {
		type,
		layout,
		title,
		showViewAll,
		viewAllUrl,
		viewAllText,
		columns,
		columnsLaptop,
		columnsTablet,
		columnsMobile,
		limit,
		orderby,
		order,
		hideEmpty,
		showCount,
		gap,
		autoplay,
		autoplaySpeed,
		loop,
		showDots,
		pauseOnHover,
		showImage,
		include,
		exclude,
		ratio,
		customRatio,
		customClass,
	} = attributes;

	const showGrid = layout === 'grid' || layout === 'slider';

	return (
		<>
			<PanelBody title={__('Taxonomy & layout', 'cine-movie-engine')} initialOpen={true}>
				<SelectControl
					label={__('Taxonomy', 'cine-movie-engine')}
					value={type}
					options={TYPE_OPTIONS}
					onChange={(v) => setAttributes({ type: v || 'genre' })}
				/>
				<SelectControl
					label={__('Layout', 'cine-movie-engine')}
					value={layout}
					options={[
						{ label: __('Pills', 'cine-movie-engine'), value: 'pills' },
						{ label: __('Grid', 'cine-movie-engine'), value: 'grid' },
						{ label: __('Slider', 'cine-movie-engine'), value: 'slider' },
					]}
					onChange={(v) => setAttributes({ layout: v || 'pills' })}
				/>
				<TextControl
					label={__('Section title', 'cine-movie-engine')}
					value={title}
					onChange={(v) => setAttributes({ title: v || '' })}
				/>
				<ToggleControl
					label={__('Show “View all” link', 'cine-movie-engine')}
					checked={!!showViewAll}
					onChange={(v) => setAttributes({ showViewAll: v })}
				/>
				<TextControl
					label={__('View all URL (optional)', 'cine-movie-engine')}
					value={viewAllUrl}
					onChange={(v) => setAttributes({ viewAllUrl: v || '' })}
				/>
				<TextControl
					label={__('View all label (optional)', 'cine-movie-engine')}
					value={viewAllText}
					onChange={(v) => setAttributes({ viewAllText: v || '' })}
				/>
			</PanelBody>

			<PanelBody title={__('Terms query', 'cine-movie-engine')} initialOpen={true}>
				<RangeControl
					label={__('Max terms (0 = unlimited)', 'cine-movie-engine')}
					value={limit > 0 ? limit : 0}
					onChange={(v) => setAttributes({ limit: v > 0 ? v : 0 })}
					min={0}
					max={200}
				/>
				<SelectControl
					label={__('Order by', 'cine-movie-engine')}
					value={orderby}
					options={[
						{ label: __('Name', 'cine-movie-engine'), value: 'name' },
						{ label: __('Slug', 'cine-movie-engine'), value: 'slug' },
						{ label: __('Term ID', 'cine-movie-engine'), value: 'term_id' },
						{ label: __('Count', 'cine-movie-engine'), value: 'count' },
					]}
					onChange={(v) => setAttributes({ orderby: v || 'name' })}
				/>
				<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' })}
				/>
				<ToggleControl
					label={__('Hide empty terms', 'cine-movie-engine')}
					checked={hideEmpty !== false}
					onChange={(v) => setAttributes({ hideEmpty: v })}
				/>
				<ToggleControl
					label={__('Show post counts', 'cine-movie-engine')}
					checked={showCount !== false}
					onChange={(v) => setAttributes({ showCount: v })}
				/>
				<TextControl
					label={__('Include term IDs', 'cine-movie-engine')}
					value={include}
					onChange={(v) => setAttributes({ include: v || '' })}
					help={__('Comma-separated term IDs.', 'cine-movie-engine')}
				/>
				<TextControl
					label={__('Exclude term IDs', 'cine-movie-engine')}
					value={exclude}
					onChange={(v) => setAttributes({ exclude: v || '' })}
					help={__('Comma-separated term IDs.', 'cine-movie-engine')}
				/>
			</PanelBody>

			{showGrid && (
				<PanelBody title={__('Grid & spacing', 'cine-movie-engine')} initialOpen={false}>
					<RangeControl
						label={__('Columns — desktop', 'cine-movie-engine')}
						value={columns > 0 ? columns : 4}
						onChange={(v) => setAttributes({ columns: v > 0 ? v : 4 })}
						min={1}
						max={15}
					/>
					<RangeControl
						label={__('Columns — laptop', 'cine-movie-engine')}
						value={columnsLaptop > 0 ? columnsLaptop : 4}
						onChange={(v) => setAttributes({ columnsLaptop: v > 0 ? v : 4 })}
						min={1}
						max={15}
					/>
					<RangeControl
						label={__('Columns — tablet', 'cine-movie-engine')}
						value={columnsTablet > 0 ? columnsTablet : 3}
						onChange={(v) => setAttributes({ columnsTablet: v > 0 ? v : 3 })}
						min={1}
						max={15}
					/>
					<RangeControl
						label={__('Columns — mobile', 'cine-movie-engine')}
						value={columnsMobile > 0 ? columnsMobile : 2}
						onChange={(v) => setAttributes({ columnsMobile: v > 0 ? v : 2 })}
						min={1}
						max={15}
					/>
					<TextControl
						label={__('Gap (px)', 'cine-movie-engine')}
						value={gap}
						onChange={(v) => setAttributes({ gap: v || '15' })}
					/>
					<ToggleControl
						label={__('Show term images (card layouts)', 'cine-movie-engine')}
						checked={showImage !== false}
						onChange={(v) => setAttributes({ showImage: v })}
					/>
					<SelectControl
						label={__('Card ratio', 'cine-movie-engine')}
						value={ratio}
						options={[
							{ label: __('Landscape', 'cine-movie-engine'), value: 'landscape' },
							{ label: __('Portrait', 'cine-movie-engine'), value: 'portrait' },
							{ label: __('Custom (set below)', 'cine-movie-engine'), value: 'custom' },
						]}
						onChange={(v) => setAttributes({ ratio: v || 'landscape' })}
					/>
					{ratio === 'custom' && (
						<TextControl
							label={__('Custom ratio (e.g. 16/9)', 'cine-movie-engine')}
							value={customRatio}
							onChange={(v) => setAttributes({ customRatio: v || '' })}
						/>
					)}
				</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>
		</>
	);
}
