/**
 * Block Button 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 { useIconPanelBodyClass } from '../../../components/IconPanelIndicator';
import ResetIconButton from '../../../components/ResetIconButton';

export default function BlockButtonBackgroundPanel( { attributes, setAttributes, isHovered, handleHoverClick } ) {
	const {
		blockButtonBackgroundMode, blockButtonBackgroundColor, blockButtonBackgroundOpacity, blockButtonBackgroundGradient,
		hoverBlockButtonBackgroundColor, hoverBlockButtonBackgroundOpacity,
		blockButtonBackgroundImageDesktop, blockButtonBackgroundImageTablet, blockButtonBackgroundImageMobile,
		blockButtonBackgroundImageURLDesktop, blockButtonBackgroundImageURLTablet, blockButtonBackgroundImageURLMobile,
		blockButtonBackgroundFixed, blockButtonBackgroundPosition, blockButtonBackgroundSize,
		blockButtonBackgroundRepeat, blockButtonBackgroundTint, blockButtonBackgroundBlendMode
	} = attributes;

	// Use the custom hook to handle the panel class update
	useIconPanelBodyClass( attributes, [
		'blockButtonBackgroundMode', 'blockButtonBackgroundColor', 'blockButtonBackgroundOpacity', 'blockButtonBackgroundGradient',
		'hoverBlockButtonBackgroundColor', 'hoverBlockButtonBackgroundOpacity',
		'blockButtonBackgroundImageDesktop', 'blockButtonBackgroundImageTablet', 'blockButtonBackgroundImageMobile',
		'blockButtonBackgroundImageURLDesktop', 'blockButtonBackgroundImageURLTablet', 'blockButtonBackgroundImageURLMobile',
		'blockButtonBackgroundFixed', 'blockButtonBackgroundPosition', 'blockButtonBackgroundSize',
		'blockButtonBackgroundCustomSizeDesktop', 'blockButtonBackgroundCustomSizeTablet', 'blockButtonBackgroundCustomSizeMobile',
		'blockButtonBackgroundRepeat', 'blockButtonBackgroundTint', 'blockButtonBackgroundBlendMode'
	], 'desktop', __( 'Block Background', 'smart-social-media-buttons' ) );

	const resetBlockButtonBackgroundMode = () => setAttributes( { blockButtonBackgroundMode: 'solid', blockButtonBackgroundGradient: '' } );

	const resetBlockButtonBackgroundColor = () => setAttributes( { blockButtonBackgroundColor: 'transparent' } );
	const resetHoverBlockButtonBackgroundColor = () => setAttributes( { hoverBlockButtonBackgroundColor: null } );

	const resetBlockButtonBackgroundOpacity = () => setAttributes( { blockButtonBackgroundOpacity: 1 } );
	const resetHoverBlockButtonBackgroundOpacity = () => setAttributes( { hoverBlockButtonBackgroundOpacity: 1 } );

	const resetBlockButtonBackgroundGradient = () => setAttributes( { blockButtonBackgroundGradient: '' } );
	const resetBlockButtonBackgroundFixed = () => setAttributes( { blockButtonBackgroundFixed: false } );
	const resetBlockButtonBackgroundSize = () => setAttributes( {
		blockButtonBackgroundSize: '', blockButtonBackgroundCustomSizeDesktop: '', blockButtonBackgroundCustomSizeDesktop: '', blockButtonBackgroundCustomSizeMobile: ''
	} );
	const resetBlockButtonBackgroundPosition = () => setAttributes( { blockButtonBackgroundPosition: '' } );
	const resetBlockButtonBackgroundRepeat = () => setAttributes( { blockButtonBackgroundRepeat: '' } );
	const resetBlockButtonBackgroundTint = () => setAttributes( { blockButtonBackgroundTint: 0 } );
	const resetBlockButtonBackgroundBlendMode = () => setAttributes( { blockButtonBackgroundBlendMode: '' } );

	return (
		<>
			<PanelBody title = { __( 'Block Background', 'smart-social-media-buttons' ) } initialOpen = { false }>
				{/* 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 = { blockButtonBackgroundMode === 'solid' ? 'primary' : 'secondary' }
								onClick = { () => setAttributes( { blockButtonBackgroundMode: 'solid' } ) }
							>
								{ __( 'Solid', 'smart-social-media-buttons' ) }
							</Button>
							<Button
								variant = { blockButtonBackgroundMode === 'gradient' ? 'primary' : 'secondary' }
								onClick = { () => setAttributes( { blockButtonBackgroundMode: 'gradient' } ) }
							>
								{ __( 'Gradient', 'smart-social-media-buttons' ) }
							</Button>
						</ButtonGroup>
						<ResetIconButton
							currentAttributes = { attributes }
							attributeKeys = { ['blockButtonBackgroundMode', 'blockButtonBackgroundGradient'] }
							setAttributes = { setAttributes }
							onClick = { resetBlockButtonBackgroundMode}
							label = { __( 'Reset Background Mode', 'smart-social-media-buttons' ) }
							panelTitle = { __( 'Block Background', 'smart-social-media-buttons' ) }
							blockType = 'ssmb/icon-button'
						/>
					</div>
				</BaseControl>

				{/* Solid background color */}
				{ blockButtonBackgroundMode === '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 = { hoverBlockButtonBackgroundColor }
											onChange = { ( newColor ) => setAttributes( { hoverBlockButtonBackgroundColor: newColor } ) }
											clearable
										/>
										<ResetIconButton
											currentAttributes = { attributes }
											attributeKeys = { ['hoverBlockButtonBackgroundColor'] }
											setAttributes = { setAttributes }
											onClick = { resetHoverBlockButtonBackgroundColor }
											label = { __( 'Reset Background Color', 'smart-social-media-buttons' ) }
											panelTitle = { __( 'Block Background', '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 = { hoverBlockButtonBackgroundOpacity }
											onChange = { ( newOpacity ) => setAttributes( { hoverBlockButtonBackgroundOpacity: newOpacity } ) }
											min = { 0 }
											max = { 1 }
											step = { 0.01 }
											__nextHasNoMarginBottom = { true }
										/>
										<DecimalNumberInput
											value = { hoverBlockButtonBackgroundOpacity }
											onChange = { ( newOpacity ) => setAttributes( { hoverBlockButtonBackgroundOpacity: newOpacity } ) }
											min = { 0 }
											max = { 1 }
											step = { 0.01 }
											className="ssmb-input-control"
											style = { { width: '64px' } }
										/>
										<ResetIconButton
											currentAttributes = { attributes }
											attributeKeys = { ['hoverBlockButtonBackgroundOpacity'] }
											setAttributes = { setAttributes }
											onClick = { resetHoverBlockButtonBackgroundOpacity }
											label = { __( 'Reset Background Opacity', 'smart-social-media-buttons' ) }
											panelTitle = { __( 'Block Background', 'smart-social-media-buttons' ) }
											blockType = 'ssmb/icon-button'
										/>
									</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 = { blockButtonBackgroundColor }
											onChange = { ( newColor ) => setAttributes( { blockButtonBackgroundColor: newColor } ) }
											clearable
										/>
										<ResetIconButton
											currentAttributes = { attributes }
											attributeKeys = { ['blockButtonBackgroundColor'] }
											setAttributes = { setAttributes }
											onClick = { resetBlockButtonBackgroundColor }
											label = { __( 'Reset Background Color', 'smart-social-media-buttons' ) }
											panelTitle = { __( 'Block Background', '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 = { blockButtonBackgroundOpacity }
											onChange = { ( newOpacity ) => setAttributes( { blockButtonBackgroundOpacity: newOpacity } ) }
											min = { 0 }
											max = { 1 }
											step = { 0.01 }
											__nextHasNoMarginBottom = { true }
										/>
										<DecimalNumberInput
											value = { blockButtonBackgroundOpacity }
											onChange = { ( newOpacity ) => setAttributes( { blockButtonBackgroundOpacity: newOpacity } ) }
											min = { 0 }
											max = { 1 }
											step = { 0.01 }
											className="ssmb-input-control"
											style = { { width: '64px' } }
										/>
										<ResetIconButton
											currentAttributes = { attributes }
											attributeKeys = { ['blockButtonBackgroundOpacity'] }
											setAttributes = { setAttributes }
											onClick = { resetBlockButtonBackgroundOpacity }
											label = { __( 'Reset Background Opacity', 'smart-social-media-buttons' ) }
											panelTitle = { __( 'Block Background', 'smart-social-media-buttons' ) }
											blockType = 'ssmb/icon-button'
										/>
									</div>
								</BaseControl>
							</>
						)}
					</>
				)}

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

				{/* Background Image settings */}
				<ResponsiveBackgroundImageControl
					label = { __( 'Background Image', 'smart-social-media-buttons' )}
					attributes = {attributes}
					setAttributes = {setAttributes}
					attributeKeys = { {
						desktop: 'blockButtonBackgroundImageDesktop',
						tablet: 'blockButtonBackgroundImageTablet',
						mobile: 'blockButtonBackgroundImageMobile'
					} }
					urlPrefix='blockButtonBackgroundImageURL'
					resetAttributes = { {
						blockButtonBackgroundFixed: false,
						blockButtonBackgroundPosition: '',
						blockButtonBackgroundSize: '',
						blockButtonBackgroundSizeDesktop: '',
						blockButtonBackgroundSizeTablet: '',
						blockButtonBackgroundSizeMobile: '',
						blockButtonBackgroundRepeat: '',
						blockButtonBackgroundTint: 0,
						blockButtonBackgroundBlendMode: ''
					} }
					ResetComponent = { ResetIconButton }
					panelTitle = { __( 'Block Background', 'smart-social-media-buttons' ) }
					blockType = 'ssmb/icon-button'
				/>

				{/* Image settings (visible only when an image is added) */}
				{ ( blockButtonBackgroundImageDesktop || blockButtonBackgroundImageTablet || blockButtonBackgroundImageMobile || blockButtonBackgroundImageURLDesktop || blockButtonBackgroundImageURLTablet || blockButtonBackgroundImageURLMobile ) && (
					<>
						{/* Background Fixed */}
						<BaseControl className="ssmb-background-state-control" label = { __( 'Background Fixed', 'smart-social-media-buttons' ) } __nextHasNoMarginBottom = { true }>
							<div className="ssmb-control-wrapper">
								<ToggleControl
									checked = { blockButtonBackgroundFixed }
									onChange = { ( newValue ) => setAttributes( { blockButtonBackgroundFixed: newValue } ) }
									__nextHasNoMarginBottom = { true }
								/>
								<ResetIconButton
									currentAttributes = { attributes }
									attributeKeys = { ['blockButtonBackgroundFixed'] }
									setAttributes = { setAttributes }
									onClick = { resetBlockButtonBackgroundFixed }
									label = { __( 'Reset Background Fixed', 'smart-social-media-buttons' ) }
									panelTitle = { __( 'Block Background', 'smart-social-media-buttons' ) }
									blockType = 'ssmb/icon-button'
								/>
							</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 = { blockButtonBackgroundPosition }
									onChange = { ( event ) => setAttributes( { blockButtonBackgroundPosition: 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 = "centerleft">{ __( '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>
								<ResetIconButton
									currentAttributes = { attributes }
									attributeKeys = { ['blockButtonBackgroundPosition'] }
									setAttributes = { setAttributes }
									onClick = { resetBlockButtonBackgroundPosition }
									label = { __( 'Reset Background Position', 'smart-social-media-buttons' ) }
									panelTitle = { __( 'Block Background', 'smart-social-media-buttons' ) }
									blockType = 'ssmb/icon-button'
								/>
							</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 = { blockButtonBackgroundSize }
									onChange = { ( event ) => setAttributes( { blockButtonBackgroundSize: 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>
								<ResetIconButton
									currentAttributes = { attributes }
									attributeKeys = { ['blockButtonBackgroundSize', 'blockButtonBackgroundCustomSizeDesktop', 'blockButtonBackgroundCustomSizeTablet', 'blockButtonBackgroundCustomSizeMobile'] }
									setAttributes = { setAttributes }
									onClick = { resetBlockButtonBackgroundSize }
									label = { __( 'Reset Background Size', 'smart-social-media-buttons' ) }
									panelTitle = { __( 'Block Background', 'smart-social-media-buttons' ) }
									blockType = 'ssmb/icon-button'
								/>
							</div>
						</BaseControl>

						{ blockButtonBackgroundSize === 'custom' && (
							<>
								{/* Background Size Custom */}
								<ResponsiveRangeControl
									attributes = { attributes }
									setAttributes = { setAttributes }
									label = { __( 'Custom Size', 'smart-social-media-buttons' ) }
									attributeKeys = { {
										desktop: 'blockButtonBackgroundCustomSizeDesktop',
										tablet: 'blockButtonBackgroundCustomSizeTablet',
										mobile: 'blockButtonBackgroundCustomSizeMobile',
									} }
									minValues = { { desktop: 0, tablet: 0, mobile: 0 } }
									maxValues = { { desktop: 100, tablet: 100, mobile: 100 } }
									ResetComponent = { ResetIconButton }
									panelTitle = { __( 'Block Background', 'smart-social-media-buttons' ) }
									blockType = 'ssmb/icon-button'
								/>
							</>
						) }

						{/* Background Repeat */}
						<BaseControl className="ssmb-background-repeat-control" label = { __( 'Background Repeat', 'smart-social-media-buttons' ) } __nextHasNoMarginBottom = { true }>
							<div className="ssmb-control-wrapper">
								<select
									value = { blockButtonBackgroundRepeat }
									onChange = { ( event ) => setAttributes( { blockButtonBackgroundRepeat: 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>
								<ResetIconButton
									currentAttributes = { attributes }
									attributeKeys = { ['blockButtonBackgroundRepeat'] }
									setAttributes = { setAttributes }
									onClick = { resetBlockButtonBackgroundRepeat }
									label = { __( 'Reset Background Repeat', 'smart-social-media-buttons' ) }
									panelTitle = { __( 'Block Background', 'smart-social-media-buttons' ) }
									blockType = 'ssmb/icon-button'
								/>
							</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 = { blockButtonBackgroundTint }
									onChange = { ( newTint ) => setAttributes( { blockButtonBackgroundTint: newTint } ) }
									min = { 0 }
									max = { 1 }
									step = { 0.01 }
									__nextHasNoMarginBottom = { true }
								/>
								<DecimalNumberInput
									value = { blockButtonBackgroundTint }
									onChange = { ( newOpacity ) => setAttributes( { blockButtonBackgroundTint: newOpacity } ) }
									min = { 0 }
									max = { 1 }
									step = { 0.01 }
									className="ssmb-input-control"
									style = { { width: '64px' } }
								/>
								<ResetIconButton
									currentAttributes = { attributes }
									attributeKeys = { ['blockButtonBackgroundTint'] }
									setAttributes = { setAttributes }
									onClick = { resetBlockButtonBackgroundTint }
									label = { __( 'Reset Tint', 'smart-social-media-buttons' ) }
									panelTitle = { __( 'Block Background', 'smart-social-media-buttons' ) }
									blockType = 'ssmb/icon-button'
								/>
							</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 = { blockButtonBackgroundBlendMode }
									onChange = { ( event ) => setAttributes( { blockButtonBackgroundBlendMode: 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>
								<ResetIconButton
									currentAttributes = { attributes }
									attributeKeys = { ['blockButtonBackgroundBlendMode'] }
									setAttributes = { setAttributes }
									onClick = { resetBlockButtonBackgroundBlendMode }
									label = { __( 'Reset Blend Mode', 'smart-social-media-buttons' ) }
									panelTitle = { __( 'Block Background', 'smart-social-media-buttons' ) }
									blockType = 'ssmb/icon-button'
								/>
							</div>
						</BaseControl>
					</>
				)}

			</PanelBody>
		</>
	);
}
