/**
 * Container Block Background Panel
 *
 */

import { __ } from '@wordpress/i18n';
import { PanelBody, RangeControl, BaseControl, Button, ButtonGroup, ColorPalette, GradientPicker, ToggleControl } from '@wordpress/components';
import { NormalStateIcon, HoverStateIcon } from '../../../components/constants/Icons';
import DecimalNumberInput from '../../../components/DecimalNumberInput';
import defaultColors from '../../../components/constants/DefaultColorsPalette';
import gradientPalette from '../../../components/constants/GradientPalette';
import ResponsiveBackgroundImageControl from '../../../responsive-controls/ResponsiveBackgroundImageControl';
import ResponsiveRangeControl from '../../../responsive-controls/ResponsiveRangeControl';
import { usePanelBodyClass } from '../../../components/PanelIndicator';
import ResetButton from '../../../components/ResetButton';

export default function BackgroundPanel( { attributes, setAttributes, isHovered, handleHoverClick } ) {
	const { backgroundMode, backgroundColor, backgroundOpacity, backgroundGradient,
		hoverBackgroundColor, hoverBackgroundOpacity,
		backgroundImageDesktop, backgroundImageTablet, backgroundImageMobile,
		backgroundImageURLDesktop, backgroundImageURLTablet, backgroundImageURLMobile,
		backgroundFixed, backgroundPosition, backgroundSize,
		backgroundRepeat, backgroundTint, backgroundBlendMode } = attributes;

	// Use the custom hook to handle the panel class update
	usePanelBodyClass( attributes, [
		'backgroundMode', 'backgroundColor', 'backgroundOpacity',
		'backgroundGradient', 'hoverBackgroundColor', 'hoverBackgroundOpacity',
		'backgroundImageDesktop', 'backgroundImageTablet', 'backgroundImageMobile',
		'backgroundImageURLDesktop', 'backgroundImageURLTablet', 'backgroundImageURLMobile',
		'backgroundFixed', 'backgroundPosition',
		'backgroundSize', 'backgroundCustomSizeDesktop', 'backgroundCustomSizeTablet', 'backgroundCustomSizeMobile',
		'backgroundRepeat', 'backgroundTint', 'backgroundBlendMode'
	], 'desktop', __( 'Background', 'smart-social-media-buttons' ) );

	const resetBackgroundMode = () => setAttributes( { backgroundMode: 'solid', backgroundGradient: null } );

	const resetBackgroundColor = () => setAttributes( { backgroundColor: 'transparent' } );
	const resetHoverBackgroundColor = () => setAttributes( { hoverBackgroundColor: null } );

	const resetBackgroundOpacity = () => setAttributes( { backgroundOpacity: 1 } );
	const resetHoverBackgroundOpacity = () => setAttributes( { hoverBackgroundOpacity: 1 } );

	const resetBackgroundGradient = () => setAttributes( { backgroundGradient: null } );
	const resetBackgroundFixed = () => setAttributes( { backgroundFixed: false } );
	const resetBackgroundSize = () => setAttributes( { backgroundSize: '', backgroundCustomSizeDesktop: '', backgroundCustomSizeTablet: '', backgroundCustomSizeMobile: '' } );
	const resetBackgroundPosition = () => setAttributes( { backgroundPosition: '' } );
	const resetBackgroundRepeat = () => setAttributes( { backgroundRepeat: '' } );
	const resetBackgroundTint = () => setAttributes( { backgroundTint: 0 } );
	const resetBackgroundBlendMode = () => setAttributes( { backgroundBlendMode: '' } );

	return (
		<>
			<PanelBody title = { __( 'Background', 'smart-social-media-buttons' ) } initialOpen = { true }>
				{/* Background type toggle (Solid / Gradient) */}
				<BaseControl className="ssmb-background-mode-toggle" label = { __( 'Background Mode', 'smart-social-media-buttons' ) } __nextHasNoMarginBottom = { true }>
					<div className="ssmb-control-wrapper">
						<ButtonGroup className="background-mode-controls" style = { { flexGrow: 1 }}>
							<Button
								variant = { backgroundMode === 'solid' ? 'primary' : 'secondary' }
								onClick = { () => setAttributes( { backgroundMode: 'solid' } ) }
							>
								{ __( 'Solid', 'smart-social-media-buttons' ) }
							</Button>
							<Button
								variant = { backgroundMode === 'gradient' ? 'primary' : 'secondary' }
								onClick = { () => setAttributes( { backgroundMode: 'gradient' } ) }
							>
								{ __( 'Gradient', 'smart-social-media-buttons' ) }
							</Button>
						</ButtonGroup>
						<ResetButton
							currentAttributes = { attributes }
							attributeKeys = { ['backgroundMode', 'backgroundGradient'] }
							setAttributes = { setAttributes }
							onClick = { resetBackgroundMode}
							label = { __( 'Reset Background Mode', 'smart-social-media-buttons' ) }
							panelTitle = { __( 'Background', 'smart-social-media-buttons' ) }
							blockType = 'smart-social-media-buttons/main'
						/>
					</div>
				</BaseControl>

				{/* Solid background color */}
				{ backgroundMode === 'solid' && (
					<>
						<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 */}
								<BaseControl className="ssmb-color-palette-control" label = { __( 'Hover Background Color', 'smart-social-media-buttons' ) } __nextHasNoMarginBottom = { true }>
									<div className="ssmb-control-wrapper">
										<ColorPalette
											colors = { defaultColors }
											value = { hoverBackgroundColor }
											onChange = { ( newColor ) => setAttributes( { hoverBackgroundColor: newColor } ) }
											clearable
										/>
										<ResetButton
											currentAttributes = { attributes }
											attributeKeys = { ['hoverBackgroundColor'] }
											setAttributes = { setAttributes }
											onClick = { resetHoverBackgroundColor}
											label = { __( 'Reset Background Color', 'smart-social-media-buttons' ) }
											panelTitle = { __( 'Background', 'smart-social-media-buttons' ) }
											blockType = 'smart-social-media-buttons/main'
										/>
									</div>
								</BaseControl>

								<BaseControl className="ssmb-color-opacity-control" label = { __( 'Hover Background Opacity', 'smart-social-media-buttons' ) } __nextHasNoMarginBottom = { true }>
									<div className="ssmb-control-wrapper">
										<RangeControl
											value = { hoverBackgroundOpacity }
											onChange = { ( newOpacity ) => setAttributes( { hoverBackgroundOpacity: newOpacity } ) }
											min = { 0 }
											max = { 1 }
											step = { 0.01 }
											__nextHasNoMarginBottom = { true }
										/>
										<DecimalNumberInput
											value = { hoverBackgroundOpacity }
											onChange = { ( newOpacity ) => setAttributes( { hoverBackgroundOpacity: newOpacity } ) }
											min = { 0 }
											max = { 1 }
											step = { 0.01 }
											className="ssmb-input-control"
											style = { { width: '64px' } }
										/>
										<ResetButton
											currentAttributes = { attributes }
											attributeKeys = { ['hoverBackgroundOpacity'] }
											setAttributes = { setAttributes }
											onClick = { resetHoverBackgroundOpacity}
											label = { __( 'Reset Background Opacity', 'smart-social-media-buttons' ) }
											panelTitle = { __( 'Background', 'smart-social-media-buttons' ) }
											blockType = 'smart-social-media-buttons/main'
										/>
									</div>
								</BaseControl>
							</>
						) : (
							<>
								{/* NORMAL MODE */}
								<BaseControl className="ssmb-color-palette-control" label = { __( 'Background Color', 'smart-social-media-buttons' ) } __nextHasNoMarginBottom = { true }>
									<div className="ssmb-control-wrapper">
										<ColorPalette
											colors = { defaultColors }
											value = { backgroundColor }
											onChange = { ( newColor ) => setAttributes( { backgroundColor: newColor } ) }
											clearable
										/>
										<ResetButton
											currentAttributes = { attributes }
											attributeKeys = { ['backgroundColor'] }
											setAttributes = { setAttributes }
											onClick = { resetBackgroundColor}
											label = { __( 'Reset Background Color', 'smart-social-media-buttons' ) }
											panelTitle = { __( 'Background', 'smart-social-media-buttons' ) }
											blockType = 'smart-social-media-buttons/main'
										/>
									</div>
								</BaseControl>

								<BaseControl className="ssmb-color-opacity-control" label = { __( 'Background Opacity', 'smart-social-media-buttons' ) } __nextHasNoMarginBottom = { true }>
									<div className="ssmb-control-wrapper">
										<RangeControl
											value = { backgroundOpacity }
											onChange = { ( newOpacity ) => setAttributes( { backgroundOpacity: newOpacity } ) }
											min = { 0 }
											max = { 1 }
											step = { 0.01 }
											__nextHasNoMarginBottom = { true }
										/>
										<DecimalNumberInput
											value = { backgroundOpacity }
											onChange = { ( newOpacity ) => setAttributes( { backgroundOpacity: newOpacity } ) }
											min = { 0 }
											max = { 1 }
											step = { 0.01 }
											className="ssmb-input-control"
											style = { { width: '64px' } }
										/>
										<ResetButton
											currentAttributes = { attributes }
											attributeKeys = { ['backgroundOpacity'] }
											setAttributes = { setAttributes }
											onClick = { resetBackgroundOpacity }
											label = { __( 'Reset Background Opacity', 'smart-social-media-buttons' ) }
											panelTitle = { __( 'Background', 'smart-social-media-buttons' ) }
											blockType = 'smart-social-media-buttons/main'
										/>
									</div>
								</BaseControl>
							</>
						) }
					</>
				) }

				{/* Gradient background */}
				{ backgroundMode === 'gradient' && (
					<>
						<BaseControl className="ssmb-color-palette-control" label = { __( 'Background Gradient', 'smart-social-media-buttons' ) } __nextHasNoMarginBottom = { true }>
							<div className="ssmb-control-wrapper">
								<GradientPicker
									value = { backgroundGradient }
									onChange = { ( newGradient ) => setAttributes( { backgroundGradient: newGradient } ) }
									gradients = { gradientPalette }
									clearable
								/>
								<ResetButton
									label = { __( 'Reset Gradient', 'smart-social-media-buttons' ) }
									currentAttributes = { attributes }
									attributeKeys = { ['backgroundGradient'] }
									setAttributes = { setAttributes }
									onClick = { resetBackgroundGradient}
									panelTitle = { __( 'Background', 'smart-social-media-buttons' ) }
									blockType = 'smart-social-media-buttons/main'
								/>
							</div>
						</BaseControl>
					</>
				) }

				{/* Background Image */}
				<BaseControl className="ssmb-background-image-control" __nextHasNoMarginBottom = { true }>
					<ResponsiveBackgroundImageControl
						label = {__( 'Background Image', 'smart-social-media-buttons' ) }
						attributes = { attributes }
						setAttributes = { setAttributes }
						attributeKeys = { {
							desktop: 'backgroundImageDesktop',
							tablet: 'backgroundImageTablet',
							mobile: 'backgroundImageMobile'
						}}
						urlPrefix = 'backgroundImageURL'
						resetAttributes = { {
							backgroundFixed: false,
							backgroundPosition: '',
							backgroundSize: '',
							backgroundCustomSizeDesktop: '',
							backgroundCustomSizeTablet: '',
							backgroundCustomSizeMobile: '',
							backgroundRepeat: '',
							backgroundTint: 0,
							backgroundBlendMode: ''
						} }
						ResetComponent = { ResetButton }
						panelTitle = { __( 'Background', 'smart-social-media-buttons' ) }
						blockType = 'smart-social-media-buttons/main'
					/>
				</BaseControl>

				{/* Image settings (visible only when an image is added) */}
				{ ( backgroundImageDesktop || backgroundImageTablet || backgroundImageMobile || backgroundImageURLDesktop || backgroundImageURLTablet || backgroundImageURLMobile ) && (
					<>
						{/* Background Fixed */}
						<BaseControl className="ssmb-background-state-control" label = { __( 'Background Fixed', 'smart-social-media-buttons' ) } __nextHasNoMarginBottom = { true }>
							<div className="ssmb-control-wrapper">
								<ToggleControl
									checked = { backgroundFixed }
									onChange = { ( newValue ) => setAttributes( { backgroundFixed: newValue } ) }
									__nextHasNoMarginBottom = { true }
								/>
								<ResetButton
									currentAttributes = { attributes }
									attributeKeys = { ['backgroundFixed'] }
									setAttributes = { setAttributes }
									onClick = { resetBackgroundFixed}
									label = { __( 'Reset Background Fixed', 'smart-social-media-buttons' ) }
									panelTitle = { __( 'Background', 'smart-social-media-buttons' ) }
									blockType = 'smart-social-media-buttons/main'
								/>
							</div>
						</BaseControl>

						{/* Background Position */}
						<BaseControl className="ssmb-background-position-control" label = { __( 'Background Position', 'smart-social-media-buttons' ) } __nextHasNoMarginBottom = { true }>
							<div className="ssmb-control-wrapper">
								<select
									value = { backgroundPosition }
									onChange = { ( event ) => setAttributes( { backgroundPosition: event.target.value } ) }
									className="ssmb-select"
								>
									<option value = "">{ __( 'Default', 'smart-social-media-buttons' ) }</option>
									<option value = "top left">{ __( 'Top Left', 'smart-social-media-buttons' ) }</option>
									<option value = "top center">{ __( 'Top Center', 'smart-social-media-buttons' ) }</option>
									<option value = "top right">{ __( 'Top Right', 'smart-social-media-buttons' ) }</option>
									<option value = "center left">{ __( 'Center Left', 'smart-social-media-buttons' ) }</option>
									<option value = "center center">{ __( 'Center Center', 'smart-social-media-buttons' ) }</option>
									<option value = "center right">{ __( 'Center Right', 'smart-social-media-buttons' ) }</option>
									<option value = "bottom left">{ __( 'Bottom Left', 'smart-social-media-buttons' ) }</option>
									<option value = "bottom center">{ __( 'Bottom Center', 'smart-social-media-buttons' ) }</option>
									<option value = "bottom right">{ __( 'Bottom Right', 'smart-social-media-buttons' ) }</option>
								</select>
								<ResetButton
									currentAttributes = { attributes }
									attributeKeys = { ['backgroundPosition'] }
									setAttributes = { setAttributes }
									onClick = { resetBackgroundPosition}
									label = { __( 'Reset Background Position', 'smart-social-media-buttons' ) }
									panelTitle = { __( 'Background', 'smart-social-media-buttons' ) }
									blockType = 'smart-social-media-buttons/main'
								/>
							</div>
						</BaseControl>

						{/* Background Size */}
						<BaseControl className="ssmb-background-size-control" label = { __( 'Background Size', 'smart-social-media-buttons' ) } __nextHasNoMarginBottom = { true }>
							<div className="ssmb-control-wrapper">
								<select
									value = { backgroundSize }
									onChange = { ( event ) => setAttributes( { backgroundSize: event.target.value } ) }
									className="ssmb-select"
								>
									<option value = "">{ __( 'Default', 'smart-social-media-buttons' ) }</option>
									<option value = "cover">{ __( 'Cover', 'smart-social-media-buttons' ) }</option>
									<option value = "contain">{ __( 'Contain', 'smart-social-media-buttons' ) }</option>
									<option value = "custom">{ __( 'Custom', 'smart-social-media-buttons' ) }</option>
								</select>
								<ResetButton
									currentAttributes = { attributes }
									attributeKeys = { ['backgroundSize', 'backgroundCustomSizeDesktop', 'backgroundCustomSizeTablet', 'backgroundCustomSizeMobile'] }
									setAttributes = { setAttributes }
									onClick = { resetBackgroundSize}
									label = { __( 'Reset Background Size', 'smart-social-media-buttons' ) }
									panelTitle = { __( 'Background', 'smart-social-media-buttons' ) }
									blockType = 'smart-social-media-buttons/main'
								/>
							</div>
						</BaseControl>

						{ backgroundSize === 'custom' && (
							<>
								{/* Background Size Custom */}
								<ResponsiveRangeControl
									attributes = { attributes }
									setAttributes = { setAttributes }
									label = { __( 'Custom Size', 'smart-social-media-buttons' ) }
									attributeKeys = { {
										desktop: 'backgroundCustomSizeDesktop',
										tablet: 'backgroundCustomSizeTablet',
										mobile: 'backgroundCustomSizeMobile',
									} }
									minValues = { { desktop: 0, tablet: 0, mobile: 0 } }
									maxValues = { { desktop: 100, tablet: 100, mobile: 100 } }
									ResetComponent = { ResetButton }
									blockType = 'smart-social-media-buttons/main'
								/>
							</>
						) }

						{/* Background Repeat */}
						<BaseControl className="ssmb-background-repeat-control" label = { __( 'Background Repeat', 'smart-social-media-buttons' ) } __nextHasNoMarginBottom = { true }>
							<div className="ssmb-control-wrapper">
								<select
									value = { backgroundRepeat }
									onChange = { ( event ) => setAttributes( { backgroundRepeat: event.target.value } ) }
									className="ssmb-select"
								>
									<option value = "">{ __( 'Default', 'smart-social-media-buttons' ) }</option>
									<option value = "no-repeat">{ __( 'No-Repeat', 'smart-social-media-buttons' ) }</option>
									<option value = "repeat">{ __( 'Repeat', 'smart-social-media-buttons' ) }</option>
									<option value = "repeat-x">{ __( 'Repeat-X', 'smart-social-media-buttons' ) }</option>
									<option value = "repeat-y">{ __( 'Repeat-Y', 'smart-social-media-buttons' ) }</option>
								</select>
								<ResetButton
									currentAttributes = { attributes }
									attributeKeys = { ['backgroundRepeat'] }
									setAttributes = { setAttributes }
									onClick = { resetBackgroundRepeat }
									label = { __( 'Reset Background Repeat', 'smart-social-media-buttons' ) }
									panelTitle = { __( 'Background', 'smart-social-media-buttons' ) }
									blockType = 'smart-social-media-buttons/main'
								/>
							</div>
						</BaseControl>

						{/* Background Tint */}
						<BaseControl className="ssmb-color-opacity-control" label = { __( 'Background Tint', 'smart-social-media-buttons' ) } __nextHasNoMarginBottom = { true }>
							<div className="ssmb-control-wrapper">
								<RangeControl
									value = { backgroundTint }
									onChange = { ( newTint ) => setAttributes( { backgroundTint: newTint } ) }
									min = { 0 }
									max = { 1 }
									step = { 0.01 }
									__nextHasNoMarginBottom = { true }
								/>
								<DecimalNumberInput
									value = { backgroundTint }
									onChange = { ( newOpacity ) => setAttributes( { backgroundTint: newOpacity } ) }
									min = { 0 }
									max = { 1 }
									step = { 0.01 }
									className="ssmb-input-control"
									style = { { width: '64px' } }
								/>
								<ResetButton
									currentAttributes = { attributes }
									attributeKeys = { ['backgroundTint'] }
									setAttributes = { setAttributes }
									onClick = { resetBackgroundTint }
									label = { __( 'Reset Tint', 'smart-social-media-buttons' ) }
									panelTitle = { __( 'Background', 'smart-social-media-buttons' ) }
									blockType = 'smart-social-media-buttons/main'
								/>
							</div>
						</BaseControl>

						{/* Background Blend Mode */}
						<BaseControl className="ssmb-background-blend-mode-control" label = { __( 'Background Blend Mode', 'smart-social-media-buttons' ) } __nextHasNoMarginBottom = { true }>
							<div className="ssmb-control-wrapper">
								<select
									value = { backgroundBlendMode }
									onChange = { ( event ) => setAttributes( { backgroundBlendMode: event.target.value } ) }
									className="ssmb-select"
								>
									<option value = "">{ __( 'Default', 'smart-social-media-buttons' ) }</option>
									<option value = "normal">{ __( 'Normal', 'smart-social-media-buttons' ) }</option>
									<option value = "multiply">{ __( 'Multiply', 'smart-social-media-buttons' ) }</option>
									<option value = "screen">{ __( 'Screen', 'smart-social-media-buttons' ) }</option>
									<option value = "overlay">{ __( 'Overlay', 'smart-social-media-buttons' ) }</option>
									<option value = "darken">{ __( 'Darken', 'smart-social-media-buttons' ) }</option>
									<option value = "lighten">{ __( 'Lighten', 'smart-social-media-buttons' ) }</option>
									<option value = "color-dodge">{ __( 'Color-Dodge', 'smart-social-media-buttons' ) }</option>
									<option value = "color-burn">{ __( 'Color-Burn', 'smart-social-media-buttons' ) }</option>
									<option value = "hard-light">{ __( 'Hard-Light', 'smart-social-media-buttons' ) }</option>
									<option value = "soft-light">{ __( 'Soft-Light', 'smart-social-media-buttons' ) }</option>
									<option value = "difference">{ __( 'Difference', 'smart-social-media-buttons' ) }</option>
									<option value = "exclusion">{ __( 'Exclusion', 'smart-social-media-buttons' ) }</option>
									<option value = "hue">{ __( 'Hue', 'smart-social-media-buttons' ) }</option>
									<option value = "saturation">{ __( 'Saturation', 'smart-social-media-buttons' ) }</option>
									<option value = "color">{ __( 'Color', 'smart-social-media-buttons' ) }</option>
									<option value = "luminosity">{ __( 'Luminosity', 'smart-social-media-buttons' ) }</option>
									<option value = "plus-darker">{ __( 'Plus-Darker', 'smart-social-media-buttons' ) }</option>
									<option value = "plus-lighter">{ __( 'Plus-Lighter', 'smart-social-media-buttons' ) }</option>
								</select>
								<ResetButton
									currentAttributes = { attributes }
									attributeKeys = { ['backgroundBlendMode'] }
									setAttributes = { setAttributes }
									onClick = { resetBackgroundBlendMode}
									label = { __( 'Reset Blend Mode', 'smart-social-media-buttons' ) }
									panelTitle = { __( 'Background', 'smart-social-media-buttons' ) }
									blockType = 'smart-social-media-buttons/main'
								/>
							</div>
						</BaseControl>
					</>
				) }

			</PanelBody>
		</>
	);
}
