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 BlockButtonBorderShadowPanel( { attributes, setAttributes, isHovered, handleHoverClick } ) {
	const {
		blockButtonBorderStyle, blockButtonBorderColor, blockButtonBorderOpacity,
		hoverBlockButtonBorderColor, hoverBlockButtonBorderOpacity,
		blockButtonBoxShadowHOffset, blockButtonBoxShadowVOffset, blockButtonBoxShadowBlur, blockButtonBoxShadowSpread, blockButtonBoxShadowColor, blockButtonBoxShadowOpacity,
		hoverBlockButtonBoxShadowHOffset, hoverBlockButtonBoxShadowVOffset, hoverBlockButtonBoxShadowBlur, hoverBlockButtonBoxShadowSpread, hoverBlockButtonBoxShadowColor, hoverBlockButtonBoxShadowOpacity,
	} = attributes;

	// Use the custom hook to handle the panel class update
	useIconPanelBodyClass( attributes, [
		'blockButtonBorderStyle', 'blockButtonBorderOpacity', 'blockButtonBorderColor', 'hoverBlockButtonBorderColor', 'hoverBlockButtonBorderOpacity',

		'blockButtonBorderTopWidthDesktop', 'blockButtonBorderRightWidthDesktop', 'blockButtonBorderBottomWidthDesktop', 'blockButtonBorderLeftWidthDesktop',
		'hoverBlockButtonBorderTopWidthDesktop', 'hoverBlockButtonBorderRightWidthDesktop', 'hoverBlockButtonBorderBottomWidthDesktop', 'hoverBlockButtonBorderLeftWidthDesktop',

		'blockButtonBorderTopWidthTablet', 'blockButtonBorderRightWidthTablet', 'blockButtonBorderBottomWidthTablet', 'blockButtonBorderLeftWidthTablet',
		'hoverBlockButtonBorderTopWidthTablet', 'hoverBlockButtonBorderRightWidthTablet', 'hoverBlockButtonBorderBottomWidthTablet', 'hoverBlockButtonBorderLeftWidthTablet',

		'blockButtonBorderTopWidthMobile', 'blockButtonBorderRightWidthMobile', 'blockButtonBorderBottomWidthMobile', 'blockButtonBorderLeftWidthMobile',
		'hoverBlockButtonBorderTopWidthMobile', 'hoverBlockButtonBorderRightWidthMobile', 'hoverBlockButtonBorderBottomWidthMobile', 'hoverBlockButtonBorderLeftWidthMobile',

		'topLeftBlockButtonRadiusDesktop', 'topLeftBlockButtonRadiusTablet', 'topLeftBlockButtonRadiusMobile',
		'topRightBlockButtonRadiusDesktop', 'topRightBlockButtonRadiusTablet', 'topRightBlockButtonRadiusMobile',
		'bottomLeftBlockButtonRadiusDesktop', 'bottomLeftBlockButtonRadiusTablet', 'bottomLeftBlockButtonRadiusMobile',
		'bottomRightBlockButtonRadiusDesktop', 'bottomRightBlockButtonRadiusTablet', 'bottomRightBlockButtonRadiusMobile',

		'blockButtonBoxShadowHOffset', 'blockButtonBoxShadowVOffset', 'blockButtonBoxShadowBlur',
		'blockButtonBoxShadowSpread', 'blockButtonBoxShadowColor', 'blockButtonBoxShadowOpacity',

		'hoverBlockButtonBoxShadowHOffset', 'hoverBlockButtonBoxShadowVOffset', 'hoverBlockButtonBoxShadowBlur',
		'hoverBlockButtonBoxShadowSpread', 'hoverBlockButtonBoxShadowColor', 'hoverBlockButtonBoxShadowOpacity'
	], 'desktop', __( 'Block Borders & Shadows', 'smart-social-media-buttons' ) );

	// Reset functions for border
	const resetBlockButtonBorderStyle = () => setAttributes( {
		blockButtonBorderStyle: 'none', blockButtonBorderOpacity: 1, blockButtonBorderColor: '#000000', hoverBlockButtonBorderColor: '#000000', hoverBlockButtonBorderOpacity: 1,

		blockButtonBorderTopWidthDesktop: 1, blockButtonBorderRightWidthDesktop: 1, blockButtonBorderBottomWidthDesktop: 1, blockButtonBorderLeftWidthDesktop: 1,
		hoverBlockButtonBorderTopWidthDesktop: 1, hoverBlockButtonBorderRightWidthDesktop: 1, hoverBlockButtonBorderBottomWidthDesktop: 1, hoverBlockButtonBorderLeftWidthDesktop: 1,

		blockButtonBorderTopWidthTablet: 1, blockButtonBorderRightWidthTablet: 1, blockButtonBorderBottomWidthTablet: 1, blockButtonBorderLeftWidthTablet: 1,
		hoverBlockButtonBorderTopWidthTablet: 1, hoverBlockButtonBorderRightWidthTablet: 1, hoverBlockButtonBorderBottomWidthTablet: 1, hoverBlockButtonBorderLeftWidthTablet: 1,

		blockButtonBorderTopWidthMobile: 1, blockButtonBorderRightWidthMobile: 1, blockButtonBorderBottomWidthMobile: 1, blockButtonBorderLeftWidthMobile: 1,
		hoverBlockButtonBorderTopWidthMobile: 1, hoverBlockButtonBorderRightWidthMobile: 1, hoverBlockButtonBorderBottomWidthMobile: 1, hoverBlockButtonBorderLeftWidthMobile: 1,
	} );
	const resetBlockButtonBorderColor = () => setAttributes( { blockButtonBorderColor: '#000000' } );
	const resetBlockButtonBorderColorOpacity = () => setAttributes( { blockButtonBorderOpacity: 1 } );

	// Reset functions for hover border
	const resetHoverBlockButtonBorderColor = () => setAttributes( { hoverBlockButtonBorderColor: '#000000' } );
	const resetHoverBlockButtonBorderColorOpacity = () => setAttributes( { hoverBlockButtonBorderOpacity: 1 } );

	// Reset functions for box-shadow
	const resetBlockButtonAllBoxShadow = () => {
		setAttributes( {
			blockButtonBoxShadowHOffset: 0,
			blockButtonBoxShadowVOffset: 0,
			blockButtonBoxShadowBlur: 0,
			blockButtonBoxShadowSpread: 0,
			blockButtonBoxShadowColor: '#000000',
			blockButtonBoxShadowOpacity: 1
		} );
	};
	const resetBlockButtonBoxShadowHOffset = () => setAttributes( { blockButtonBoxShadowHOffset: 0 } );
	const resetBlockButtonBoxShadowVOffset = () => setAttributes( { blockButtonBoxShadowVOffset: 0 } );
	const resetBlockButtonBoxShadowSpread = () => setAttributes( { blockButtonBoxShadowSpread: 0 } );
	const resetBlockButtonBoxShadowBlur = () => setAttributes( { blockButtonBoxShadowBlur: 0 } );
	const resetBlockButtonBoxShadowColor = () => setAttributes( { blockButtonBoxShadowColor: '#000000' } );
	const resetBlockButtonBoxShadowOpacity = () => setAttributes( { blockButtonBoxShadowOpacity: 1 } );

	// Reset functions for hover box-shadow
	const resetHoverBlockButtonAllBoxShadow = () => {
		setAttributes( {
			hoverBlockButtonBoxShadowHOffset: 0,
			hoverBlockButtonBoxShadowVOffset: 0,
			hoverBlockButtonBoxShadowBlur: 0,
			hoverBlockButtonBoxShadowSpread: 0,
			hoverBlockButtonBoxShadowColor: '#000000',
			hoverBlockButtonBoxShadowOpacity: 1
		} );
	};
	const resetHoverBlockButtonBoxShadowHOffset = () => setAttributes( { hoverBlockButtonBoxShadowHOffset: 0 } );
	const resetHoverBlockButtonBoxShadowVOffset = () => setAttributes( { hoverBlockButtonBoxShadowVOffset: 0 } );
	const resetHoverBlockButtonBoxShadowSpread = () => setAttributes( { hoverBlockButtonBoxShadowSpread: 0 } );
	const resetHoverBlockButtonBoxShadowBlur = () => setAttributes( { hoverBlockButtonBoxShadowBlur: 0 } );
	const resetHoverBlockButtonBoxShadowColor = () => setAttributes( { hoverBlockButtonBoxShadowColor: '#000000' } );
	const resetHoverBlockButtonBoxShadowOpacity = () => setAttributes( { hoverBlockButtonBoxShadowOpacity: 1 } );

	return (
		<>
			<PanelBody title = { __( 'Block 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 = { blockButtonBorderStyle === 'none' }
								onClick = { () => setAttributes( { blockButtonBorderStyle: 'none' } ) }
							/>
							<Button
								className="border-solid"
								icon = { <BorderSolidIcon /> }
								label = { __( 'Border Solid', 'smart-social-media-buttons' ) }
								isPressed = { blockButtonBorderStyle === 'solid' }
								onClick = { () => setAttributes( { blockButtonBorderStyle: 'solid' } ) }
							/>
							<Button
								className="border-dashed"
								icon = { <BorderDashedIcon /> }
								label = { __( 'Border Dashed', 'smart-social-media-buttons' ) }
								isPressed = { blockButtonBorderStyle === 'dashed' }
								onClick = { () => setAttributes( { blockButtonBorderStyle: 'dashed' } ) }
							/>
							<Button
								className="border-dotted"
								icon = { <BorderDottedIcon /> }
								label = { __( 'Border Dotted', 'smart-social-media-buttons' ) }
								isPressed = { blockButtonBorderStyle === 'dotted' }
								onClick = { () => setAttributes( { blockButtonBorderStyle: 'dotted' } ) }
							/>
						</ButtonGroup>
						<ResetIconButton
							currentAttributes = { attributes }
							attributeKeys = { [
								'blockButtonBorderStyle', 'blockButtonBorderColor', 'blockButtonBorderOpacity',
								'hoverBlockButtonBorderColor', 'hoverBlockButtonBorderOpacity',
								'blockButtonBorderTopWidthDesktop', 'blockButtonBorderRightWidthDesktop', 'blockButtonBorderBottomWidthDesktop', 'blockButtonBorderLeftWidthDesktop',
								'hoverBlockButtonBorderTopWidthDesktop', 'hoverBlockButtonBorderRightWidthDesktop', 'hoverBlockButtonBorderBottomWidthDesktop', 'hoverBlockButtonBorderLeftWidthDesktop',
								'blockButtonBorderTopWidthTablet', 'blockButtonBorderRightWidthTablet', 'blockButtonBorderBottomWidthTablet', 'blockButtonBorderLeftWidthTablet',
								'hoverBlockButtonBorderTopWidthTablet', 'hoverBlockButtonBorderRightWidthTablet', 'hoverBlockButtonBorderBottomWidthTablet', 'hoverBlockButtonBorderLeftWidthTablet',
								'blockButtonBorderTopWidthMobile', 'blockButtonBorderRightWidthMobile', 'blockButtonBorderBottomWidthMobile', 'blockButtonBorderLeftWidthMobile',
								'hoverBlockButtonBorderTopWidthMobile', 'hoverBlockButtonBorderRightWidthMobile', 'hoverBlockButtonBorderBottomWidthMobile', 'hoverBlockButtonBorderLeftWidthMobile'
							] }
							setAttributes = { setAttributes }
							onClick = { resetBlockButtonBorderStyle }
							label = { __( 'Reset Border Style', 'smart-social-media-buttons' ) }
							panelTitle = { __( 'Block Borders & Shadows', 'smart-social-media-buttons' ) }
							blockType = 'ssmb/icon-button'
						/>
					</div>
				</BaseControl>

				{/* Borders width controls - only show if border style is not 'none' */}
				{ blockButtonBorderStyle !== '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: 'hoverBlockButtonBorderTopWidthDesktop', tablet: 'hoverBlockButtonBorderTopWidthTablet', mobile: 'hoverBlockButtonBorderTopWidthMobile' },
										right: { desktop: 'hoverBlockButtonBorderRightWidthDesktop', tablet: 'hoverBlockButtonBorderRightWidthTablet', mobile: 'hoverBlockButtonBorderRightWidthMobile' },
										bottom: { desktop: 'hoverBlockButtonBorderBottomWidthDesktop', tablet: 'hoverBlockButtonBorderBottomWidthTablet', mobile: 'hoverBlockButtonBorderBottomWidthMobile' },
										left: { desktop: 'hoverBlockButtonBorderLeftWidthDesktop', tablet: 'hoverBlockButtonBorderLeftWidthTablet', mobile: 'hoverBlockButtonBorderLeftWidthMobile' },
									} }
									minValues = { { desktop: 0, tablet: 0, mobile: 0 } }
									maxValues = { { desktop: 10, tablet: 10, mobile: 10 } }
									syncKey = "hoverBlockButtonBorderWidthSync"
									defaultValue = { 0 }
									ResetComponent = { ResetIconButton }
									panelTitle = { __( 'Block Borders & Shadows', 'smart-social-media-buttons' ) }
									blockType = 'ssmb/icon-button'
								/>

								{/* 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 = { hoverBlockButtonBorderColor }
											onChange = { ( newColor ) => setAttributes( { hoverBlockButtonBorderColor: newColor } ) }
											clearable
										/>
										<ResetIconButton
											currentAttributes = { attributes }
											attributeKeys = { ['hoverBlockButtonBorderColor'] }
											setAttributes = { setAttributes }
											onClick = { resetHoverBlockButtonBorderColor }
											label = { __( 'Reset Border Left', 'smart-social-media-buttons' ) }
											panelTitle = { __( 'Block 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 = { hoverBlockButtonBorderOpacity }
											onChange = { ( newOpacity ) => setAttributes( { hoverBlockButtonBorderOpacity: newOpacity } ) }
											min = { 0 }
											max = { 1 }
											step = { 0.01 }
											__nextHasNoMarginBottom = { true }
										/>
										<DecimalNumberInput
											value = { hoverBlockButtonBorderOpacity }
											onChange = { ( newOpacity ) => setAttributes( { hoverBlockButtonBorderOpacity: newOpacity } ) }
											min = { 0 }
											max = { 1 }
											step = { 0.01 }
											className="ssmb-input-control"
											style = { { width: '64px' } }
										/>
										<ResetIconButton
											currentAttributes = { attributes }
											attributeKeys = { ['hoverBlockButtonBorderOpacity'] }
											setAttributes = { setAttributes }
											onClick = { resetHoverBlockButtonBorderColorOpacity }
											label = { __( 'Reset Border Opacity', 'smart-social-media-buttons' ) }
											panelTitle = { __( 'Block Borders & Shadows', 'smart-social-media-buttons' ) }
											blockType = 'ssmb/icon-button'
										/>
									</div>
								</BaseControl>
							</>
						) : (
							<>
								{/* NORMAL MODE */}
								<ResponsiveSyncControl
									attributes = { attributes }
									setAttributes = { setAttributes }
									label = { __( 'Hover Border Width', 'smart-social-media-buttons' ) }
									attributeKeys = { {
										top: { desktop: 'blockButtonBorderTopWidthDesktop', tablet: 'blockButtonBorderTopWidthTablet', mobile: 'blockButtonBorderTopWidthMobile' },
										right: { desktop: 'blockButtonBorderRightWidthDesktop', tablet: 'blockButtonBorderRightWidthTablet', mobile: 'blockButtonBorderRightWidthMobile' },
										bottom: { desktop: 'blockButtonBorderBottomWidthDesktop', tablet: 'blockButtonBorderBottomWidthTablet', mobile: 'blockButtonBorderBottomWidthMobile' },
										left: { desktop: 'blockButtonBorderLeftWidthDesktop', tablet: 'blockButtonBorderLeftWidthTablet', mobile: 'blockButtonBorderLeftWidthMobile' },
									} }
									minValues = { { desktop: 0, tablet: 0, mobile: 0 } }
									maxValues = { { desktop: 10, tablet: 10, mobile: 10 } }
									syncKey = "blockButtonBorderWidthSync"
									defaultValue = { 0 }
									ResetComponent = { ResetIconButton }
									panelTitle = { __( 'Block 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 = { blockButtonBorderColor }
											onChange = { ( newColor ) => setAttributes( { blockButtonBorderColor: newColor } ) }
											clearable
										/>
										<ResetIconButton
											currentAttributes = { attributes }
											attributeKeys = { ['blockButtonBorderColor'] }
											setAttributes = { setAttributes }
											onClick = { resetBlockButtonBorderColor }
											label = { __( 'Reset Border Left', 'smart-social-media-buttons' ) }
											panelTitle = { __( 'Block 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 = { blockButtonBorderOpacity }
											onChange = { ( newOpacity ) => setAttributes( { blockButtonBorderOpacity: newOpacity } ) }
											min = { 0 }
											max = { 1 }
											step = { 0.01 }
											__nextHasNoMarginBottom = { true }
										/>
										<DecimalNumberInput
											value = { blockButtonBorderOpacity }
											onChange = { ( newOpacity ) => setAttributes( { blockButtonBorderOpacity: newOpacity } ) }
											min = { 0 }
											max = { 1 }
											step = { 0.01 }
											className="ssmb-input-control"
											style = { { width: '64px' } }
										/>
										<ResetIconButton
											currentAttributes = { attributes }
											attributeKeys = { ['blockButtonBorderOpacity'] }
											setAttributes = { setAttributes }
											onClick = { resetBlockButtonBorderColorOpacity }
											label = { __( 'Reset Border Opacity', 'smart-social-media-buttons' ) }
											panelTitle = { __( 'Block 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: 'topLeftBlockButtonRadiusDesktop', tablet: 'topLeftBlockButtonRadiusTablet', mobile: 'topLeftBlockButtonRadiusMobile' },
						topRight: { desktop: 'topRightBlockButtonRadiusDesktop', tablet: 'topRightBlockButtonRadiusTablet', mobile: 'topRightBlockButtonRadiusMobile' },
						bottomLeft: { desktop: 'bottomLeftBlockButtonRadiusDesktop', tablet: 'bottomLeftBlockButtonRadiusTablet', mobile: 'bottomLeftBlockButtonRadiusMobile' },
						bottomRight: { desktop: 'bottomRightBlockButtonRadiusDesktop', tablet: 'bottomRightBlockButtonRadiusTablet', mobile: 'bottomRightBlockButtonRadiusMobile' },
					} }
					minValues = { { desktop: 0, tablet: 0, mobile: 0 } }
					maxValues = { { desktop: 10, tablet: 10, mobile: 10 } }
					syncKey = "blockButtonRadiusSync"
					defaultValue = { 0 }
					ResetComponent = { ResetIconButton }
					panelTitle = { __( 'Block 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 = { hoverBlockButtonBoxShadowHOffset }
									onChange = { ( newValue ) => setAttributes( { hoverBlockButtonBoxShadowHOffset: newValue } ) }
									min = { -100 }
									max = { 100 }
									__nextHasNoMarginBottom = { true }
								/>
								<NumberInput
									value = { hoverBlockButtonBoxShadowHOffset }
									onChange = { ( newValue ) => setAttributes( { hoverBlockButtonBoxShadowHOffset: newValue } ) }
									min = { -100 }
									className="ssmb-input-control"
									style = { { width: '64px' } }
								/>
								<ResetIconButton
									currentAttributes = { attributes }
									attributeKeys = { ['hoverBlockButtonBoxShadowHOffset'] }
									setAttributes = { setAttributes }
									onClick = { resetHoverBlockButtonBoxShadowHOffset }
									label = { __( 'Reset Horizontal Offset', 'smart-social-media-buttons' ) }
									panelTitle = { __( 'Block 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 = { hoverBlockButtonBoxShadowVOffset }
									onChange = { ( newValue ) => setAttributes( { hoverBlockButtonBoxShadowVOffset: newValue } ) }
									min = { -100 }
									max = { 100 }
									__nextHasNoMarginBottom = { true }
								/>
								<NumberInput
									value = { hoverBlockButtonBoxShadowVOffset }
									onChange = { ( newValue ) => setAttributes( { hoverBlockButtonBoxShadowVOffset: newValue } ) }
									min = { -100 }
									className="ssmb-input-control"
									style = { { width: '64px' } }
								/>
								<ResetIconButton
									currentAttributes = { attributes }
									attributeKeys = { ['hoverBlockButtonBoxShadowVOffset'] }
									setAttributes = { setAttributes }
									onClick = { resetHoverBlockButtonBoxShadowVOffset }
									label = { __( 'Reset Vertical Offset', 'smart-social-media-buttons' ) }
									panelTitle = { __( 'Block 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 = { hoverBlockButtonBoxShadowBlur }
									onChange = { ( newValue ) => setAttributes( { hoverBlockButtonBoxShadowBlur: newValue } ) }
									min = { 0 }
									max = { 100 }
									__nextHasNoMarginBottom = { true }
								/>
								<NumberInput
									value = { hoverBlockButtonBoxShadowBlur }
									onChange = { ( newValue ) => setAttributes( { hoverBlockButtonBoxShadowBlur: newValue } ) }
									min = { 0 }
									className="ssmb-input-control"
									style = { { width: '64px' } }
								/>
								<ResetIconButton
									currentAttributes = { attributes }
									attributeKeys = { ['hoverBlockButtonBoxShadowBlur'] }
									setAttributes = { setAttributes }
									onClick = { resetHoverBlockButtonBoxShadowBlur }
									label = { __( 'Reset Blur', 'smart-social-media-buttons' ) }
									panelTitle = { __( 'Block 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 = { hoverBlockButtonBoxShadowSpread }
									onChange = { ( newValue ) => setAttributes( { hoverBlockButtonBoxShadowSpread: newValue } ) }
									min = { 0 }
									max = { 100 }
									__nextHasNoMarginBottom = { true }
								/>
								<NumberInput
									value = { hoverBlockButtonBoxShadowSpread }
									onChange = { ( newValue ) => setAttributes( { hoverBlockButtonBoxShadowSpread: newValue } ) }
									min = { 0 }
									className="ssmb-input-control"
									style = { { width: '64px' } }
								/>
								<ResetIconButton
									currentAttributes = { attributes }
									attributeKeys = { ['hoverBlockButtonBoxShadowSpread'] }
									setAttributes = { setAttributes }
									onClick = { resetHoverBlockButtonBoxShadowSpread }
									label = { __( 'Reset Spread Radius', 'smart-social-media-buttons' ) }
									panelTitle = { __( 'Block 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 = { hoverBlockButtonBoxShadowColor || '#000000' }
									onChange = { ( newColor ) => setAttributes( { hoverBlockButtonBoxShadowColor: newColor } ) }
									clearable
								/>
								<ResetIconButton
									currentAttributes = { attributes }
									attributeKeys = { ['hoverBlockButtonBoxShadowColor'] }
									setAttributes = { setAttributes }
									onClick = { resetHoverBlockButtonBoxShadowColor }
									label = { __( 'Reset Box Shadow Color', 'smart-social-media-buttons' ) }
									panelTitle = { __( 'Block 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 = { hoverBlockButtonBoxShadowOpacity }
									onChange = { ( newOpacity ) => setAttributes( { hoverBlockButtonBoxShadowOpacity: newOpacity } ) }
									min = { 0 }
									max = { 1 }
									step = { 0.01 }
									__nextHasNoMarginBottom = { true }
								/>
								<DecimalNumberInput
									value = { hoverBlockButtonBoxShadowOpacity }
									onChange = { ( newOpacity ) => setAttributes( { hoverBlockButtonBoxShadowOpacity: newOpacity } ) }
									min = { 0 }
									max = { 1 }
									step = { 0.01 }
									className="ssmb-input-control"
									style = { { width: '64px' } }
								/>
								<ResetIconButton
									currentAttributes = { attributes }
									attributeKeys = { ['hoverBlockButtonBoxShadowOpacity'] }
									setAttributes = { setAttributes }
									onClick = { resetHoverBlockButtonBoxShadowOpacity }
									label = { __( 'Reset Box Shadow Opacity', 'smart-social-media-buttons' ) }
									panelTitle = { __( 'Block 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 = { ['hoverBlockButtonBoxShadowHOffset', 'hoverBlockButtonBoxShadowVOffset', 'hoverBlockButtonBoxShadowBlur', 'hoverBlockButtonBoxShadowSpread', 'hoverBlockButtonBoxShadowColor', 'hoverBlockButtonBoxShadowOpacity'] }
								setAttributes = { setAttributes }
								onClick = { resetHoverBlockButtonAllBoxShadow }
								label = { __( 'Reset Box Shadow', 'smart-social-media-buttons' ) }
								panelTitle = { __( 'Block 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 = { blockButtonBoxShadowHOffset }
									onChange = { ( newValue ) => setAttributes( { blockButtonBoxShadowHOffset: newValue } ) }
									min = { -100 }
									max = { 100 }
									__nextHasNoMarginBottom = { true }
								/>
								<NumberInput
									value = { blockButtonBoxShadowHOffset }
									onChange = { ( newValue ) => setAttributes( { blockButtonBoxShadowHOffset: newValue } ) }
									min = { -100 }
									className="ssmb-input-control"
									style = { { width: '64px' } }
								/>
								<ResetIconButton
									currentAttributes = { attributes }
									attributeKeys = { ['blockButtonBoxShadowHOffset'] }
									setAttributes = { setAttributes }
									onClick = { resetBlockButtonBoxShadowHOffset }
									label = { __( 'Reset Horizontal Offset', 'smart-social-media-buttons' ) }
									panelTitle = { __( 'Block 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 = { blockButtonBoxShadowVOffset }
									onChange = { ( newValue ) => setAttributes( { blockButtonBoxShadowVOffset: newValue } ) }
									min = { -100 }
									max = { 100 }
									__nextHasNoMarginBottom = { true }
								/>
								<NumberInput
									value = { blockButtonBoxShadowVOffset }
									onChange = { ( newValue ) => setAttributes( { blockButtonBoxShadowVOffset: newValue } ) }
									min = { -100 }
									className="ssmb-input-control"
									style = { { width: '64px' } }
								/>
								<ResetIconButton
									currentAttributes = { attributes }
									attributeKeys = { ['blockButtonBoxShadowVOffset'] }
									setAttributes = { setAttributes }
									onClick = { resetBlockButtonBoxShadowVOffset }
									label = { __( 'Reset Vertical Offset', 'smart-social-media-buttons' ) }
									panelTitle = { __( 'Block 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 = { blockButtonBoxShadowBlur }
									onChange = { ( newValue ) => setAttributes( { blockButtonBoxShadowBlur: newValue } ) }
									min = { 0 }
									max = { 100 }
									__nextHasNoMarginBottom = { true }
								/>
								<NumberInput
									value = { blockButtonBoxShadowBlur }
									onChange = { ( newValue ) => setAttributes( { blockButtonBoxShadowBlur: newValue } ) }
									min = { 0 }
									className="ssmb-input-control"
									style = { { width: '64px' } }
								/>
								<ResetIconButton
									currentAttributes = { attributes }
									attributeKeys = { ['blockButtonBoxShadowBlur'] }
									setAttributes = { setAttributes }
									onClick = { resetBlockButtonBoxShadowBlur }
									label = { __( 'Reset Blur', 'smart-social-media-buttons' ) }
									panelTitle = { __( 'Block 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 = { blockButtonBoxShadowSpread }
									onChange = { ( newValue ) => setAttributes( { blockButtonBoxShadowSpread: newValue } ) }
									min = { 0 }
									max = { 100 }
									__nextHasNoMarginBottom = { true }
								/>
								<NumberInput
									value = { blockButtonBoxShadowSpread }
									onChange = { ( newValue ) => setAttributes( { blockButtonBoxShadowSpread: newValue } ) }
									min = { 0 }
									className="ssmb-input-control"
									style = { { width: '64px' } }
								/>
								<ResetIconButton
									currentAttributes = { attributes }
									attributeKeys = { ['blockButtonBoxShadowSpread'] }
									setAttributes = { setAttributes }
									onClick = { resetBlockButtonBoxShadowSpread }
									label = { __( 'Reset Spread Radius', 'smart-social-media-buttons' ) }
									panelTitle = { __( 'Block 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 = { blockButtonBoxShadowColor || '#000000' }
									onChange = { ( newColor ) => setAttributes( { blockButtonBoxShadowColor: newColor } ) }
									clearable
								/>
								<ResetIconButton
									currentAttributes = { attributes }
									attributeKeys = { ['blockButtonBoxShadowColor'] }
									setAttributes = { setAttributes }
									onClick = { resetBlockButtonBoxShadowColor }
									label = { __( 'Reset Box Shadow Color', 'smart-social-media-buttons' ) }
									panelTitle = { __( 'Block 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 = { blockButtonBoxShadowOpacity }
									onChange = { ( newOpacity ) => setAttributes( { blockButtonBoxShadowOpacity: newOpacity } ) }
									min = { 0 }
									max = { 1 }
									step = { 0.01 }
									__nextHasNoMarginBottom = { true }
								/>
								<DecimalNumberInput
									value = { blockButtonBoxShadowOpacity }
									onChange = { ( newOpacity ) => setAttributes( { blockButtonBoxShadowOpacity: newOpacity } ) }
									min = { 0 }
									max = { 1 }
									step = { 0.01 }
									className="ssmb-input-control"
									style = { { width: '64px' } }
								/>
								<ResetIconButton
									currentAttributes = { attributes }
									attributeKeys = { ['blockButtonBoxShadowOpacity'] }
									setAttributes = { setAttributes }
									onClick = { resetBlockButtonBoxShadowOpacity }
									label = { __( 'Reset Box Shadow Opacity', 'smart-social-media-buttons' ) }
									panelTitle = { __( 'Block 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 = { ['blockButtonBoxShadowHOffset', 'blockButtonBoxShadowVOffset', 'blockButtonBoxShadowBlur', 'blockButtonBoxShadowSpread', 'blockButtonBoxShadowColor', 'blockButtonBoxShadowOpacity'] }
								setAttributes = { setAttributes }
								onClick = { resetBlockButtonAllBoxShadow }
								label = { __( 'Reset Box Shadow', 'smart-social-media-buttons' ) }
								panelTitle = { __( 'Block Borders & Shadows', 'smart-social-media-buttons' ) }
								blockType = 'ssmb/icon-button'
							/>
						</div>
					</>
				) }
			</PanelBody>
		</>
	);
}
