import {
	ToggleControl,
	__experimentalToggleGroupControl as ToggleGroupControl,
	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
	__experimentalToolsPanelItem as ToolsPanelItem,
} from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import OverlayMenuIcon from './overlay-menu-icon';

export default function OverlayMenuPreview( { setAttributes, hasIcon, icon } ) {
	return (
		<>
			<ToolsPanelItem
				label={ __( 'Show icon button' ) }
				isShownByDefault
				hasValue={ () => ! hasIcon }
				onDeselect={ () => setAttributes( { hasIcon: true } ) }
			>
				<ToggleControl
					label={ __( 'Show icon button' ) }
					help={ __(
						'Configure the visual appearance of the button that toggles the overlay menu.'
					) }
					onChange={ ( value ) =>
						setAttributes( { hasIcon: value } )
					}
					checked={ hasIcon }
				/>
			</ToolsPanelItem>

			<ToolsPanelItem
				label={ __( 'Icon' ) }
				isShownByDefault
				hasValue={ () => icon !== 'handle' }
				onDeselect={ () => setAttributes( { icon: 'handle' } ) }
			>
				<ToggleGroupControl
					className="wp-block-navigation__overlay-menu-icon-toggle-group"
					label={ __( 'Icon' ) }
					value={ icon }
					onChange={ ( value ) => setAttributes( { icon: value } ) }
					isBlock
				>
					<ToggleGroupControlOption
						value="handle"
						aria-label={ __( 'handle' ) }
						label={ <OverlayMenuIcon icon="handle" /> }
					/>
					<ToggleGroupControlOption
						value="menu"
						aria-label={ __( 'menu' ) }
						label={ <OverlayMenuIcon icon="menu" /> }
					/>
				</ToggleGroupControl>
			</ToolsPanelItem>
		</>
	);
}