import { __ } from '@wordpress/i18n';
import { PanelBody, TextControl, SelectControl, ColorPalette } from '@wordpress/components';
import { useDevice } from '../../../components/controls/DeviceContext';
import UnitValueControl from '../../../components/controls/UnitValueControl';
import { getResponsivePlaceholder, getResponsiveSelectOptions } from '../../../components/controls/responsiveValueUtils';

const EMPTY_RESPONSIVE = { desktop: '', tablet: '', mobile: '' };

export function ListItemGapControl( { attributes, setAttributes } ) {
	const { activeDevice } = useDevice();
	const itemGap = attributes.itemGap || EMPTY_RESPONSIVE;

	return (
		<PanelBody title={ __( 'Items', 'axcelersblocks' ) } initialOpen={ false }>
			<UnitValueControl
				label={ __( 'Item Gap', 'axcelersblocks' ) }
				help={ __( 'Examples: 8px, 1em', 'axcelersblocks' ) }
				value={ itemGap[ activeDevice ] || '' }
				placeholder={ getResponsivePlaceholder( {
					values: itemGap,
					activeDevice,
					fallback: 'e.g., 8px, 1em',
				} ) }
				preset="spacing"
				onChange={ ( value ) =>
					setAttributes( {
						itemGap: { ...itemGap, [ activeDevice ]: value },
					} )
				}
			/>
		</PanelBody>
	);
}

export function ListMarkerGapControl( { attributes, setAttributes } ) {
	const { activeDevice } = useDevice();
	const iconGap = attributes.iconGap || EMPTY_RESPONSIVE;

	return (
		<PanelBody title={ __( 'Marker Spacing', 'axcelersblocks' ) } initialOpen={ false }>
			<UnitValueControl
				label={ __( 'Marker Gap', 'axcelersblocks' ) }
				help={ __( 'Examples: 8px, 0.5em', 'axcelersblocks' ) }
				value={ iconGap[ activeDevice ] || '' }
				placeholder={ getResponsivePlaceholder( {
					values: iconGap,
					activeDevice,
					fallback: 'e.g., 8px, 0.5em',
				} ) }
				preset="spacing"
				onChange={ ( value ) =>
					setAttributes( {
						iconGap: { ...iconGap, [ activeDevice ]: value },
					} )
				}
			/>
		</PanelBody>
	);
}

export function MarkerStyleControls( { attributes, setAttributes } ) {
	const { activeDevice } = useDevice();

	const getResponsiveValue = ( key ) => attributes[ key ] || EMPTY_RESPONSIVE;

	const updateResponsiveValue = ( key, value ) => {
		const current = getResponsiveValue( key );
		setAttributes( {
			[ key ]: { ...current, [ activeDevice ]: value },
		} );
	};
	const getResponsiveValuePlaceholder = ( key, fallback ) =>
		getResponsivePlaceholder( {
			values: getResponsiveValue( key ),
			activeDevice,
			fallback,
		} );
	const getResponsiveSelectValueOptions = ( key, options ) =>
		getResponsiveSelectOptions( {
			values: getResponsiveValue( key ),
			activeDevice,
			options,
			inheritedLabel: __( 'Inherited', 'axcelersblocks' ),
		} );

	const markerBorderStyleOptions = [
		{ label: __( 'Solid', 'axcelersblocks' ), value: 'solid' },
		{ label: __( 'Dashed', 'axcelersblocks' ), value: 'dashed' },
		{ label: __( 'Dotted', 'axcelersblocks' ), value: 'dotted' },
		{ label: __( 'Double', 'axcelersblocks' ), value: 'double' },
		{ label: __( 'None', 'axcelersblocks' ), value: 'none' },
	];

	return (
		<PanelBody title={ __( 'Marker Style', 'axcelersblocks' ) } initialOpen={ false }>
			<p>{ __( 'Text Color', 'axcelersblocks' ) }</p>
			<ColorPalette
				value={ getResponsiveValue( 'markerTextColor' )[ activeDevice ] || '' }
				onChange={ ( value ) => updateResponsiveValue( 'markerTextColor', value || '' ) }
			/>

			<p>{ __( 'Background Color', 'axcelersblocks' ) }</p>
			<ColorPalette
				value={ getResponsiveValue( 'markerBackgroundColor' )[ activeDevice ] || '' }
				onChange={ ( value ) => updateResponsiveValue( 'markerBackgroundColor', value || '' ) }
			/>

			<UnitValueControl
				label={ __( 'Font Size', 'axcelersblocks' ) }
				value={ getResponsiveValue( 'markerFontSize' )[ activeDevice ] || '' }
				onChange={ ( value ) => updateResponsiveValue( 'markerFontSize', value ) }
				help={ __( 'Example: 16px', 'axcelersblocks' ) }
				placeholder={ getResponsiveValuePlaceholder( 'markerFontSize', 'e.g., 16px' ) }
				preset="fontSize"
			/>

			<TextControl
				label={ __( 'Font Weight', 'axcelersblocks' ) }
				value={ getResponsiveValue( 'markerFontWeight' )[ activeDevice ] || '' }
				onChange={ ( value ) => updateResponsiveValue( 'markerFontWeight', value ) }
				help={ __( 'Example: 600', 'axcelersblocks' ) }
				placeholder={ getResponsiveValuePlaceholder( 'markerFontWeight', 'e.g., 600' ) }
			/>

			<UnitValueControl
				label={ __( 'Width', 'axcelersblocks' ) }
				value={ getResponsiveValue( 'markerWidth' )[ activeDevice ] || '' }
				onChange={ ( value ) => updateResponsiveValue( 'markerWidth', value ) }
				help={ __( 'Example: 44px', 'axcelersblocks' ) }
				placeholder={ getResponsiveValuePlaceholder( 'markerWidth', 'e.g., 44px' ) }
				preset="size"
			/>

			<UnitValueControl
				label={ __( 'Height', 'axcelersblocks' ) }
				value={ getResponsiveValue( 'markerHeight' )[ activeDevice ] || '' }
				onChange={ ( value ) => updateResponsiveValue( 'markerHeight', value ) }
				help={ __( 'Example: 44px', 'axcelersblocks' ) }
				placeholder={ getResponsiveValuePlaceholder( 'markerHeight', 'e.g., 44px' ) }
				preset="size"
			/>

			<UnitValueControl
				label={ __( 'Padding', 'axcelersblocks' ) }
				value={ getResponsiveValue( 'markerPadding' )[ activeDevice ] || '' }
				onChange={ ( value ) => updateResponsiveValue( 'markerPadding', value ) }
				help={ __( 'Example: 8px', 'axcelersblocks' ) }
				placeholder={ getResponsiveValuePlaceholder( 'markerPadding', 'e.g., 8px' ) }
				preset="spacing"
			/>

			<UnitValueControl
				label={ __( 'Border Width', 'axcelersblocks' ) }
				value={ getResponsiveValue( 'markerBorderWidth' )[ activeDevice ] || '' }
				onChange={ ( value ) => updateResponsiveValue( 'markerBorderWidth', value ) }
				help={ __( 'Example: 1px', 'axcelersblocks' ) }
				placeholder={ getResponsiveValuePlaceholder( 'markerBorderWidth', 'e.g., 1px' ) }
				preset="borderWidth"
			/>

			<SelectControl
				label={ __( 'Border Style', 'axcelersblocks' ) }
				value={ getResponsiveValue( 'markerBorderStyle' )[ activeDevice ] || 'solid' }
				options={ getResponsiveSelectValueOptions( 'markerBorderStyle', markerBorderStyleOptions ) }
				onChange={ ( value ) => updateResponsiveValue( 'markerBorderStyle', value ) }
			/>

			<p>{ __( 'Border Color', 'axcelersblocks' ) }</p>
			<ColorPalette
				value={ getResponsiveValue( 'markerBorderColor' )[ activeDevice ] || '' }
				onChange={ ( value ) => updateResponsiveValue( 'markerBorderColor', value || '' ) }
			/>

			<UnitValueControl
				label={ __( 'Border Radius', 'axcelersblocks' ) }
				value={ getResponsiveValue( 'markerBorderRadius' )[ activeDevice ] || '' }
				onChange={ ( value ) => updateResponsiveValue( 'markerBorderRadius', value ) }
				help={ __( 'Example: 50%', 'axcelersblocks' ) }
				placeholder={ getResponsiveValuePlaceholder( 'markerBorderRadius', 'e.g., 50%' ) }
				preset="borderRadius"
			/>
		</PanelBody>
	);
}
