import { PanelBody, SelectControl } from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import PaletteColorSelect from '../components/PaletteColorSelect';

export default function AdvancedTab( { settings, updateField } ) {
	return (
		<PanelBody title={ __( 'Form fields', 'wuppi' ) } initialOpen={ false }>
			<PaletteColorSelect
				label={ __( 'Focus ring color', 'wuppi' ) }
				value={ settings.input_focus_color }
				onChange={ ( v ) => updateField( 'input_focus_color', v ) }
			/>
			<SelectControl
				__nextHasNoMarginBottom
				label={ __( 'Focus ring style', 'wuppi' ) }
				value={ settings.input_focus_style }
				options={ [
					{ value: 'outline', label: __( 'Default', 'wuppi' ) },
					{ value: 'shadow', label: __( 'Shadow', 'wuppi' ) },
					{ value: 'glow', label: __( 'Glow', 'wuppi' ) },
				] }
				onChange={ ( v ) => updateField( 'input_focus_style', v ) }
			/>
		</PanelBody>
	);
}
