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

export default function ButtonsTab( { settings, updateField } ) {
	return (
		<>
			<PanelBody title={ __( 'Shape', 'wuppi' ) } initialOpen={ false }>
				<RadiusPreset
					label={ __( 'Button radius preset', 'wuppi' ) }
					value={ settings.btn_radius_use_global ? settings.radius_preset : settings.btn_radius_preset }
					onChange={ ( v ) => updateField( 'btn_radius_preset', v ) }
					disabled={ !! settings.btn_radius_use_global }
				/>
				<ToggleControl
					__nextHasNoMarginBottom
					label={ __( 'Use global', 'wuppi' ) }
					checked={ !! settings.btn_radius_use_global }
					onChange={ ( v ) => updateField( 'btn_radius_use_global', v ? 1 : 0 ) }
				/>
			</PanelBody>
			<PanelBody title={ __( 'Primary button hover', 'wuppi' ) } initialOpen={ false }>
				<PaletteColorSelect
					label={ __( 'Hover background', 'wuppi' ) }
					value={ settings.btn_hover_bg }
					onChange={ ( v ) => updateField( 'btn_hover_bg', v ) }
				/>
				<PaletteColorSelect
					label={ __( 'Hover text color', 'wuppi' ) }
					value={ settings.btn_hover_color }
					onChange={ ( v ) => updateField( 'btn_hover_color', v ) }
				/>
			</PanelBody>
			<PanelBody title={ __( 'Outline button hover', 'wuppi' ) } initialOpen={ false }>
				<PaletteColorSelect
					label={ __( 'Hover background', 'wuppi' ) }
					value={ settings.btn_outline_hover_bg }
					onChange={ ( v ) => updateField( 'btn_outline_hover_bg', v ) }
				/>
				<PaletteColorSelect
					label={ __( 'Hover text color', 'wuppi' ) }
					value={ settings.btn_outline_hover_color }
					onChange={ ( v ) => updateField( 'btn_outline_hover_color', v ) }
				/>
				<PaletteColorSelect
					label={ __( 'Hover border color', 'wuppi' ) }
					value={ settings.btn_outline_hover_border }
					onChange={ ( v ) => updateField( 'btn_outline_hover_border', v ) }
				/>
			</PanelBody>
		</>
	);
}
