import { InspectorControls } from '@wordpress/block-editor';
import {
	__experimentalToolsPanel as ToolsPanel,
	__experimentalToolsPanelItem as ToolsPanelItem,
	FormTokenField,
	TextControl,
} from '@wordpress/components';
import { memo } from '@wordpress/element';
import { __ } from '@wordpress/i18n';

/**
 * Internal dependencies.
 */
import InspectorColor from '@spectra-components/inspector-color';

const defaultSortList = [
	{
		label: __( 'Sort by title (A-Z)', 'spectra-pro' ),
		value: 'post_title|asc',
	},
	{
		label: __( 'Sort by title (Z-A)', 'spectra-pro' ),
		value: 'post_title|desc',
	},
	{ label: __( 'Sort by newest', 'spectra-pro' ), value: 'post_date|desc' },
	{ label: __( 'Sort by oldest', 'spectra-pro' ), value: 'post_date|asc' },
	{ label: __( 'Post ID descending', 'spectra-pro' ), value: 'post_id|desc' },
	{ label: __( 'Post ID ascending', 'spectra-pro' ), value: 'post_id|asc' },
	{
		label: __( 'Modified last', 'spectra-pro' ),
		value: 'post_modified|desc',
	},
	{
		label: __( 'Modified recently', 'spectra-pro' ),
		value: 'post_modified|asc',
	},
	{
		label: __( 'Sort by author (A-Z)', 'spectra-pro' ),
		value: 'post_author|asc',
	},
	{
		label: __( 'Sort by author (Z-A)', 'spectra-pro' ),
		value: 'post_author|desc',
	},
];

const BlockSettings = memo( ( props ) => {
	const {
		clientId,
		setAttributes,
		attributes: { placeholder, sortList },
	} = props;

	// Default sortList values.
	const defaultSortListValues = [
		'post_title|asc',
		'post_title|desc',
		'post_date|desc',
		'post_date|asc',
		'post_id|desc',
		'post_id|asc',
		'post_modified|desc',
		'post_modified|asc',
		'post_author|asc',
		'post_author|desc'
	];

	// Map stored sort values to their corresponding labels for the FormTokenField.
	const selectedLabels = sortList
		? sortList.map( ( value ) => {
				const found = defaultSortList.find(
					( item ) => item.value === value
				);
				return found ? found.label : value;
		  } )
		: [];

	// Prepare suggestions as a list of labels, excluding already selected ones.
	const suggestions = defaultSortList
		.filter( ( item ) => ! selectedLabels.includes( item.label ) )
		.map( ( item ) => item.label );

	const defaultPlaceholder = '';

	return (
		<InspectorControls group="settings">
			<ToolsPanel 
				label={ __( 'General', 'spectra-pro' ) }
				resetAll={ () => {
					setAttributes( {
						placeholder: defaultPlaceholder,
						sortList: defaultSortListValues,
					} );
				} }
				panelId={ clientId }
			>
				<ToolsPanelItem
					hasValue={ () => !!sortList && JSON.stringify( sortList ) !== JSON.stringify( defaultSortListValues ) }
					label={ __( 'Sorting Options', 'spectra-pro' ) }
					onDeselect={ () => setAttributes( { sortList: defaultSortListValues } ) }
					resetAllFilter={ () => ( { sortList: defaultSortListValues } ) }
					isShownByDefault
					panelId={ clientId }
				>
					<FormTokenField
						label={ __( 'Sorting Options', 'spectra-pro' ) }
						value={ selectedLabels }
						suggestions={ suggestions }
						onChange={ ( newLabels ) => {
							const newSortList = newLabels.map( ( label ) => {
								const found = defaultSortList.find(
									( item ) => item.label === label
								);
								return found ? found.value : label;
							} );
							setAttributes( { sortList: newSortList } );
						} }
						__experimentalAutoSelectFirstMatch
						__experimentalExpandOnFocus
						__next40pxDefaultSize
						__nextHasNoMarginBottom
					/>
				</ToolsPanelItem>
				<ToolsPanelItem
					hasValue={ () =>
						placeholder !== undefined && placeholder !== defaultPlaceholder
					}
					label={ __( 'Placeholder', 'spectra-pro' ) }
					onDeselect={ () =>
						setAttributes( { placeholder: defaultPlaceholder } )
					}
					resetAllFilter={ () => ( {
						placeholder: defaultPlaceholder,
					} ) }
					isShownByDefault
					panelId={ clientId }
				>
					<TextControl
						__next40pxDefaultSize
						__nextHasNoMarginBottom
						label={ __( 'Placeholder', 'spectra-pro' ) }
						value={ placeholder }
						onChange={ ( value ) => {
							setAttributes( { placeholder: value } );
						} }
					/>
				</ToolsPanelItem>
			</ToolsPanel>
		</InspectorControls>
	);
} );

/**
 * The color settings.
 *
 * @since x.x.x
 *
 * @param {Object} props The element props.
 * @return {Element} The rendered settings.
 */
const ColorSettings = memo( ( props ) => {
	const {
		clientId,
		setAttributes,
		attributes: {
			textColorHover,
			backgroundColorHover,
			backgroundGradientHover,
		},
	} = props;

	return (
		<InspectorColor
			settings={ [
				{
					colorValue: textColorHover,
					label: __( 'Text Focus/Hover', 'spectra-pro' ),
					onColorChange: ( value ) =>
						setAttributes( { textColorHover: value } ),
					resetAllFilter: () =>
						setAttributes( { textColorHover: undefined } ),
				},
				{
					colorValue: backgroundColorHover,
					gradientValue: backgroundGradientHover,
					label: __( 'Background Focus/Hover', 'spectra-pro' ),
					onColorChange: ( value ) =>
						setAttributes( { backgroundColorHover: value } ),
					onGradientChange: ( value ) =>
						setAttributes( { backgroundGradientHover: value } ),
					resetAllFilter: () =>
						setAttributes( {
							backgroundColorHover: undefined,
							backgroundGradientHover: undefined,
						} ),
				},
			] }
			panelId={ clientId }
		/>
	);
} );

/**
 * The Editor settings.
 *
 * @param {Object} props The element props.
 * @since x.x.x
 * @return {Element} The rendered settings.
 */
const Settings = ( props ) => (
	<>
		<BlockSettings { ...{ ...props } } />
		<ColorSettings { ...{ ...props } } />
	</>
);

export default memo( Settings );
