/**
 * Container Block Spacing Panel
 *
 */

import { __ } from '@wordpress/i18n';
import { PanelBody } from '@wordpress/components';
import ResponsiveRangeControl from '../../../responsive-controls/ResponsiveRangeControl';
import ResponsiveSyncControl from '../../../responsive-controls/ResponsiveSyncControl';
import ResponsiveAlignmentControl from '../../../responsive-controls/ResponsiveAlignmentControl';
import { usePanelBodyClass } from '../../../components/PanelIndicator';
import ResetButton from '../../../components/ResetButton';

export default function BlockSpacingPanel( { attributes, setAttributes } ) {
	// Use the custom hook to handle the panel class update
	usePanelBodyClass( attributes, [
		'minHeightDesktop', 'minHeightTablet', 'minHeightMobile',
		'contentVerticalAlignDesktop', 'contentVerticalAlignTablet', 'contentVerticalAlignMobile',
		'maxWidthDesktop', 'maxWidthTablet', 'maxWidthMobile',
		'contentHorizontalAlignDesktop', 'contentHorizontalAlignTablet', 'contentHorizontalAlignMobile',
		'paddingTopDesktop', 'paddingTopTablet', 'paddingTopMobile',
		'paddingRightDesktop', 'paddingRightTablet', 'paddingRightMobile',
		'paddingBottomDesktop', 'paddingBottomTablet', 'paddingBottomMobile',
		'paddingLeftDesktop', 'paddingLeftTablet', 'paddingLeftMobile',
		'marginTopDesktop', 'marginTopTablet', 'marginTopMobile',
		'marginRightDesktop', 'marginRightTablet', 'marginRightMobile',
		'marginBottomDesktop', 'marginBottomTablet', 'marginBottomMobile',
		'marginLeftDesktop', 'marginLeftTablet', 'marginLeftMobile'
	], 'desktop', __( 'Block Spacing', 'smart-social-media-buttons' ) );

	return (
		<PanelBody title = { __( 'Block Spacing', 'smart-social-media-buttons' ) } initialOpen = { false }>
			{/* Min Height control */}
			<ResponsiveRangeControl
				attributes = { attributes }
				setAttributes = { setAttributes }
				label = { __( 'Min Height', 'smart-social-media-buttons' ) }
				attributeKeys = { {
					desktop: 'minHeightDesktop',
					tablet:  'minHeightTablet',
					mobile:  'minHeightMobile',
				} }
				minValues = { { desktop: 0, tablet: 0, mobile: 0 } }
				maxValues = { { desktop: 1000, tablet: 1000, mobile: 1000 } }
				ResetComponent = { ResetButton }
				panelTitle = { __( 'Block Spacing', 'smart-social-media-buttons' ) }
				blockType = 'smart-social-media-buttons/main'
			/>

			{/* Content Vertical Alignment */}
			<ResponsiveAlignmentControl
				alignmentType = "vertical"
				attributes = { attributes }
				setAttributes = { setAttributes }
				label = { __( 'Content Vertical Alignment', 'smart-social-media-buttons' ) }
				attributeKeys = { {
					desktop: 'contentVerticalAlignDesktop',
					tablet: 'contentVerticalAlignTablet',
					mobile: 'contentVerticalAlignMobile'
				}}
				defaultAlignment = "flex-start"
				ResetComponent = { ResetButton }
				panelTitle = { __( 'Block Spacing', 'smart-social-media-buttons' ) }
				blockType = 'smart-social-media-buttons/main'
			/>

			{/* Max Content Width control */}
			<ResponsiveRangeControl
				attributes = { attributes }
				setAttributes = { setAttributes }
				label = { __( 'Max Width', 'smart-social-media-buttons' ) }
				attributeKeys = { {
					desktop: 'maxWidthDesktop',
					tablet: 'maxWidthTablet',
					mobile: 'maxWidthMobile',
				} }
				minValues = { { desktop: 0, tablet: 0, mobile: 0 } }
				maxValues = { { desktop: 1500, tablet: 1500, mobile: 1500 } }
				ResetComponent = { ResetButton }
				panelTitle = { __( 'Block Spacing', 'smart-social-media-buttons' ) }
				blockType = 'smart-social-media-buttons/main'
			/>

			{/* Content Horizontal Alignment */}
			<ResponsiveAlignmentControl
				alignmentType = "vertical"
				attributes = { attributes }
				setAttributes = { setAttributes }
				label = { __( 'Content Horizontal Alignment', 'smart-social-media-buttons' ) }
				attributeKeys = { {
					desktop: 'contentHorizontalAlignDesktop',
					tablet: 'contentHorizontalAlignTablet',
					mobile: 'contentHorizontalAlignMobile'
				}}
				defaultAlignment = "left"
				ResetComponent = { ResetButton }
				panelTitle = { __( 'Block Spacing', 'smart-social-media-buttons' ) }
				blockType = 'smart-social-media-buttons/main'
			/>

			{/* Padding controls */}
			<ResponsiveSyncControl
				attributes = { attributes }
				setAttributes = { setAttributes }
				label = { __( 'Padding', 'smart-social-media-buttons' ) }
				attributeKeys = { {
					top: { desktop: 'paddingTopDesktop', tablet: 'paddingTopTablet', mobile: 'paddingTopMobile' },
					right: { desktop: 'paddingRightDesktop', tablet: 'paddingRightTablet', mobile: 'paddingRightMobile' },
					bottom: { desktop: 'paddingBottomDesktop', tablet: 'paddingBottomTablet', mobile: 'paddingBottomMobile' },
					left: { desktop: 'paddingLeftDesktop', tablet: 'paddingLeftTablet', mobile: 'paddingLeftMobile' },
				} }
				minValues = { { desktop: 0, tablet: 0, mobile: 0 } }
				maxValues = { { desktop: 100, tablet: 100, mobile: 100 } }
				defaultValue = { 0 }
				syncKey = "paddingSync"
				ResetComponent = { ResetButton }
				panelTitle = { __( 'Block Spacing', 'smart-social-media-buttons' ) }
				blockType = 'smart-social-media-buttons/main'
			/>

			{/* Margin controls */}
			<ResponsiveSyncControl
				attributes = { attributes }
				setAttributes = { setAttributes }
				label = { __( 'Margin', 'smart-social-media-buttons' ) }
				attributeKeys = { {
					top: { desktop: 'marginTopDesktop', tablet: 'marginTopTablet', mobile: 'marginTopMobile' },
					right: { desktop: 'marginRightDesktop', tablet: 'marginRightTablet', mobile: 'marginRightMobile' },
					bottom: { desktop: 'marginBottomDesktop', tablet: 'marginBottomTablet', mobile: 'marginBottomMobile' },
					left: { desktop: 'marginLeftDesktop', tablet: 'marginLeftTablet', mobile: 'marginLeftMobile' },
				} }
				minValues = { { desktop: -100, tablet: -100, mobile: -100 } }
				maxValues = { { desktop: 100, tablet: 100, mobile: 100 } }
				defaultValue = { 0 }
				syncKey = "marginSync"
				ResetComponent = { ResetButton }
				panelTitle = { __( 'Block Spacing', 'smart-social-media-buttons' ) }
				blockType = 'smart-social-media-buttons/main'
			/>
		</PanelBody>
	);
}
