/**
 * External dependencies
 */
import { store as blockEditorStore } from '@wordpress/block-editor';
import { useDispatch } from '@wordpress/data';
import { __ } from '@wordpress/i18n';
import {
	// eslint-disable-next-line @typescript-eslint/ban-ts-comment
	// @ts-ignore - Ignoring because `__experimentalToggleGroupControl` is not yet in the type definitions.
	// eslint-disable-next-line @wordpress/no-unsafe-wp-apis
	__experimentalToggleGroupControl as ToggleGroupControl,
	// eslint-disable-next-line @typescript-eslint/ban-ts-comment
	// @ts-ignore - Ignoring because `__experimentalToggleGroupControl` is not yet in the type definitions.
	// eslint-disable-next-line @wordpress/no-unsafe-wp-apis
	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
} from '@wordpress/components';

/**
 * Internal dependencies
 */
import { PagerDisplayModes } from './constants';
import { PagerSettingsDigitsIcon, PagerSettingsDotIcon } from './icons';
import { ProductGalleryPagerContext } from '../../types';

const getHelpText = ( pagerDisplayMode: PagerDisplayModes ) => {
	switch ( pagerDisplayMode ) {
		case PagerDisplayModes.DIGITS:
			return __(
				'A list of numbers will show to indicate the number of items.',
				'woo-gutenberg-products-block'
			);
		case PagerDisplayModes.DOTS:
			return __(
				'A series of dots will show to indicate the number of items.',
				'woo-gutenberg-products-block'
			);
		case 'off':
			return __(
				'No pager will be displayed.',
				'woo-gutenberg-products-block'
			);
		default:
			return __(
				'No pager will be displayed.',
				'woo-gutenberg-products-block'
			);
	}
};

export const ProductGalleryPagerBlockSettings = ( {
	context,
}: {
	context: ProductGalleryPagerContext;
} ) => {
	const { productGalleryClientId, pagerDisplayMode } = context;
	// @ts-expect-error @wordpress/block-editor/store types not provided
	const { updateBlockAttributes } = useDispatch( blockEditorStore );

	return (
		<ToggleGroupControl
			label={ __( 'Pager', 'woo-gutenberg-products-block' ) }
			style={ {
				width: '100%',
			} }
			onChange={ ( value: PagerDisplayModes ) => {
				updateBlockAttributes( productGalleryClientId, {
					pagerDisplayMode: value,
				} );
			} }
			help={ getHelpText( pagerDisplayMode ) }
			value={ pagerDisplayMode }
		>
			<ToggleGroupControlOption
				value={ PagerDisplayModes.OFF }
				label={ __( 'Off', 'woo-gutenberg-products-block' ) }
			/>
			<ToggleGroupControlOption
				value={ PagerDisplayModes.DOTS }
				label={ <PagerSettingsDotIcon /> }
			/>
			<ToggleGroupControlOption
				value={ PagerDisplayModes.DIGITS }
				label={ <PagerSettingsDigitsIcon /> }
			/>
		</ToggleGroupControl>
	);
};