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

export default function HeaderTab( { settings, updateField } ) {
	return (
		<>
			<PanelBody title={ __( 'Common', 'wuppi' ) } initialOpen={ false }>
				<RangeControl
					__nextHasNoMarginBottom
					label={ __( 'Header height (px)', 'wuppi' ) }
					value={ Number( settings.header_height ) }
					min={ 56 }
					max={ 120 }
					onChange={ ( v ) => updateField( 'header_height', Number( v ) ) }
				/>
				<SelectControl
					__nextHasNoMarginBottom
					label={ __( 'Navigation font weight', 'wuppi' ) }
					value={ String( settings.nav_font_weight ) }
					options={ [
						{ value: '400', label: __( 'Regular', 'wuppi' ) },
						{ value: '500', label: __( 'Medium', 'wuppi' ) },
						{ value: '600', label: __( 'Semibold', 'wuppi' ) },
					] }
					onChange={ ( v ) => updateField( 'nav_font_weight', v ) }
				/>
				<ToggleControl
					__nextHasNoMarginBottom
					label={ __( 'Underline navigation links on hover', 'wuppi' ) }
					checked={ !! settings.nav_hover_underline }
					onChange={ ( v ) => updateField( 'nav_hover_underline', v ? 1 : 0 ) }
				/>
				<SelectControl
					__nextHasNoMarginBottom
					label={ __( 'Active navigation indicator', 'wuppi' ) }
					value={ settings.nav_active_indicator }
					options={ [
						{ value: 'none', label: __( 'None', 'wuppi' ) },
						{ value: 'underline', label: __( 'Underline', 'wuppi' ) },
						{ value: 'dot', label: __( 'Dot', 'wuppi' ) },
						{ value: 'background', label: __( 'Background', 'wuppi' ) },
					] }
					onChange={ ( v ) => updateField( 'nav_active_indicator', v ) }
				/>
			</PanelBody>
			<PanelBody title={ __( 'Desktop', 'wuppi' ) } initialOpen={ false }>
				<SelectControl
					__nextHasNoMarginBottom
					label={ __( 'Desktop header behavior', 'wuppi' ) }
					value={ settings.header_desktop_behavior }
					options={ [
						{ value: 'scroll', label: __( 'Scroll with page', 'wuppi' ) },
						{ value: 'fixed-glass', label: __( 'Fixed with blur on scroll', 'wuppi' ) },
						{ value: 'fixed-auto-hide', label: __( 'Fixed auto-hide', 'wuppi' ) },
					] }
					onChange={ ( v ) => updateField( 'header_desktop_behavior', v ) }
				/>
				<SelectControl
					__nextHasNoMarginBottom
					label={ __( 'Navigation density', 'wuppi' ) }
					value={ settings.header_nav_density }
					options={ [
						{ value: 'compact', label: __( 'Compact', 'wuppi' ) },
						{ value: 'comfortable', label: __( 'Comfortable', 'wuppi' ) },
					] }
					onChange={ ( v ) => updateField( 'header_nav_density', v ) }
				/>
				<RangeControl
					__nextHasNoMarginBottom
					label={ __( 'Navigation link spacing (px)', 'wuppi' ) }
					value={ Number( settings.header_nav_gap ) }
					min={ 0 }
					max={ 48 }
					onChange={ ( v ) => updateField( 'header_nav_gap', Number( v ) ) }
				/>
				<SelectControl
					__nextHasNoMarginBottom
					label={ __( 'Auto-hide reveal delay', 'wuppi' ) }
					value={ String( settings.header_auto_hide_delay ) }
					options={ [
						{ value: '600', label: __( 'Fast', 'wuppi' ) },
						{ value: '900', label: __( 'Default', 'wuppi' ) },
						{ value: '1400', label: __( 'Slow', 'wuppi' ) },
					] }
					onChange={ ( v ) => updateField( 'header_auto_hide_delay', Number( v ) ) }
					help={ __( 'Used only when desktop header is set to Fixed auto-hide.', 'wuppi' ) }
				/>
			</PanelBody>
			<PanelBody title={ __( 'Mobile', 'wuppi' ) } initialOpen={ false }>
				<SelectControl
					__nextHasNoMarginBottom
					label={ __( 'Mobile header behavior', 'wuppi' ) }
					value={ settings.header_mobile_behavior }
					options={ [
						{ value: 'sticky-glass', label: __( 'Sticky with glass effect', 'wuppi' ) },
						{ value: 'static', label: __( 'Static', 'wuppi' ) },
					] }
					onChange={ ( v ) => updateField( 'header_mobile_behavior', v ) }
				/>
			</PanelBody>
		</>
	);
}
