/**
 * Button Color Panel
 *
 */

import { __ } from '@wordpress/i18n';
import { PanelBody, RangeControl, BaseControl, Button, ButtonGroup, ColorPalette, GradientPicker } from '@wordpress/components';
import { NormalStateIcon, HoverStateIcon } from '../../../components/constants/Icons';
import DecimalNumberInput from '../../../components/DecimalNumberInput';
import ResetIconButton from '../../../components/ResetIconButton';
import defaultColors from '../../../components/constants/DefaultColorsPalette';
import gradientPalette from '../../../components/constants/GradientPalette';
import { useIconPanelBodyClass } from '../../../components/IconPanelIndicator';

export default function ButtonColorPanel( { attributes, setAttributes, isHovered, handleHoverClick } ) {
	const {
		buttonBackgroundMode, buttonBackgroundColor, buttonBackgroundOpacity, buttonBackgroundGradient,
		buttonIconColor, buttonIconOpacity,
		hoverButtonBackgroundColor, hoverButtonBackgroundOpacity, hoverButtonIconColor, hoverButtonIconOpacity,
	} = attributes;

	// Use the custom hook to handle the panel class update
	useIconPanelBodyClass( attributes, [
		'buttonBackgroundMode', 'buttonBackgroundColor', 'buttonBackgroundOpacity', 'buttonBackgroundGradient',
		'buttonIconColor', 'buttonIconOpacity',
		'hoverButtonBackgroundColor', 'hoverButtonBackgroundOpacity',
		'hoverButtonIconColor', 'hoverButtonIconOpacity'
	], 'desktop', __( 'Button Color', 'smart-social-media-buttons' ) );

	const resetButtonBackgroundMode = () => setAttributes( { buttonBackgroundMode: 'solid' } );
	const resetButtonBackgroundColor = () => setAttributes( { buttonBackgroundColor: '#4F4ED7' } );
	const resetButtonBackgroundOpacity = () => setAttributes( { buttonBackgroundOpacity: 1 } );
	const resetButtonBackgroundGradient = () => setAttributes( { buttonBackgroundGradient: '' } );
	const resetButtonIconColor = () => setAttributes( { buttonIconColor: '#ffffff' } );
	const resetButtonIconOpacity = () => setAttributes( { buttonIconOpacity: 1 } );

	const resetHoverButtonBackgroundColor = () => setAttributes( { hoverButtonBackgroundColor: null } );
	const resetHoverButtonBackgroundOpacity = () => setAttributes( { hoverButtonBackgroundOpacity: 1 } );
	const resetHoverButtonIconColor = () => setAttributes( { hoverButtonIconColor: null } );
	const resetHoverButtonIconOpacity = () => setAttributes( { hoverButtonIconOpacity: 1 } );

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

				{/* Solid background color */}
				{ buttonBackgroundMode === '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 Button Color', 'smart-social-media-buttons' ) } __nextHasNoMarginBottom = { true }>
									<div className="ssmb-control-wrapper">
										<ColorPalette
											colors = { defaultColors }
											value = { hoverButtonBackgroundColor }
											onChange = { ( newColor ) => setAttributes( { hoverButtonBackgroundColor: newColor } ) }
											clearable
										/>
										<ResetIconButton
											currentAttributes = { attributes }
											attributeKeys = { ['hoverButtonBackgroundColor'] }
											setAttributes = { setAttributes }
											onClick = { resetHoverButtonBackgroundColor }
											label = { __( 'Reset Background Color', 'smart-social-media-buttons' ) }
											panelTitle = { __( 'Button Color', 'smart-social-media-buttons' ) }
											blockType = 'ssmb/icon-button'
										/>
									</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 = { hoverButtonBackgroundOpacity }
											onChange = { ( newOpacity ) => setAttributes( { hoverButtonBackgroundOpacity: newOpacity } ) }
											min = { 0 }
											max = { 1 }
											step = { 0.01 }
											__nextHasNoMarginBottom = { true }
										/>
										<DecimalNumberInput
											value = { hoverButtonBackgroundOpacity }
											onChange = { ( newOpacity ) => setAttributes( { hoverButtonBackgroundOpacity: newOpacity } ) }
											min = { 0 }
											max = { 1 }
											step = { 0.01 }
											className="ssmb-input-control"
											style = { { width: '64px' } }
										/>
										<ResetIconButton
											currentAttributes = { attributes }
											attributeKeys = { ['hoverButtonBackgroundOpacity'] }
											setAttributes = { setAttributes }
											onClick = { resetHoverButtonBackgroundOpacity }
											label = { __( 'Reset Background Opacity', 'smart-social-media-buttons' ) }
											panelTitle = { __( 'Button Color', 'smart-social-media-buttons' ) }
											blockType = 'ssmb/icon-button'
										/>
									</div>
								</BaseControl>
							</>
						) : (
							<>
								{/* NORMAL MODE */}
								<BaseControl className="ssmb-color-palette-control" label = { __( 'Button Color', 'smart-social-media-buttons' ) } __nextHasNoMarginBottom = { true }>
                                    <div className="ssmb-control-wrapper">
                                        <ColorPalette
                                            colors = { defaultColors }
                                            value = { buttonBackgroundColor }
                                            onChange = { ( newColor ) => setAttributes( { buttonBackgroundColor: newColor } ) }
                                            clearable
                                        />
                                        <ResetIconButton
                                            currentAttributes = { attributes }
                                            attributeKeys = { ['buttonBackgroundColor'] }
                                            setAttributes = { setAttributes }
                                            onClick = { resetButtonBackgroundColor }
                                            label = { __( 'Reset Background Color', 'smart-social-media-buttons' ) }
                                            panelTitle = { __( 'Button Color', 'smart-social-media-buttons' ) }
                                            blockType = 'ssmb/icon-button'
                                        />
                                    </div>
                                </BaseControl>

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

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

				<>
					<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 */}
							{/* Icon Color */}
							<BaseControl className="ssmb-color-palette-control" label = { __( 'Hover Icon Color', 'smart-social-media-buttons' ) } __nextHasNoMarginBottom = { true }>
								<div className="ssmb-control-wrapper">
									<ColorPalette
										colors = { defaultColors }
										value = { hoverButtonIconColor }
										onChange = { ( newColor ) => setAttributes( { hoverButtonIconColor: newColor } ) }
										clearable
									/>
									<ResetIconButton
										currentAttributes = { attributes }
										attributeKeys = { ['hoverButtonIconColor'] }
										setAttributes = { setAttributes }
										onClick = { resetHoverButtonIconColor }
										label = { __( 'Reset Icon Color', 'smart-social-media-buttons' ) }
										panelTitle = { __( 'Button Color', 'smart-social-media-buttons' ) }
										blockType = 'ssmb/icon-button'
									/>
								</div>
							</BaseControl>

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

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