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

/**
 * Internal dependencies
 */
import InspectorColor from '@spectra-components/inspector-color';
import DebouncedRangeControl from '@spectra-components/debounced-range-control';

/**
 * Element Sub-settings: General settings, but based on the parent block.
 *
 * @param {Object} props The element props.
 * @since x.x.x
 * @return {Element} The rendered block settings.
 */
const BlockSettings = memo( ( props ) => {
	// Destructure the required props.
	const {
		clientId,
		setAttributes,
		attributes: { midSize },
	} = props;

	// Render the settings.
	return (
		<>
			<InspectorControls group="settings">
				<ToolsPanel
					label={ __( 'Page Number', 'spectra-pro' ) }
					resetAll={ () => {} }
					panelId={ clientId }
				>
					<ToolsPanelItem
						label={ __( 'Number of links', 'spectra-pro' ) }
						hasValue={ () => midSize !== 2 }
						onDeselect={ () => setAttributes( { midSize: 2 } ) }
						resetAllFilter={ () => ( {
							midSize: 2,
						} ) }
						isShownByDefault
					>
						<DebouncedRangeControl
							__next40pxDefaultSize
							__nextHasNoMarginBottom
							label={ __( 'Number of links', 'spectra-pro' ) }
							help={ __(
								'Specify how many links can appear before and after the current page number. Links to the first, current and last page are always visible.',
								'spectra-pro'
							) }
							value={ midSize }
							onChange={ ( value ) => {
								setAttributes( {
									midSize: parseInt( value, 10 ),
								} );
							} }
							min={ 0 }
							max={ 5 }
							withInputField={ false }
							marks={ [
								{ value: 0, label: '0' },
								{ value: 2, label: '2' },
								{ value: 5, label: '5' }
							] }
						/>
					</ToolsPanelItem>
				</ToolsPanel>
			</InspectorControls>
		</>
	);
} );

/**
 * Element Sub-settings: Settings that are injected into Core's Color panel.
 *
 * @param {Object} props The element props.
 * @since x.x.x
 * @return {Element} The rendered block settings.
 */
const ColorSettings = memo( ( props ) => {
	// Destructure the required props.
	const {
		clientId,
		setAttributes,
		attributes: {
			textColorHover,
			textColorActive,
			backgroundColorHover,
			backgroundColorActive,
			backgroundGradientHover,
			backgroundGradientActive,
		},
	} = props;

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

/**
 * The Editor settings for this block.
 *
 * @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 );
