/**
 * Container Block Radius Panel
 *
 */

import { __ } from '@wordpress/i18n';
import { PanelBody } from '@wordpress/components';
import ResponsiveRadiusControl from '../../../responsive-controls/ResponsiveRadiusControl';
import { usePanelBodyClass } from '../../../components/PanelIndicator';
import ResetButton from '../../../components/ResetButton';

export default function RadiusPanel( { attributes, setAttributes } ) {
	// Use the custom hook to handle the panel class update
	usePanelBodyClass( attributes, [
		'topLeftRadiusDesktop', 'topLeftRadiusTablet', 'topLeftRadiusMobile',
		'topRightRadiusDesktop', 'topRightRadiusTablet', 'topRightRadiusMobile',
		'bottomLeftRadiusDesktop', 'bottomLeftRadiusTablet', 'bottomLeftRadiusMobile',
		'bottomRightRadiusDesktop', 'bottomRightRadiusTablet', 'bottomRightRadiusMobile'
	], 'desktop', __( 'Radius', 'smart-social-media-buttons' ) );

	return (
		<PanelBody title = { __( 'Radius', 'smart-social-media-buttons' ) } initialOpen = { false }>
			<ResponsiveRadiusControl
				attributes = { attributes }
				setAttributes = { setAttributes }
				label = { __( 'Radius', 'smart-social-media-buttons' ) }
				attributeKeys = { {
					topLeft: { desktop: 'topLeftRadiusDesktop', tablet: 'topLeftRadiusTablet', mobile: 'topLeftRadiusMobile' },
					topRight: { desktop: 'topRightRadiusDesktop', tablet: 'topRightRadiusTablet', mobile: 'topRightRadiusMobile' },
					bottomLeft: { desktop: 'bottomLeftRadiusDesktop', tablet: 'bottomLeftRadiusTablet', mobile: 'bottomLeftRadiusMobile' },
					bottomRight: { desktop: 'bottomRightRadiusDesktop', tablet: 'bottomRightRadiusTablet', mobile: 'bottomRightRadiusMobile' },
				} }
				minValues = { { desktop: 0, tablet: 0, mobile: 0 } }
				maxValues = { { desktop: 100, tablet: 100, mobile: 100 } }
				syncKey = "radiusSync"
				defaultValue = { 0 }
				ResetComponent = { ResetButton }
				panelTitle = { __( 'Radius', 'smart-social-media-buttons' ) }
				blockType = 'smart-social-media-buttons/main'
			/>
		</PanelBody>
	);
}
