/**
 * Container Block Box Shadow Panel
 *
 */

import { __ } from '@wordpress/i18n';
import { PanelBody, RangeControl, BaseControl, ColorPalette, ButtonGroup, Button } from '@wordpress/components';
import { NormalStateIcon, HoverStateIcon } from '../../../components/constants/Icons';
import NumberInput from '../../../components/NumberInput';
import DecimalNumberInput from '../../../components/DecimalNumberInput';
import defaultColors from '../../../components/constants/DefaultColorsPalette';
import { usePanelBodyClass } from '../../../components/PanelIndicator';
import ResetButton from '../../../components/ResetButton';

export default function BoxShadowPanel( { attributes, setAttributes, isHovered, handleHoverClick } ) {
	const {
		boxShadowHOffset, boxShadowVOffset, boxShadowBlur, boxShadowSpread, boxShadowColor, boxShadowOpacity,
		hoverBoxShadowHOffset, hoverBoxShadowVOffset, hoverBoxShadowBlur, hoverBoxShadowSpread, hoverBoxShadowColor, hoverBoxShadowOpacity,
	} = attributes;

	// Use the custom hook to handle the panel class update
	usePanelBodyClass( attributes, [
		'boxShadowHOffset', 'boxShadowVOffset', 'boxShadowBlur', 'boxShadowSpread', 'boxShadowColor', 'boxShadowOpacity',
		'hoverBoxShadowHOffset', 'hoverBoxShadowVOffset', 'hoverBoxShadowBlur', 'hoverBoxShadowSpread', 'hoverBoxShadowColor', 'hoverBoxShadowOpacity'
	], 'desktop', __( 'Box Shadow', 'smart-social-media-buttons' ) );

	// Reset functions for box-shadow
	const resetAllBoxShadow = () => {
		setAttributes( {
			boxShadowHOffset: 0,
			boxShadowVOffset: 0,
			boxShadowBlur: 0,
			boxShadowSpread: 0,
			boxShadowColor: '#000000',
			boxShadowOpacity: 1
		} );
	};

	const resetBoxShadowHOffset = () => setAttributes( { boxShadowHOffset: 0 } );
	const resetBoxShadowVOffset = () => setAttributes( { boxShadowVOffset: 0 } );
	const resetBoxShadowSpread = () => setAttributes( { boxShadowSpread: 0 } );
	const resetBoxShadowBlur = () => setAttributes( { boxShadowBlur: 0 } );
	const resetBoxShadowColor = () => setAttributes( { boxShadowColor: '#000000' } );
	const resetBoxShadowOpacity = () => setAttributes( { boxShadowOpacity: 1 } );

	// Reset functions for box-shadow (hover)
	const resetAllHoverBoxShadow = () => {
		setAttributes( {
			hoverBoxShadowHOffset: 0,
			hoverBoxShadowVOffset: 0,
			hoverBoxShadowBlur: 0,
			hoverBoxShadowSpread: 0,
			hoverBoxShadowColor: null,
			hoverBoxShadowOpacity: 1
		} );
	};

	const resetHoverBoxShadowHOffset = () => setAttributes( { hoverBoxShadowHOffset: 0 } );
	const resetHoverBoxShadowVOffset = () => setAttributes( { hoverBoxShadowVOffset: 0 } );
	const resetHoverBoxShadowSpread = () => setAttributes( { hoverBoxShadowSpread: 0 } );
	const resetHoverBoxShadowBlur = () => setAttributes( { hoverBoxShadowBlur: 0 } );
	const resetHoverBoxShadowColor = () => setAttributes( { hoverBoxShadowColor: null } );
	const resetHoverBoxShadowOpacity = () => setAttributes( { hoverBoxShadowOpacity: 1 } );

	return (
		<>
			<PanelBody title = { __( 'Box Shadow', 'smart-social-media-buttons' ) } initialOpen = { false }>
				<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 */}
						{/* Hoevr 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 = { hoverBoxShadowHOffset }
									onChange = { ( newValue ) => setAttributes( { hoverBoxShadowHOffset: newValue } ) }
									min = { -100 }
									max = { 100 }
									__nextHasNoMarginBottom = { true }
								/>
								<NumberInput
									value = { hoverBoxShadowHOffset }
									onChange = { ( newValue ) => setAttributes( { hoverBoxShadowHOffset: newValue } ) }
									min = { -100 }
									className="ssmb-input-control"
									style = { { width: '64px' } }
								/>
								<ResetButton
									currentAttributes = { attributes }
									attributeKeys = { ['hoverBoxShadowHOffset'] }
									setAttributes = { setAttributes }
									onClick = { resetHoverBoxShadowHOffset }
									label = { __( 'Reset Horizontal Offset', 'smart-social-media-buttons' ) }
									panelTitle = { __( 'Box Shadow', 'smart-social-media-buttons' ) }
									blockType = 'smart-social-media-buttons/main'
								/>
							</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 = { hoverBoxShadowVOffset }
									onChange = { ( newValue ) => setAttributes( { hoverBoxShadowVOffset: newValue } ) }
									min = { -100 }
									max = { 100 }
									__nextHasNoMarginBottom = { true }
								/>
								<NumberInput
									value = { hoverBoxShadowVOffset }
									onChange = { ( newValue ) => setAttributes( { hoverBoxShadowVOffset: newValue } ) }
									min = { -100 }
									className="ssmb-input-control"
									style = { { width: '64px' } }
								/>
								<ResetButton
									currentAttributes = { attributes }
									attributeKeys = { ['hoverBoxShadowVOffset'] }
									setAttributes = { setAttributes }
									onClick = { resetHoverBoxShadowVOffset }
									label = { __( 'Reset Vertical Offset', 'smart-social-media-buttons' ) }
									panelTitle = { __( 'Box Shadow', 'smart-social-media-buttons' ) }
									blockType = 'smart-social-media-buttons/main'
								/>
							</div>
						</BaseControl>

						{/* Hover 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 = { hoverBoxShadowBlur }
									onChange = { ( newValue ) => setAttributes( { hoverBoxShadowBlur: newValue } ) }
									min = { 0 }
									max = { 100 }
									__nextHasNoMarginBottom = { true }
								/>
								<NumberInput
									value = { hoverBoxShadowBlur }
									onChange = { ( newValue ) => setAttributes( { hoverBoxShadowBlur: newValue } ) }
									min = { 0 }
									className="ssmb-input-control"
									style = { { width: '64px' } }
								/>
								<ResetButton
									currentAttributes = { attributes }
									attributeKeys = { ['hoverBoxShadowBlur'] }
									setAttributes = { setAttributes }
									onClick = { resetHoverBoxShadowBlur }
									label = { __( 'Reset Blur', 'smart-social-media-buttons' ) }
									panelTitle = { __( 'Box Shadow', 'smart-social-media-buttons' ) }
									blockType = 'smart-social-media-buttons/main'
								/>
							</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 = { hoverBoxShadowSpread }
									onChange = { ( newValue ) => setAttributes( { hoverBoxShadowSpread: newValue } ) }
									min = { 0 }
									max = { 100 }
									__nextHasNoMarginBottom = { true }
								/>
								<NumberInput
									value = { hoverBoxShadowSpread }
									onChange = { ( newValue ) => setAttributes( { hoverBoxShadowSpread: newValue } ) }
									min = { 0 }
									className="ssmb-input-control"
									style = { { width: '64px' } }
								/>
								<ResetButton
									currentAttributes = { attributes }
									attributeKeys = { ['hoverBoxShadowSpread'] }
									setAttributes = { setAttributes }
									onClick = { resetHoverBoxShadowSpread }
									label = { __( 'Reset Spread Radius', 'smart-social-media-buttons' ) }
									panelTitle = { __( 'Box Shadow', 'smart-social-media-buttons' ) }
									blockType = 'smart-social-media-buttons/main'
								/>
							</div>
						</BaseControl>

						{/* Hover 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 = {hoverBoxShadowColor}
									onChange = { ( newColor ) => setAttributes( { hoverBoxShadowColor: newColor } ) }
									clearable
								/>
								<ResetButton
									currentAttributes = {attributes}
									attributeKeys = {['hoverBoxShadowColor']}
									setAttributes = { setAttributes }
									onClick = {resetHoverBoxShadowColor}
									label = {__( 'Reset Hover Box Shadow Color', 'smart-social-media-buttons' ) }
									panelTitle = { __( 'Box Shadow', 'smart-social-media-buttons' ) }
									blockType = 'smart-social-media-buttons/main'
								/>
							</div>
						</BaseControl>

						{/* Hover 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 = { hoverBoxShadowOpacity }
									onChange = { ( newOpacity ) => setAttributes( { hoverBoxShadowOpacity: newOpacity } ) }
									min = { 0 }
									max = { 1 }
									step = { 0.01 }
									__nextHasNoMarginBottom = { true }
								/>
								<DecimalNumberInput
									value = { hoverBoxShadowOpacity }
									onChange = { ( newOpacity ) => setAttributes( { hoverBoxShadowOpacity: newOpacity } ) }
									min = { 0 }
									max = { 1 }
									step = { 0.01 }
									className="ssmb-input-control"
									style = { { width: '64px' } }
								/>
								<ResetButton
									currentAttributes = { attributes }
									attributeKeys = { ['boxShadowOpacity'] }
									setAttributes = { setAttributes }
									onClick = { resetHoverBoxShadowOpacity }
									label = { __( 'Reset Box Shadow Opacity', 'smart-social-media-buttons' ) }
									panelTitle = { __( 'Box Shadow', 'smart-social-media-buttons' ) }
									blockType = 'smart-social-media-buttons/main'
								/>
							</div>
						</BaseControl>

						{/* Add the rest of hover box-shadow controls here */}
						<ResetButton
							currentAttributes = {attributes}
							attributeKeys = { ['hoverBoxShadowHOffset', 'hoverBoxShadowVOffset', 'hoverBoxShadowBlur', 'hoverBoxShadowSpread', 'hoverBoxShadowColor', 'hoverBoxShadowOpacity'] }
							setAttributes = { setAttributes }
							onClick = { resetAllHoverBoxShadow }
							label = {__( 'Reset Hover Box Shadow', 'smart-social-media-buttons' ) }
							panelTitle = { __( 'Box Shadow', 'smart-social-media-buttons' ) }
						/>
					</>
				) : (
					<>
						{/* 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 = { boxShadowHOffset }
									onChange = { ( newValue ) => setAttributes( { boxShadowHOffset: newValue } ) }
									min = { -100 }
									max = { 100 }
									__nextHasNoMarginBottom = { true }
								/>
								<NumberInput
									value = { boxShadowHOffset }
									onChange = { ( newValue ) => setAttributes( { boxShadowHOffset: newValue } ) }
									min = { -100 }
									className="ssmb-input-control"
									style = { { width: '64px' } }
								/>
								<ResetButton
									currentAttributes = { attributes }
									attributeKeys = { ['boxShadowHOffset'] }
									setAttributes = { setAttributes }
									onClick = { resetBoxShadowHOffset }
									label = { __( 'Reset Horizontal Offset', 'smart-social-media-buttons' ) }
									panelTitle = { __( 'Box Shadow', 'smart-social-media-buttons' ) }
									blockType = 'smart-social-media-buttons/main'
								/>
							</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 = { boxShadowVOffset }
									onChange = { ( newValue ) => setAttributes( { boxShadowVOffset: newValue } ) }
									min = { -100 }
									max = { 100 }
									__nextHasNoMarginBottom = { true }
								/>
								<NumberInput
									value = { boxShadowVOffset }
									onChange = { ( newValue ) => setAttributes( { boxShadowVOffset: newValue } ) }
									min = { -100 }
									className="ssmb-input-control"
									style = { { width: '64px' } }
								/>
								<ResetButton
									currentAttributes = { attributes }
									attributeKeys = { ['boxShadowVOffset'] }
									setAttributes = { setAttributes }
									onClick = { resetBoxShadowVOffset }
									label = { __( 'Reset Vertical Offset', 'smart-social-media-buttons' ) }
									panelTitle = { __( 'Box Shadow', 'smart-social-media-buttons' ) }
									blockType = 'smart-social-media-buttons/main'
								/>
							</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 = { boxShadowBlur }
									onChange = { ( newValue ) => setAttributes( { boxShadowBlur: newValue } ) }
									min = { 0 }
									max = { 100 }
									__nextHasNoMarginBottom = { true }
								/>
								<NumberInput
									value = { boxShadowBlur }
									onChange = { ( newValue ) => setAttributes( { boxShadowBlur: newValue } ) }
									min = { 0 }
									className="ssmb-input-control"
									style = { { width: '64px' } }
								/>
								<ResetButton
									currentAttributes = { attributes }
									attributeKeys = { ['boxShadowBlur'] }
									setAttributes = { setAttributes }
									onClick = { resetBoxShadowBlur }
									label = { __( 'Reset Blur', 'smart-social-media-buttons' ) }
									panelTitle = { __( 'Box Shadow', 'smart-social-media-buttons' ) }
									blockType = 'smart-social-media-buttons/main'
								/>
							</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 = { boxShadowSpread }
									onChange = { ( newValue ) => setAttributes( { boxShadowSpread: newValue } ) }
									min = { 0 }
									max = { 100 }
									__nextHasNoMarginBottom = { true }
								/>
								<NumberInput
									value = { boxShadowSpread }
									onChange = { ( newValue ) => setAttributes( { boxShadowSpread: newValue } ) }
									min = { 0 }
									className="ssmb-input-control"
									style = { { width: '64px' } }
								/>
								<ResetButton
									currentAttributes = { attributes }
									attributeKeys = { ['boxShadowSpread'] }
									setAttributes = { setAttributes }
									onClick = { resetBoxShadowSpread }
									label = { __( 'Reset Spread Radius', 'smart-social-media-buttons' ) }
									panelTitle = { __( 'Box Shadow', 'smart-social-media-buttons' ) }
									blockType = 'smart-social-media-buttons/main'
								/>
							</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 = { boxShadowColor || '#000000' }
									onChange = { ( newColor ) => setAttributes( { boxShadowColor: newColor } ) }
									clearable
								/>
								<ResetButton
									currentAttributes = { attributes }
									attributeKeys = { ['boxShadowColor'] }
									setAttributes = { setAttributes }
									onClick = { resetBoxShadowColor }
									label = { __( 'Reset Box Shadow Color', 'smart-social-media-buttons' ) }
									panelTitle = { __( 'Box Shadow', 'smart-social-media-buttons' ) }
									blockType = 'smart-social-media-buttons/main'
								/>
							</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 = { boxShadowOpacity }
									onChange = { ( newOpacity ) => setAttributes( { boxShadowOpacity: newOpacity } ) }
									min = { 0 }
									max = { 1 }
									step = { 0.01 }
									__nextHasNoMarginBottom = { true }
								/>
								<DecimalNumberInput
									value = { boxShadowOpacity }
									onChange = { ( newOpacity ) => setAttributes( { boxShadowOpacity: newOpacity } ) }
									min = { 0 }
									max = { 1 }
									step = { 0.01 }
									className="ssmb-input-control"
									style = { { width: '64px' } }
								/>
								<ResetButton
									currentAttributes = { attributes }
									attributeKeys = { ['boxShadowOpacity'] }
									setAttributes = { setAttributes }
									onClick = { resetBoxShadowOpacity }
									label = { __( 'Reset Box Shadow Opacity', 'smart-social-media-buttons' ) }
									panelTitle = { __( 'Box Shadow', 'smart-social-media-buttons' ) }
									blockType = 'smart-social-media-buttons/main'
								/>
							</div>
						</BaseControl>

						{/* Reset All Button */}
						<div className="ssmb-control-wrapper ssmb-reset-all-shadow">
							<ResetButton
								currentAttributes = { attributes }
								attributeKeys = { ['boxShadowHOffset', 'boxShadowVOffset', 'boxShadowBlur', 'boxShadowSpread', 'boxShadowColor', 'boxShadowOpacity'] }
								setAttributes = { setAttributes }
								onClick = { resetAllBoxShadow }
								label = { __( 'Reset Box Shadow', 'smart-social-media-buttons' ) }
								panelTitle = { __( 'Box Shadow', 'smart-social-media-buttons' ) }
								blockType = 'smart-social-media-buttons/main'
							/>
						</div>
					</>
				) }
			</PanelBody>
		</>
	);
}
