import { BaseControl, RangeControl } from '@wordpress/components';
import { useState } from '@wordpress/element';
import ResponsiveDeviceButtons from './ResponsiveDeviceButtons';
import { usePanelBodyClass } from '../components/PanelIndicator';
import { useIconPanelBodyClass } from '../components/IconPanelIndicator';

const ResponsiveRangeControl = ( {
	attributes,
	setAttributes,
	attributeKeys,
	label,
	minValues = { desktop: 0, tablet: 0, mobile: 0 },
	maxValues = { desktop: 100, tablet: 100, mobile: 100 },
	defaultValue = 10,
	ResetComponent,
	panelTitle,
	blockType
} ) => {
	const [ localDeviceType, setLocalDeviceType ] = useState( 'desktop' );

	// Dynamically choose the panel body class hook based on block type
	const panelBodyClass = blockType === 'smart-social-media-buttons/main'
		? usePanelBodyClass
		: useIconPanelBodyClass;

	// Use the custom hook to handle the panel class update
	panelBodyClass( attributes, Object.values( attributeKeys ), localDeviceType, panelTitle );

	const handleValueChange = ( newValue, device ) => {
		const newAttributes = {};

		// Set the current device's value
		newAttributes[ attributeKeys[ device ] ] = newValue;

		// Update attributes
		setAttributes( newAttributes );
	};

	// Get values for desktop, tablet, and mobile
	const desktopValue = attributes[ attributeKeys[ 'desktop' ] ];
	const tabletValue = attributes[ attributeKeys[ 'tablet' ] ] || desktopValue;
	const mobileValue = attributes[ attributeKeys[ 'mobile' ] ] || tabletValue || desktopValue;

	// Map the values based on the current device
	const valueMap = {
		desktop: desktopValue,
		tablet: tabletValue,
		mobile: mobileValue,
	};

	// Handle input change for valid integers
	const handleInputChange = ( e, device ) => {
		let inputValue = e.target.value;

		// Remove leading zeros while typing
		inputValue = inputValue.replace( /^0+(?!$)/, '' );

		// Parse to integer
		let newValue = parseInt( inputValue, 10 );
		if ( isNaN( newValue ) ) {
			newValue = 0;
		}

		// Allow values greater than max, but restrict below min
		if ( newValue < minValues[device] ) {
			newValue = minValues[device];
		}

		// Update the input field with the corrected value
		e.target.value = newValue;
		handleValueChange( newValue, device );
	};

	return (
		<BaseControl __nextHasNoMarginBottom = { true }>
			<div className="ssmb-control-header">
				<span className="ssmb-control-label">{ label }</span>
				<ResponsiveDeviceButtons
					localDeviceType = { localDeviceType }
					setLocalDeviceType = { setLocalDeviceType }
				/>
			</div>
			<div className="ssmb-range-control">
				<RangeControl
					value = { valueMap[ localDeviceType ] ?? 0 }
					onChange = { ( value ) => handleValueChange( value, localDeviceType ) }
					min = { minValues[ localDeviceType ] }
					max = { maxValues[ localDeviceType ] }
					__nextHasNoMarginBottom = { true }
				/>
				{/* Separate Input for Manual Entry */}
				<input
					type="number"
					value = { valueMap[ localDeviceType ] ?? '' }
					onChange = { ( e ) => handleInputChange( e, localDeviceType ) }
					min = { minValues[ localDeviceType ] }
					className="ssmb-input-control"
					style = { { width: '64px', marginLeft: '15px', borderRadius: '2px' } }
				/>
				<ResetComponent
					currentAttributes = { attributes }
					attributeKeys = { [ attributeKeys[ localDeviceType ] ] }
					setAttributes = { setAttributes }
					defaultValue = { defaultValue }
					panelTitle = { panelTitle }
					blockType = { blockType }
				/>
			</div>
		</BaseControl>
	);
};

export default ResponsiveRangeControl;
