import { __ } from '@wordpress/i18n';
import { PanelBody, RangeControl, BaseControl, Button, ButtonGroup, ColorPalette } from '@wordpress/components';
import { BorderNoneIcon, BorderSolidIcon, BorderDashedIcon, BorderDottedIcon, NormalStateIcon, HoverStateIcon } from '../../../components/constants/Icons';
import NumberInput from '../../../components/NumberInput';
import DecimalNumberInput from '../../../components/DecimalNumberInput';
import defaultColors from '../../../components/constants/DefaultColorsPalette';
import ResponsiveSyncControl from '../../../responsive-controls/ResponsiveSyncControl';
import ResponsiveRadiusControl from '../../../responsive-controls/ResponsiveRadiusControl';
import { useIconPanelBodyClass } from '../../../components/IconPanelIndicator';
import ResetIconButton from '../../../components/ResetIconButton';

export default function ButtonBorderShadowPanel( { attributes, setAttributes, isHovered, handleHoverClick } ) {
	const {
		buttonBorderStyle, buttonBorderColor, buttonBorderOpacity,
		hoverButtonBorderColor, hoverButtonBorderOpacity,
		buttonBoxShadowHOffset, buttonBoxShadowVOffset, buttonBoxShadowBlur, buttonBoxShadowSpread, buttonBoxShadowColor, buttonBoxShadowOpacity,
		hoverButtonBoxShadowHOffset, hoverButtonBoxShadowVOffset, hoverButtonBoxShadowBlur, hoverButtonBoxShadowSpread, hoverButtonBoxShadowColor, hoverButtonBoxShadowOpacity,
	} = attributes;

	// Use the custom hook to handle the panel class update
	useIconPanelBodyClass( attributes, [
		'buttonBorderStyle', 'buttonBorderOpacity', 'buttonBorderColor', 'hoverButtonBorderColor', 'hoverButtonBorderOpacity',

		'buttonBorderTopWidthDesktop', 'buttonBorderRightWidthDesktop', 'buttonBorderBottomWidthDesktop', 'buttonBorderLeftWidthDesktop',
		'hoverButtonBorderTopWidthDesktop', 'hoverButtonBorderRightWidthDesktop', 'hoverButtonBorderBottomWidthDesktop', 'hoverButtonBorderLeftWidthDesktop',

		'buttonBorderTopWidthTablet', 'buttonBorderRightWidthTablet', 'buttonBorderBottomWidthTablet', 'buttonBorderLeftWidthTablet',
		'hoverButtonBorderTopWidthTablet', 'hoverButtonBorderRightWidthTablet', 'hoverButtonBorderBottomWidthTablet', 'hoverButtonBorderLeftWidthTablet',

		'buttonBorderTopWidthMobile', 'buttonBorderRightWidthMobile', 'buttonBorderBottomWidthMobile', 'buttonBorderLeftWidthMobile',
		'hoverButtonBorderTopWidthMobile', 'hoverButtonBorderRightWidthMobile', 'hoverButtonBorderBottomWidthMobile', 'hoverButtonBorderLeftWidthMobile',

		'topLeftButtonRadiusDesktop', 'topLeftButtonRadiusTablet', 'topLeftButtonRadiusMobile',
		'topRightButtonRadiusDesktop', 'topRightButtonRadiusTablet', 'topRightButtonRadiusMobile',
		'bottomLeftButtonRadiusDesktop', 'bottomLeftButtonRadiusTablet', 'bottomLeftButtonRadiusMobile',
		'bottomRightButtonRadiusDesktop', 'bottomRightButtonRadiusTablet', 'bottomRightButtonRadiusMobile',

		'buttonBoxShadowHOffset', 'buttonBoxShadowVOffset', 'buttonBoxShadowBlur',
		'buttonBoxShadowSpread', 'buttonBoxShadowColor', 'buttonBoxShadowOpacity',

		'hoverButtonBoxShadowHOffset', 'hoverButtonBoxShadowVOffset', 'hoverButtonBoxShadowBlur',
		'hoverButtonBoxShadowSpread', 'hoverButtonBoxShadowColor', 'hoverButtonBoxShadowOpacity'
	], 'desktop', __( 'Button Borders & Shadows', 'smart-social-media-buttons' ) );

	// Reset functions for border
	const resetButtonBorderStyle = () => setAttributes( {
		buttonBorderStyle: 'none', buttonBorderOpacity: 1, buttonBorderColor: '#000000', hoverButtonBorderColor: null, hoverButtonBorderOpacity: 1,

		buttonBorderTopWidthDesktop: 1, buttonBorderRightWidthDesktop: 1, buttonBorderBottomWidthDesktop: 1, buttonBorderLeftWidthDesktop: 1,
		hoverButtonBorderTopWidthDesktop: 1, hoverButtonBorderRightWidthDesktop: 1, hoverButtonBorderBottomWidthDesktop: 1, hoverButtonBorderLeftWidthDesktop: 1,

		buttonBorderTopWidthTablet: 1, buttonBorderRightWidthTablet: 1, buttonBorderBottomWidthTablet: 1, buttonBorderLeftWidthTablet: 1,
		hoverButtonBorderTopWidthTablet: 1, hoverButtonBorderRightWidthTablet: 1, hoverButtonBorderBottomWidthTablet: 1, hoverButtonBorderLeftWidthTablet: 1,

		buttonBorderTopWidthMobile: 1, buttonBorderRightWidthMobile: 1, buttonBorderBottomWidthMobile: 1, buttonBorderLeftWidthMobile: 1,
		hoverButtonBorderTopWidthMobile: 1, hoverButtonBorderRightWidthMobile: 1, hoverButtonBorderBottomWidthMobile: 1, hoverButtonBorderLeftWidthMobile: 1,
	} );
	const resetButtonBorderColor = () => setAttributes( { buttonBorderColor: '#000000' } );
	const resetButtonBorderColorOpacity = () => setAttributes( { buttonBorderOpacity: 1 } );

	// Reset functions for hover border
	const resetHoverButtonBorderColor = () => setAttributes( { hoverButtonBorderColor: '#000000' } );
	const resetHoverButtonBorderColorOpacity = () => setAttributes( { hoverButtonBorderOpacity: 1 } );

	// Reset functions for box-shadow
	const resetButtonAllBoxShadow = () => {
		setAttributes( {
			buttonBoxShadowHOffset: 0,
			buttonBoxShadowVOffset: 0,
			buttonBoxShadowBlur: 0,
			buttonBoxShadowSpread: 0,
			buttonBoxShadowColor: '#000000',
			buttonBoxShadowOpacity: 1
		} );
	};
	const resetButtonBoxShadowHOffset = () => setAttributes( { buttonBoxShadowHOffset: 0 } );
	const resetButtonBoxShadowVOffset = () => setAttributes( { buttonBoxShadowVOffset: 0 } );
	const resetButtonBoxShadowSpread = () => setAttributes( { buttonBoxShadowSpread: 0 } );
	const resetButtonBoxShadowBlur = () => setAttributes( { buttonBoxShadowBlur: 0 } );
	const resetButtonBoxShadowColor = () => setAttributes( { buttonBoxShadowColor: '#000000' } );
	const resetButtonBoxShadowOpacity = () => setAttributes( { buttonBoxShadowOpacity: 1 } );

	// Reset functions for hover box-shadow
	const resetHoverButtonAllBoxShadow = () => {
		setAttributes( {
			hoverButtonBoxShadowHOffset: 0,
			hoverButtonBoxShadowVOffset: 0,
			hoverButtonBoxShadowBlur: 0,
			hoverButtonBoxShadowSpread: 0,
			hoverButtonBoxShadowColor: '#000000',
			hoverButtonBoxShadowOpacity: 1
		} );
	};
	const resetHoverButtonBoxShadowHOffset = () => setAttributes( { hoverButtonBoxShadowHOffset: 0 } );
	const resetHoverButtonBoxShadowVOffset = () => setAttributes( { hoverButtonBoxShadowVOffset: 0 } );
	const resetHoverButtonBoxShadowSpread = () => setAttributes( { hoverButtonBoxShadowSpread: 0 } );
	const resetHoverButtonBoxShadowBlur = () => setAttributes( { hoverButtonBoxShadowBlur: 0 } );
	const resetHoverButtonBoxShadowColor = () => setAttributes( { hoverButtonBoxShadowColor: '#000000' } );
	const resetHoverButtonBoxShadowOpacity = () => setAttributes( { hoverButtonBoxShadowOpacity: 1 } );

	return (
		<>
			<PanelBody title = { __( 'Button Borders & Shadows', 'smart-social-media-buttons' ) } initialOpen = { false }>
				{/* Border style */}
				<BaseControl className="ssmb-border-style-control ssmb-border-setting" label = { __( 'Border Style', 'smart-social-media-buttons' ) } __nextHasNoMarginBottom = { true }>
					<div className="ssmb-control-wrapper">
						<ButtonGroup className="ssmb-border-style" style = { { flexGrow: 1 } }>
							<Button
								className="border-none"
								icon = { <BorderNoneIcon /> }
								label = { __( 'Border None', 'smart-social-media-buttons' ) }
								isPressed = { buttonBorderStyle === 'none' }
								onClick = { () => setAttributes( { buttonBorderStyle: 'none' } ) }
							/>
							<Button
								className="border-solid"
								icon = { <BorderSolidIcon /> }
								label = { __( 'Border Solid', 'smart-social-media-buttons' ) }
								isPressed = { buttonBorderStyle === 'solid' }
								onClick = { () => setAttributes( { buttonBorderStyle: 'solid' } ) }
							/>
							<Button
								className="border-dashed"
								icon = { <BorderDashedIcon /> }
								label = { __( 'Border Dashed', 'smart-social-media-buttons' ) }
								isPressed = { buttonBorderStyle === 'dashed' }
								onClick = { () => setAttributes( { buttonBorderStyle: 'dashed' } ) }
							/>
							<Button
								className="border-dotted"
								icon = { <BorderDottedIcon /> }
								label = { __( 'Border Dotted', 'smart-social-media-buttons' ) }
								isPressed = { buttonBorderStyle === 'dotted' }
								onClick = { () => setAttributes( { buttonBorderStyle: 'dotted' } ) }
							/>
						</ButtonGroup>
						<ResetIconButton
							currentAttributes = { attributes }
							attributeKeys = { [
								'buttonBorderStyle', 'buttonBorderColor', 'buttonBorderOpacity',
								'hoverButtonBorderColor', 'hoverButtonBorderOpacity',
								'buttonBorderTopWidthDesktop', 'buttonBorderRightWidthDesktop', 'buttonBorderBottomWidthDesktop', 'buttonBorderLeftWidthDesktop',
								'hoverButtonBorderTopWidthDesktop', 'hoverButtonBorderRightWidthDesktop', 'hoverButtonBorderBottomWidthDesktop', 'hoverButtonBorderLeftWidthDesktop',
								'buttonBorderTopWidthTablet', 'buttonBorderRightWidthTablet', 'buttonBorderBottomWidthTablet', 'buttonBorderLeftWidthTablet',
								'hoverButtonBorderTopWidthTablet', 'hoverButtonBorderRightWidthTablet', 'hoverButtonBorderBottomWidthTablet', 'hoverButtonBorderLeftWidthTablet',
								'buttonBorderTopWidthMobile', 'buttonBorderRightWidthMobile', 'buttonBorderBottomWidthMobile', 'buttonBorderLeftWidthMobile',
								'hoverButtonBorderTopWidthMobile', 'hoverButtonBorderRightWidthMobile', 'hoverButtonBorderBottomWidthMobile', 'hoverButtonBorderLeftWidthMobile'
							] }
							setAttributes = { setAttributes }
							onClick = { resetButtonBorderStyle }
							label = { __( 'Reset Border Style', 'smart-social-media-buttons' ) }
							panelTitle = { __( 'Button Borders & Shadows', 'smart-social-media-buttons' ) }
							blockType = 'ssmb/icon-button'
						/>
					</div>
				</BaseControl>

				{/* Borders width controls - only show if border style is not 'none' */}
				{ buttonBorderStyle !== 'none' && (
					<>
						<ButtonGroup className="ssmb-toggle-state-controls">
							<Button
								icon = { <NormalStateIcon /> }
								variant = { !isHovered ? 'primary' : 'secondary' }
								onClick = { () => handleHoverClick( false ) }
							>
								{__( 'Normal', 'smart-social-media-buttons' ) }
							</Button>
							<Button
								icon = { <HoverStateIcon /> }
								variant = { isHovered ? 'primary' : 'secondary' }
								onClick = { () => handleHoverClick( true ) }
							>
								{__( 'Hover', 'smart-social-media-buttons' ) }
							</Button>
						</ButtonGroup>

						{isHovered ? (
							<>
								{/* HOVER MODE */}
								<ResponsiveSyncControl
									attributes = { attributes }
									setAttributes = { setAttributes }
									label = { __( 'Hover Border Width', 'smart-social-media-buttons' ) }
									attributeKeys = { {
										top: { desktop: 'hoverButtonBorderTopWidthDesktop', tablet: 'hoverButtonBorderTopWidthTablet', mobile: 'hoverButtonBorderTopWidthMobile' },
										right: { desktop: 'hoverButtonBorderRightWidthDesktop', tablet: 'hoverButtonBorderRightWidthTablet', mobile: 'hoverButtonBorderRightWidthMobile' },
										bottom: { desktop: 'hoverButtonBorderBottomWidthDesktop', tablet: 'hoverButtonBorderBottomWidthTablet', mobile: 'hoverButtonBorderBottomWidthMobile' },
										left: { desktop: 'hoverButtonBorderLeftWidthDesktop', tablet: 'hoverButtonBorderLeftWidthTablet', mobile: 'hoverButtonBorderLeftWidthMobile' },
									} }
									minValues = { { desktop: 0, tablet: 0, mobile: 0 } }
									maxValues = { { desktop: 5, tablet: 5, mobile: 5 } }
									syncKey = "hoverButtonBorderWidthSync"
									defaultValue = { 0 }
									ResetComponent = { ResetIconButton }
								/>

								{/* Border color */}
								<BaseControl className="ssmb-color-palette-control" label = { __( 'Hover Border Color', 'smart-social-media-buttons' ) } __nextHasNoMarginBottom = { true }>
									<div className="ssmb-control-wrapper">
										<ColorPalette
											colors = { defaultColors }
											value = { hoverButtonBorderColor }
											onChange = { ( newColor ) => setAttributes( { hoverButtonBorderColor: newColor } ) }
											clearable
										/>
										<ResetIconButton
											currentAttributes = { attributes }
											attributeKeys = { ['hoverButtonBorderColor'] }
											setAttributes = { setAttributes }
											onClick = { resetHoverButtonBorderColor }
											label = { __( 'Reset Border Left', 'smart-social-media-buttons' ) }
											panelTitle = { __( 'Button Borders & Shadows', 'smart-social-media-buttons' ) }
											blockType = 'ssmb/icon-button'
										/>
									</div>
								</BaseControl>

								<BaseControl className="ssmb-color-opacity-control" label = { __( 'Hover Border Opacity', 'smart-social-media-buttons' ) } __nextHasNoMarginBottom = { true }>
									<div className="ssmb-control-wrapper">
										<RangeControl
											value = { hoverButtonBorderOpacity }
											onChange = { ( newOpacity ) => setAttributes( { hoverButtonBorderOpacity: newOpacity } ) }
											min = { 0 }
											max = { 1 }
											step = { 0.01 }
											__nextHasNoMarginBottom = { true }
										/>
										<DecimalNumberInput
											value = { hoverButtonBorderOpacity }
											onChange = { ( newOpacity ) => setAttributes( { hoverButtonBorderOpacity: newOpacity } ) }
											min = { 0 }
											max = { 1 }
											step = { 0.01 }
											className="ssmb-input-control"
											style = { { width: '64px' } }
										/>
										<ResetIconButton
											currentAttributes = { attributes }
											attributeKeys = { ['hoverButtonBorderOpacity'] }
											setAttributes = { setAttributes }
											onClick = { resetHoverButtonBorderColorOpacity }
											label = { __( 'Reset Border Opacity', 'smart-social-media-buttons' ) }
											panelTitle = { __( 'Button Borders & Shadows', 'smart-social-media-buttons' ) }
											blockType = 'ssmb/icon-button'
										/>
									</div>
								</BaseControl>
							</>
						) : (
							<>
								{/* NORMAL MODE */}
								<ResponsiveSyncControl
									attributes = { attributes }
									setAttributes = { setAttributes }
									label = { __( 'Border Width', 'smart-social-media-buttons' ) }
									attributeKeys = { {
										top: { desktop: 'buttonBorderTopWidthDesktop', tablet: 'buttonBorderTopWidthTablet', mobile: 'buttonBorderTopWidthMobile' },
										right: { desktop: 'buttonBorderRightWidthDesktop', tablet: 'buttonBorderRightWidthTablet', mobile: 'buttonBorderRightWidthMobile' },
										bottom: { desktop: 'buttonBorderBottomWidthDesktop', tablet: 'buttonBorderBottomWidthTablet', mobile: 'buttonBorderBottomWidthMobile' },
										left: { desktop: 'buttonBorderLeftWidthDesktop', tablet: 'buttonBorderLeftWidthTablet', mobile: 'buttonBorderLeftWidthMobile' },
									} }
									minValues = { { desktop: 0, tablet: 0, mobile: 0 } }
									maxValues = { { desktop: 5, tablet: 5, mobile: 5 } }
									syncKey = "buttonBorderWidthSync"
									defaultValue = { 0 }
									ResetComponent = { ResetIconButton }
									panelTitle = { __( 'Button Borders & Shadows', 'smart-social-media-buttons' ) }
									blockType = 'ssmb/icon-button'
								/>

								{/* Border color */}
								<BaseControl className="ssmb-color-palette-control" label = { __( 'Border Color', 'smart-social-media-buttons' ) } __nextHasNoMarginBottom = { true }>
									<div className="ssmb-control-wrapper">
										<ColorPalette
											colors = { defaultColors }
											value = { buttonBorderColor }
											onChange = { ( newColor ) => setAttributes( { buttonBorderColor: newColor } ) }
											clearable
										/>
										<ResetIconButton
											currentAttributes = { attributes }
											attributeKeys = { ['buttonBorderColor'] }
											setAttributes = { setAttributes }
											onClick = { resetButtonBorderColor }
											label = { __( 'Reset Border Left', 'smart-social-media-buttons' ) }
											panelTitle = { __( 'Button Borders & Shadows', 'smart-social-media-buttons' ) }
											blockType = 'ssmb/icon-button'
										/>
									</div>
								</BaseControl>

								<BaseControl className="ssmb-color-opacity-control" label = { __( 'Border Opacity', 'smart-social-media-buttons' ) } __nextHasNoMarginBottom = { true }>
									<div className="ssmb-control-wrapper">
										<RangeControl
											value = { buttonBorderOpacity }
											onChange = { ( newOpacity ) => setAttributes( { buttonBorderOpacity: newOpacity } ) }
											min = { 0 }
											max = { 1 }
											step = { 0.01 }
											__nextHasNoMarginBottom = { true }
										/>
										<DecimalNumberInput
											value = { buttonBorderOpacity }
											onChange = { ( newOpacity ) => setAttributes( { buttonBorderOpacity: newOpacity } ) }
											min = { 0 }
											max = { 1 }
											step = { 0.01 }
											className="ssmb-input-control"
											style = { { width: '64px' } }
										/>
										<ResetIconButton
											currentAttributes = { attributes }
											attributeKeys = { ['buttonBorderOpacity'] }
											setAttributes = { setAttributes }
											onClick = { resetButtonBorderColorOpacity }
											label = { __( 'Reset Border Opacity', 'smart-social-media-buttons' ) }
											panelTitle = { __( 'Button Borders & Shadows', 'smart-social-media-buttons' ) }
											blockType = 'ssmb/icon-button'
										/>
									</div>
								</BaseControl>
							</>
						) }
					</>
				) }

				{/* Radius controls */}
				<ResponsiveRadiusControl
					attributes = { attributes }
					setAttributes = { setAttributes }
					label = { __( 'Radius', 'smart-social-media-buttons' ) }
					attributeKeys = { {
						topLeft: { desktop: 'topLeftButtonRadiusDesktop', tablet: 'topLeftButtonRadiusTablet', mobile: 'topLeftButtonRadiusMobile' },
						topRight: { desktop: 'topRightButtonRadiusDesktop', tablet: 'topRightButtonRadiusTablet', mobile: 'topRightButtonRadiusMobile' },
						bottomLeft: { desktop: 'bottomLeftButtonRadiusDesktop', tablet: 'bottomLeftButtonRadiusTablet', mobile: 'bottomLeftButtonRadiusMobile' },
						bottomRight: { desktop: 'bottomRightButtonRadiusDesktop', tablet: 'bottomRightButtonRadiusTablet', mobile: 'bottomRightButtonRadiusMobile' },
					} }
					minValues = { { desktop: 0, tablet: 0, mobile: 0 } }
					maxValues = { { desktop: 100, tablet: 100, mobile: 100 } }
					syncKey = "buttonRadiusSync"
					defaultValue = { 24 }
					ResetComponent = { ResetIconButton }
					panelTitle = { __( 'Button Borders & Shadows', 'smart-social-media-buttons' ) }
					blockType = 'ssmb/icon-button'
				/>

				{/* Box Shadow - Horizontal and Vertical Offset */}
				<ButtonGroup className="ssmb-toggle-state-controls">
					<Button
						icon = { <NormalStateIcon /> }
						variant = {!isHovered ? 'primary' : 'secondary'}
						onClick = { () => handleHoverClick( false ) }
					>
						{__( 'Normal', 'smart-social-media-buttons' ) }
					</Button>
					<Button
						icon = { <HoverStateIcon /> }
						variant = {isHovered ? 'primary' : 'secondary'}
						onClick = { () => handleHoverClick( true ) }
					>
						{__( 'Hover', 'smart-social-media-buttons' ) }
					</Button>
				</ButtonGroup>

				{isHovered ? (
					<>
						{/* HOVER MODE */}
						{/* Box Shadow - Horizontal and Vertical Offset */}
						<BaseControl className="ssmb-box-shadow-h-offset-control" label = { __( 'Hover Horizontal Offset', 'smart-social-media-buttons' ) } __nextHasNoMarginBottom = { true }>
							<div className="ssmb-control-wrapper">
								<RangeControl
									value = { hoverButtonBoxShadowHOffset }
									onChange = { ( newValue ) => setAttributes( { hoverButtonBoxShadowHOffset: newValue } ) }
									min = { -100 }
									max = { 100 }
									__nextHasNoMarginBottom = { true }
								/>
								<NumberInput
									value = { hoverButtonBoxShadowHOffset }
									onChange = { ( newValue ) => setAttributes( { hoverButtonBoxShadowHOffset: newValue } ) }
									min = { -100 }
									className="ssmb-input-control"
									style = { { width: '64px' } }
								/>
								<ResetIconButton
									currentAttributes = { attributes }
									attributeKeys = { ['hoverButtonBoxShadowHOffset'] }
									setAttributes = { setAttributes }
									onClick = { resetHoverButtonBoxShadowHOffset }
									label = { __( 'Reset Horizontal Offset', 'smart-social-media-buttons' ) }
									panelTitle = { __( 'Button Borders & Shadows', 'smart-social-media-buttons' ) }
									blockType = 'ssmb/icon-button'
								/>
							</div>
						</BaseControl>

						<BaseControl className="ssmb-box-shadow-v-offset-control" label = { __( 'Hover Vertical Offset', 'smart-social-media-buttons' ) } __nextHasNoMarginBottom = { true }>
							<div className="ssmb-control-wrapper">
								<RangeControl
									value = { hoverButtonBoxShadowVOffset }
									onChange = { ( newValue ) => setAttributes( { hoverButtonBoxShadowVOffset: newValue } ) }
									min = { -100 }
									max = { 100 }
									__nextHasNoMarginBottom = { true }
								/>
								<NumberInput
									value = { hoverButtonBoxShadowVOffset }
									onChange = { ( newValue ) => setAttributes( { hoverButtonBoxShadowVOffset: newValue } ) }
									min = { -100 }
									className="ssmb-input-control"
									style = { { width: '64px' } }
								/>
								<ResetIconButton
									currentAttributes = { attributes }
									attributeKeys = { ['hoverButtonBoxShadowVOffset'] }
									setAttributes = { setAttributes }
									onClick = { resetHoverButtonBoxShadowVOffset }
									label = { __( 'Reset Vertical Offset', 'smart-social-media-buttons' ) }
									panelTitle = { __( 'Button Borders & Shadows', 'smart-social-media-buttons' ) }
									blockType = 'ssmb/icon-button'
								/>
							</div>
						</BaseControl>

						{/* Box Shadow - Blur and Spread */}
						<BaseControl className="ssmb-box-shadow-blur-control" label = { __( 'Hover Blur Radius', 'smart-social-media-buttons' ) } __nextHasNoMarginBottom = { true }>
							<div className="ssmb-control-wrapper">
								<RangeControl
									value = { hoverButtonBoxShadowBlur }
									onChange = { ( newValue ) => setAttributes( { hoverButtonBoxShadowBlur: newValue } ) }
									min = { 0 }
									max = { 100 }
									__nextHasNoMarginBottom = { true }
								/>
								<NumberInput
									value = { hoverButtonBoxShadowBlur }
									onChange = { ( newValue ) => setAttributes( { hoverButtonBoxShadowBlur: newValue } ) }
									min = { 0 }
									className="ssmb-input-control"
									style = { { width: '64px' } }
								/>
								<ResetIconButton
									currentAttributes = { attributes }
									attributeKeys = { ['hoverButtonBoxShadowBlur'] }
									setAttributes = { setAttributes }
									onClick = { resetHoverButtonBoxShadowBlur }
									label = { __( 'Reset Blur', 'smart-social-media-buttons' ) }
									panelTitle = { __( 'Button Borders & Shadows', 'smart-social-media-buttons' ) }
									blockType = 'ssmb/icon-button'
								/>
							</div>
						</BaseControl>

						<BaseControl className="ssmb-box-shadow-spread-control" label = { __( 'Hover Spread Radius', 'smart-social-media-buttons' ) } __nextHasNoMarginBottom = { true }>
							<div className="ssmb-control-wrapper">
								<RangeControl
									value = { hoverButtonBoxShadowSpread }
									onChange = { ( newValue ) => setAttributes( { hoverButtonBoxShadowSpread: newValue } ) }
									min = { 0 }
									max = { 100 }
									__nextHasNoMarginBottom = { true }
								/>
								<NumberInput
									value = { hoverButtonBoxShadowSpread }
									onChange = { ( newValue ) => setAttributes( { hoverButtonBoxShadowSpread: newValue } ) }
									min = { 0 }
									className="ssmb-input-control"
									style = { { width: '64px' } }
								/>
								<ResetIconButton
									currentAttributes = { attributes }
									attributeKeys = { ['hoverButtonBoxShadowSpread'] }
									setAttributes = { setAttributes }
									onClick = { resetHoverButtonBoxShadowSpread }
									label = { __( 'Reset Spread Radius', 'smart-social-media-buttons' ) }
									panelTitle = { __( 'Button Borders & Shadows', 'smart-social-media-buttons' ) }
									blockType = 'ssmb/icon-button'
								/>
							</div>
						</BaseControl>

						{/* Box Shadow - Color */}
						<BaseControl className="ssmb-color-palette-control" label = { __( 'Hover Box Shadow Color', 'smart-social-media-buttons' ) } __nextHasNoMarginBottom = { true }>
							<div className="ssmb-control-wrapper">
								<ColorPalette
									colors = { defaultColors }
									value = { hoverButtonBoxShadowColor || '#000000'}
									onChange = { ( newColor ) => setAttributes( { hoverButtonBoxShadowColor: newColor } ) }
									clearable
								/>
								<ResetIconButton
									currentAttributes = { attributes }
									attributeKeys = { ['hoverButtonBoxShadowColor'] }
									setAttributes = { setAttributes }
									onClick = { resetHoverButtonBoxShadowColor }
									label = { __( 'Reset Box Shadow Color', 'smart-social-media-buttons' ) }
									panelTitle = { __( 'Button Borders & Shadows', 'smart-social-media-buttons' ) }
									blockType = 'ssmb/icon-button'
								/>
							</div>
						</BaseControl>
						{/* Box Shadow - Opacity */}
						<BaseControl className="ssmb-color-opacity-control" label = { __( 'Hover Box Shadow Opacity', 'smart-social-media-buttons' ) } __nextHasNoMarginBottom = { true }>
							<div className="ssmb-control-wrapper">
								<RangeControl
									value = { hoverButtonBoxShadowOpacity }
									onChange = { ( newOpacity ) => setAttributes( { hoverButtonBoxShadowOpacity: newOpacity } ) }
									min = { 0 }
									max = { 1 }
									step = { 0.01 }
									__nextHasNoMarginBottom = { true }
								/>
								<DecimalNumberInput
									value = { hoverButtonBoxShadowOpacity }
									onChange = { ( newOpacity ) => setAttributes( { hoverButtonBoxShadowOpacity: newOpacity } ) }
									min = { 0 }
									max = { 1 }
									step = { 0.01 }
									className="ssmb-input-control"
									style = { { width: '64px' } }
								/>
								<ResetIconButton
									currentAttributes = { attributes }
									attributeKeys = { ['hoverButtonBoxShadowOpacity'] }
									setAttributes = { setAttributes }
									onClick = { resetHoverButtonBoxShadowOpacity }
									label = { __( 'Reset Box Shadow Opacity', 'smart-social-media-buttons' ) }
									panelTitle = { __( 'Button Borders & Shadows', 'smart-social-media-buttons' ) }
									blockType = 'ssmb/icon-button'
								/>
							</div>
						</BaseControl>

						{/* Reset All Button */}
						<div className="ssmb-control-wrapper ssmb-reset-all-shadow">
							<ResetIconButton
								currentAttributes = { attributes }
								attributeKeys = { ['hoverButtonBoxShadowHOffset', 'hoverButtonBoxShadowVOffset', 'hoverButtonBoxShadowBlur', 'hoverButtonBoxShadowSpread', 'hoverButtonBoxShadowColor', 'hoverButtonBoxShadowOpacity'] }
								setAttributes = { setAttributes }
								onClick = { resetHoverButtonAllBoxShadow }
								label = { __( 'Reset Box Shadow', 'smart-social-media-buttons' ) }
								panelTitle = { __( 'Button Borders & Shadows', 'smart-social-media-buttons' ) }
								blockType = 'ssmb/icon-button'
							/>
						</div>
					</>
				) : (
					<>
						{/* NORMAL MODE */}
						{/* Box Shadow - Horizontal and Vertical Offset */}
						<BaseControl className="ssmb-box-shadow-h-offset-control" label = { __( 'Horizontal Offset', 'smart-social-media-buttons' ) } __nextHasNoMarginBottom = { true }>
							<div className="ssmb-control-wrapper">
								<RangeControl
									value = { buttonBoxShadowHOffset }
									onChange = { ( newValue ) => setAttributes( { buttonBoxShadowHOffset: newValue } ) }
									min = { -100 }
									max = { 100 }
									__nextHasNoMarginBottom = { true }
								/>
								<NumberInput
									value = { buttonBoxShadowHOffset }
									onChange = { ( newValue ) => setAttributes( { buttonBoxShadowHOffset: newValue } ) }
									min = { -100 }
									className="ssmb-input-control"
									style = { { width: '64px' } }
								/>
								<ResetIconButton
									currentAttributes = { attributes }
									attributeKeys = { ['buttonBoxShadowHOffset'] }
									setAttributes = { setAttributes }
									onClick = { resetButtonBoxShadowHOffset }
									label = { __( 'Reset Horizontal Offset', 'smart-social-media-buttons' ) }
									panelTitle = { __( 'Button Borders & Shadows', 'smart-social-media-buttons' ) }
									blockType = 'ssmb/icon-button'
								/>
							</div>
						</BaseControl>

						<BaseControl className="ssmb-box-shadow-v-offset-control" label = { __( 'Vertical Offset', 'smart-social-media-buttons' ) } __nextHasNoMarginBottom = { true }>
							<div className="ssmb-control-wrapper">
								<RangeControl
									value = { buttonBoxShadowVOffset }
									onChange = { ( newValue ) => setAttributes( { buttonBoxShadowVOffset: newValue } ) }
									min = { -100 }
									max = { 100 }
									__nextHasNoMarginBottom = { true }
								/>
								<NumberInput
									value = { buttonBoxShadowVOffset }
									onChange = { ( newValue ) => setAttributes( { buttonBoxShadowVOffset: newValue } ) }
									min = { -100 }
									className="ssmb-input-control"
									style = { { width: '64px' } }
								/>
								<ResetIconButton
									currentAttributes = { attributes }
									attributeKeys = { ['buttonBoxShadowVOffset'] }
									setAttributes = { setAttributes }
									onClick = { resetButtonBoxShadowVOffset }
									label = { __( 'Reset Vertical Offset', 'smart-social-media-buttons' ) }
									panelTitle = { __( 'Button Borders & Shadows', 'smart-social-media-buttons' ) }
									blockType = 'ssmb/icon-button'
								/>
							</div>
						</BaseControl>

						{/* Box Shadow - Blur and Spread */}
						<BaseControl className="ssmb-box-shadow-blur-control" label = { __( 'Blur Radius', 'smart-social-media-buttons' ) } __nextHasNoMarginBottom = { true }>
							<div className="ssmb-control-wrapper">
								<RangeControl
									value = { buttonBoxShadowBlur }
									onChange = { ( newValue ) => setAttributes( { buttonBoxShadowBlur: newValue } ) }
									min = { 0 }
									max = { 100 }
									__nextHasNoMarginBottom = { true }
								/>
								<NumberInput
									value = { buttonBoxShadowBlur }
									onChange = { ( newValue ) => setAttributes( { buttonBoxShadowBlur: newValue } ) }
									min = { 0 }
									className="ssmb-input-control"
									style = { { width: '64px' } }
								/>
								<ResetIconButton
									currentAttributes = { attributes }
									attributeKeys = { ['buttonBoxShadowBlur'] }
									setAttributes = { setAttributes }
									onClick = { resetButtonBoxShadowBlur }
									label = { __( 'Reset Blur', 'smart-social-media-buttons' ) }
									panelTitle = { __( 'Button Borders & Shadows', 'smart-social-media-buttons' ) }
									blockType = 'ssmb/icon-button'
								/>
							</div>
						</BaseControl>

						<BaseControl className="ssmb-box-shadow-spread-control" label = { __( 'Spread Radius', 'smart-social-media-buttons' ) } __nextHasNoMarginBottom = { true }>
							<div className="ssmb-control-wrapper">
								<RangeControl
									value = { buttonBoxShadowSpread }
									onChange = { ( newValue ) => setAttributes( { buttonBoxShadowSpread: newValue } ) }
									min = { 0 }
									max = { 100 }
									__nextHasNoMarginBottom = { true }
								/>
								<NumberInput
									value = { buttonBoxShadowSpread }
									onChange = { ( newValue ) => setAttributes( { buttonBoxShadowSpread: newValue } ) }
									min = { 0 }
									className="ssmb-input-control"
									style = { { width: '64px' } }
								/>
								<ResetIconButton
									currentAttributes = { attributes }
									attributeKeys = { ['buttonBoxShadowSpread'] }
									setAttributes = { setAttributes }
									onClick = { resetButtonBoxShadowSpread }
									label = { __( 'Reset Spread Radius', 'smart-social-media-buttons' ) }
									panelTitle = { __( 'Button Borders & Shadows', 'smart-social-media-buttons' ) }
									blockType = 'ssmb/icon-button'
								/>
							</div>
						</BaseControl>

						{/* Box Shadow - Color */}
						<BaseControl className="ssmb-color-palette-control" label = { __( 'Box Shadow Color', 'smart-social-media-buttons' ) } __nextHasNoMarginBottom = { true }>
							<div className="ssmb-control-wrapper">
								<ColorPalette
									colors = { defaultColors }
									value = { buttonBoxShadowColor || '#000000'}
									onChange = { ( newColor ) => setAttributes( { buttonBoxShadowColor: newColor } ) }
									clearable
								/>
								<ResetIconButton
									currentAttributes = { attributes }
									attributeKeys = { ['buttonBoxShadowColor'] }
									setAttributes = { setAttributes }
									onClick = { resetButtonBoxShadowColor }
									label = { __( 'Reset Box Shadow Color', 'smart-social-media-buttons' ) }
									panelTitle = { __( 'Button Borders & Shadows', 'smart-social-media-buttons' ) }
									blockType = 'ssmb/icon-button'
								/>
							</div>
						</BaseControl>
						{/* Box Shadow - Opacity */}
						<BaseControl className="ssmb-color-opacity-control" label = { __( 'Box Shadow Opacity', 'smart-social-media-buttons' ) } __nextHasNoMarginBottom = { true }>
							<div className="ssmb-control-wrapper">
								<RangeControl
									value = { buttonBoxShadowOpacity }
									onChange = { ( newOpacity ) => setAttributes( { buttonBoxShadowOpacity: newOpacity } ) }
									min = { 0 }
									max = { 1 }
									step = { 0.01 }
									__nextHasNoMarginBottom = { true }
								/>
								<DecimalNumberInput
									value = { buttonBoxShadowOpacity }
									onChange = { ( newOpacity ) => setAttributes( { buttonBoxShadowOpacity: newOpacity } ) }
									min = { 0 }
									max = { 1 }
									step = { 0.01 }
									className="ssmb-input-control"
									style = { { width: '64px' } }
								/>
								<ResetIconButton
									currentAttributes = { attributes }
									attributeKeys = { ['buttonBoxShadowOpacity'] }
									setAttributes = { setAttributes }
									onClick = { resetButtonBoxShadowOpacity }
									label = { __( 'Reset Box Shadow Opacity', 'smart-social-media-buttons' ) }
									panelTitle = { __( 'Button Borders & Shadows', 'smart-social-media-buttons' ) }
									blockType = 'ssmb/icon-button'
								/>
							</div>
						</BaseControl>

						{/* Reset All Button */}
						<div className="ssmb-control-wrapper ssmb-reset-all-shadow">
							<ResetIconButton
								currentAttributes = { attributes }
								attributeKeys = { ['buttonBoxShadowHOffset', 'buttonBoxShadowVOffset', 'buttonBoxShadowBlur', 'buttonBoxShadowSpread', 'buttonBoxShadowColor', 'buttonBoxShadowOpacity'] }
								setAttributes = { setAttributes }
								onClick = { resetButtonAllBoxShadow }
								label = { __( 'Reset Box Shadow', 'smart-social-media-buttons' ) }
								panelTitle = { __( 'Button Borders & Shadows', 'smart-social-media-buttons' ) }
								blockType = 'ssmb/icon-button'
							/>
						</div>
					</>
				) }
			</PanelBody>
		</>
	);
}
