/**
 * Block Button Spacing Panel
 *
 */

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

export default function BlockButtonSpacingPanel( { attributes, setAttributes } ) {
	// Use the custom hook to handle the panel class update
	useIconPanelBodyClass( attributes, [
		'blockButtonMinHeightDesktop', 'blockButtonMinHeightTablet', 'blockButtonMinHeightMobile',
		'buttonContentVerticalAlignDesktop', 'buttonContentVerticalAlignTablet', 'buttonContentVerticalAlignMobile',
		'blockButtonWidthDesktop', 'blockButtonWidthTablet', 'blockButtonWidthMobile',
		'buttonContentHorizontalAlignDesktop', 'buttonContentHorizontalAlignTablet', 'buttonContentHorizontalAlignMobile',
		'blockButtonPaddingTopDesktop', 'blockButtonPaddingTopTablet', 'blockButtonPaddingTopMobile',
		'blockButtonPaddingRightDesktop', 'blockButtonPaddingRightTablet', 'blockButtonPaddingRightMobile',
		'blockButtonPaddingBottomDesktop', 'blockButtonPaddingBottomTablet', 'blockButtonPaddingBottomMobile',
		'blockButtonPaddingLeftDesktop', 'blockButtonPaddingLeftTablet', 'blockButtonPaddingLeftMobile',
		'blockButtonMarginTopDesktop', 'blockButtonMarginTopTablet', 'blockButtonMarginTopMobile',
		'blockButtonMarginRightDesktop', 'blockButtonMarginRightTablet', 'blockButtonMarginRightMobile',
		'blockButtonMarginBottomDesktop', 'blockButtonMarginBottomTablet', 'blockButtonMarginBottomMobile',
		'blockButtonMarginLeftDesktop', 'blockButtonMarginLeftTablet', 'blockButtonMarginLeftMobile'
	], 'desktop', __( 'Button Block Spacing', 'smart-social-media-buttons' ) );

	return (
		<>
			<PanelBody title = { __( 'Button Block Spacing', 'smart-social-media-buttons' ) } initialOpen = { true }>
				{/* Min Height */}
				<ResponsiveRangeControl
					attributes = { attributes }
					setAttributes = { setAttributes }
					label = { __( 'Min Height', 'smart-social-media-buttons' ) }
					attributeKeys = { {
						desktop: 'blockButtonMinHeightDesktop',
						tablet: 'blockButtonMinHeightTablet',
						mobile: 'blockButtonMinHeightMobile',
					} }
					minValues = { { desktop: 0, tablet: 0, mobile: 0 } }
					maxValues = { { desktop: 100, tablet: 100, mobile: 100 } }
					defaultValue = { 0 }
					ResetComponent = { ResetIconButton }
				/>

				{/* Content Vertical Alignment */}
				<ResponsiveAlignmentControl
					alignmentType = "vertical"
					attributes = { attributes }
					setAttributes = { setAttributes }
					label = { __( 'Content Vertical Alignment', 'smart-social-media-buttons' ) }
					attributeKeys = { {
						desktop: 'buttonContentVerticalAlignDesktop',
						tablet: 'buttonContentVerticalAlignTablet',
						mobile: 'buttonContentVerticalAlignMobile'
					}}
					defaultAlignment = "flex-start"
					ResetComponent = { ResetIconButton }
				/>

				{/* Max Content Width control */}
				<ResponsiveRangeControl
					attributes = { attributes }
					setAttributes = { setAttributes }
					label = { __( 'Max Width', 'smart-social-media-buttons' ) }
					attributeKeys = { {
						desktop: 'blockButtonWidthDesktop',
						tablet: 'blockButtonWidthTablet',
						mobile: 'blockButtonWidthMobile',
					} }
					minValues = { { desktop: 0, tablet: 0, mobile: 0 } }
					maxValues = { { desktop: 100, tablet: 100, mobile: 100 } }
					defaultValue = { 0 }
					ResetComponent = { ResetIconButton }
				/>

				{/* Content Horizontal Alignment */}
				<ResponsiveAlignmentControl
					alignmentType = "vertical"
					attributes = { attributes }
					setAttributes = { setAttributes }
					label = { __( 'Content Horizontal Alignment', 'smart-social-media-buttons' ) }
					attributeKeys = { {
						desktop: 'buttonContentHorizontalAlignDesktop',
						tablet: 'buttonContentHorizontalAlignTablet',
						mobile: 'buttonContentHorizontalAlignMobile'
					}}
					defaultAlignment = "flex-start"
					ResetComponent = { ResetIconButton }
				/>

				{/* Padding controls */}
				<ResponsiveSyncControl
					attributes = { attributes }
					setAttributes = { setAttributes }
					label = { __( 'Paddings', 'smart-social-media-buttons' ) }
					attributeKeys = { {
						top: { desktop: 'blockButtonPaddingTopDesktop', tablet: 'blockButtonPaddingTopTablet', mobile: 'blockButtonPaddingTopMobile' },
						right: { desktop: 'blockButtonPaddingRightDesktop', tablet: 'blockButtonPaddingRightTablet', mobile: 'blockButtonPaddingRightMobile' },
						bottom: { desktop: 'blockButtonPaddingBottomDesktop', tablet: 'blockButtonPaddingBottomTablet', mobile: 'blockButtonPaddingBottomMobile' },
						left: { desktop: 'blockButtonPaddingLeftDesktop', tablet: 'blockButtonPaddingLeftTablet', mobile: 'blockButtonPaddingLeftMobile' },
					} }
					syncKey = "paddingBlockSyncButton"
					minValues = { { desktop: 0, tablet: 0, mobile: 0 } }
					maxValues = { { desktop: 100, tablet: 100, mobile: 100 } }
					defaultValue = { 0 }
					ResetComponent = { ResetIconButton }
				/>

				{/* Margin controls */}
				<ResponsiveSyncControl
					attributes = { attributes }
					setAttributes = { setAttributes }
					label = { __( 'Margin', 'smart-social-media-buttons' ) }
					attributeKeys = { {
						top: { desktop: 'blockButtonMarginTopDesktop', tablet: 'blockButtonMarginTopTablet', mobile: 'blockButtonMarginTopMobile' },
						right: { desktop: 'blockButtonMarginRightDesktop', tablet: 'blockButtonMarginRightTablet', mobile: 'blockButtonMarginRightMobile' },
						bottom: { desktop: 'blockButtonMarginBottomDesktop', tablet: 'blockButtonMarginBottomTablet', mobile: 'blockButtonMarginBottomMobile' },
						left: { desktop: 'blockButtonMarginLeftDesktop', tablet: 'blockButtonMarginLeftTablet', mobile: 'blockButtonMarginLeftMobile' },
					} }
					syncKey = "marginBlockSyncButton"
					minValues = { { desktop: -100, tablet: -100, mobile: -100 } }
					maxValues = { { desktop: 100, tablet: 100, mobile: 100 } }
					defaultValue = { 0 }
					ResetComponent = { ResetIconButton }
				/>
			</PanelBody>
		</>
	);
}
