/**
 * Button Spacing Panel
 *
 */

import { __ } from '@wordpress/i18n';
import { PanelBody } from '@wordpress/components';
import ResponsiveRangeControl from '../../../responsive-controls/ResponsiveRangeControl';
import ResponsiveSyncControl from '../../../responsive-controls/ResponsiveSyncControl';
import { useIconPanelBodyClass } from '../../../components/IconPanelIndicator';
import ResetIconButton from '../../../components/ResetIconButton';

export default function ButtonSpacingPanel( { attributes, setAttributes } ) {
	// Use the custom hook to handle the panel class update
	useIconPanelBodyClass( attributes, [
		'buttonMinHeightDesktop', 'buttonMinHeightTablet', 'buttonMinHeightMobile',
		'buttonWidthDesktop', 'buttonWidthTablet', 'buttonWidthMobile',
		'buttonPaddingTopDesktop', 'buttonPaddingTopTablet', 'buttonPaddingTopMobile',
		'buttonPaddingRightDesktop', 'buttonPaddingRightTablet', 'buttonPaddingRightMobile',
		'buttonPaddingBottomDesktop', 'buttonPaddingBottomTablet', 'buttonPaddingBottomMobile',
		'buttonPaddingLeftDesktop', 'buttonPaddingLeftTablet', 'buttonPaddingLeftMobile'
	], 'desktop', __( 'Button Spacing', 'smart-social-media-buttons' ) );

	return (
		<>
			<PanelBody title = { __( 'Button Spacing', 'smart-social-media-buttons' ) } initialOpen = { false }>
				{/* Min Height */}
				<ResponsiveRangeControl
					attributes = { attributes }
					setAttributes = { setAttributes }
					label = { __( 'Button Min Height', 'smart-social-media-buttons' ) }
					attributeKeys = { {
						desktop: 'buttonMinHeightDesktop',
						tablet: 'buttonMinHeightTablet',
						mobile: 'buttonMinHeightMobile'
					} }
					minValues = { { desktop: 0, tablet: 0, mobile: 0 } }
					maxValues = { { desktop: 100, tablet: 100, mobile: 100 } }
					defaultValue = { 44 }
					ResetComponent = { ResetIconButton }
					panelTitle = { __( 'Button Spacing', 'smart-social-media-buttons' ) }
					blockType = 'ssmb/icon-button'
				/>

				{/* Button Width control */}
				<ResponsiveRangeControl
					attributes = { attributes }
					setAttributes = { setAttributes }
					label = { __( 'Button Min Width', 'smart-social-media-buttons' ) }
					attributeKeys = { {
						desktop: 'buttonWidthDesktop',
						tablet: 'buttonWidthTablet',
						mobile: 'buttonWidthMobile'
					} }
					minValues = { { desktop: 0, tablet: 0, mobile: 0 } }
					maxValues = { { desktop: 100, tablet: 100, mobile: 100 } }
					defaultValue = { null }
					ResetComponent = { ResetIconButton }
					panelTitle = { __( 'Button Spacing', 'smart-social-media-buttons' ) }
					blockType = 'ssmb/icon-button'
				/>

				{/* Padding controls */}
				<ResponsiveSyncControl
					attributes = { attributes }
					setAttributes = { setAttributes }
					label = { __( 'Paddings', 'smart-social-media-buttons' ) }
					attributeKeys = { {
						top: { desktop: 'buttonPaddingTopDesktop', tablet: 'buttonPaddingTopTablet', mobile: 'buttonPaddingTopMobile' },
						right: { desktop: 'buttonPaddingRightDesktop', tablet: 'buttonPaddingRightTablet', mobile: 'buttonPaddingRightMobile' },
						bottom: { desktop: 'buttonPaddingBottomDesktop', tablet: 'buttonPaddingBottomTablet', mobile: 'buttonPaddingBottomMobile' },
						left: { desktop: 'buttonPaddingLeftDesktop', tablet: 'buttonPaddingLeftTablet', mobile: 'buttonPaddingLeftMobile' },
					} }
					syncKey = "paddingSyncButton"
					minValues = { { desktop: 0, tablet: 0, mobile: 0 } }
					maxValues = { { desktop: 100, tablet: 100, mobile: 100 } }
					defaultValue = { 0 }
					ResetComponent = { ResetIconButton }
					panelTitle = { __( 'Button Spacing', 'smart-social-media-buttons' ) }
					blockType = 'ssmb/icon-button'
				/>
			</PanelBody>
		</>
	);
}
