import { PanelBody, RangeControl, ToggleControl, SelectControl, Notice } from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import RadiusPreset from '../components/RadiusPreset';

export default function DesignTab( { settings, updateField } ) {
	return (
		<>
			<PanelBody title={ __( 'Border radius', 'wuppi' ) } initialOpen={ false }>
				<RadiusPreset
					label={ __( 'Global radius preset', 'wuppi' ) }
					value={ settings.radius_preset }
					onChange={ ( v ) => updateField( 'radius_preset', v ) }
				/>
				<ToggleControl
					__nextHasNoMarginBottom
					label={ __( 'Override image radius', 'wuppi' ) }
					checked={ !! settings.radius_image_override }
					onChange={ ( v ) => updateField( 'radius_image_override', v ? 1 : 0 ) }
				/>
				{ !! settings.radius_image_override && (
					<RangeControl
						__nextHasNoMarginBottom
						label={ __( 'Image radius (px)', 'wuppi' ) }
						value={ Number( settings.radius_image ) }
						min={ 0 }
						max={ 64 }
						onChange={ ( v ) => updateField( 'radius_image', Number( v ) ) }
					/>
				) }
				<ToggleControl
					__nextHasNoMarginBottom
					label={ __( 'Override card radius', 'wuppi' ) }
					checked={ !! settings.radius_card_override }
					onChange={ ( v ) => updateField( 'radius_card_override', v ? 1 : 0 ) }
				/>
				{ !! settings.radius_card_override && (
					<RangeControl
						__nextHasNoMarginBottom
						label={ __( 'Card radius (px)', 'wuppi' ) }
						value={ Number( settings.radius_card ) }
						min={ 0 }
						max={ 64 }
						onChange={ ( v ) => updateField( 'radius_card', Number( v ) ) }
					/>
				) }
				<ToggleControl
					__nextHasNoMarginBottom
					label={ __( 'Override input radius', 'wuppi' ) }
					checked={ !! settings.radius_input_override }
					onChange={ ( v ) => updateField( 'radius_input_override', v ? 1 : 0 ) }
				/>
				{ !! settings.radius_input_override && (
					<RangeControl
						__nextHasNoMarginBottom
						label={ __( 'Input radius (px)', 'wuppi' ) }
						value={ Number( settings.radius_input ) }
						min={ 0 }
						max={ 32 }
						onChange={ ( v ) => updateField( 'radius_input', Number( v ) ) }
					/>
				) }
			</PanelBody>
			<PanelBody title={ __( 'Shadows', 'wuppi' ) } initialOpen={ false }>
				<Notice status="info" isDismissible={ false }>
					{ __( 'These are global Wuppi shadow tokens. Individual blocks can also have shadows set via Styles in the Site Editor.', 'wuppi' ) }
				</Notice>
				<ToggleControl
					__nextHasNoMarginBottom
					label={ __( 'Enable global shadow', 'wuppi' ) }
					checked={ !! settings.shadow_enabled }
					onChange={ ( v ) => updateField( 'shadow_enabled', v ? 1 : 0 ) }
				/>
				<RangeControl
					__nextHasNoMarginBottom
					label={ __( 'Shadow intensity (%)', 'wuppi' ) }
					value={ Number( settings.shadow_intensity ) }
					min={ 0 }
					max={ 100 }
					onChange={ ( v ) => updateField( 'shadow_intensity', Number( v ) ) }
					disabled={ ! settings.shadow_enabled }
				/>
				<ToggleControl
					__nextHasNoMarginBottom
					label={ __( 'Apply shadow to cards', 'wuppi' ) }
					checked={ !! settings.shadow_on_cards }
					onChange={ ( v ) => updateField( 'shadow_on_cards', v ? 1 : 0 ) }
					disabled={ ! settings.shadow_enabled }
				/>
				<ToggleControl
					__nextHasNoMarginBottom
					label={ __( 'Apply shadow to images', 'wuppi' ) }
					checked={ !! settings.shadow_on_images }
					onChange={ ( v ) => updateField( 'shadow_on_images', v ? 1 : 0 ) }
					disabled={ ! settings.shadow_enabled }
				/>
				<ToggleControl
					__nextHasNoMarginBottom
					label={ __( 'Apply shadow to buttons', 'wuppi' ) }
					checked={ !! settings.shadow_on_buttons }
					onChange={ ( v ) => updateField( 'shadow_on_buttons', v ? 1 : 0 ) }
					disabled={ ! settings.shadow_enabled }
				/>
				{ !! settings.shadow_on_buttons && (
					<ToggleControl
						__nextHasNoMarginBottom
						label={ __( 'Hover only', 'wuppi' ) }
						checked={ !! settings.shadow_on_buttons_hover_only }
						onChange={ ( v ) => updateField( 'shadow_on_buttons_hover_only', v ? 1 : 0 ) }
						disabled={ ! settings.shadow_enabled }
					/>
				) }
			</PanelBody>
			<PanelBody title={ __( 'Transitions', 'wuppi' ) } initialOpen={ false }>
				<SelectControl
					__nextHasNoMarginBottom
					label={ __( 'Transition speed', 'wuppi' ) }
					help={ __( 'Duration of hover and focus animations across the theme.', 'wuppi' ) }
					value={ settings.transition_speed }
					options={ [
						{ value: 'none', label: __( 'None', 'wuppi' ) },
						{ value: 'fast', label: __( 'Fast', 'wuppi' ) },
						{ value: 'normal', label: __( 'Normal', 'wuppi' ) },
						{ value: 'slow', label: __( 'Slow', 'wuppi' ) },
					] }
					onChange={ ( v ) => updateField( 'transition_speed', v ) }
				/>
				<ToggleControl
					__nextHasNoMarginBottom
					label={ __( 'Respect prefers-reduced-motion', 'wuppi' ) }
					checked={ !! settings.respect_reduced_motion }
					onChange={ ( v ) => updateField( 'respect_reduced_motion', v ? 1 : 0 ) }
				/>
			</PanelBody>
		</>
	);
}
