/**
 * Range Slider Field Block
 */

(function (blocks, element, blockEditor, components, i18n) {
	const { registerBlockType } = blocks;
	const { createElement: el, Fragment, useEffect } = element;
	const { InspectorControls, useBlockProps } = blockEditor;
	const { PanelBody, TextControl, ToggleControl, RangeControl } = components;
	const { __ } = i18n;

	registerBlockType('giraforms/range-slider-field', {
		icon: {
			src: 'leftright',
			foreground: '#3858e9'
		},
		edit: function (props) {
			const { attributes, setAttributes, clientId } = props;
			const {
				fieldId,
				label,
				min,
				max,
				step,
				defaultValue,
				required,
				requiredMessage,
				helpText,
				showValue,
				showMinMax,
				unit
			} = attributes;

			// Generate field ID if not set
			useEffect(() => {
				if (!fieldId) {
					setAttributes({
						fieldId: 'range_' + Math.random().toString(36).substring(2, 11),
					});
				}
			}, []);

			const blockProps = useBlockProps({
				className: 'giraforms-field giraforms-range-slider-field'
			});

			return el(
				Fragment,
				null,
				// Inspector Controls
				el(
					InspectorControls,
					null,
					el(
						PanelBody,
						{ title: __('Field Settings', 'giraforms'), initialOpen: true },
						el(TextControl, {
							label: __('Label', 'giraforms'),
							value: label,
							onChange: (value) => setAttributes({ label: value }),
						}),
						el(ToggleControl, {
							label: __('Required Field', 'giraforms'),
							checked: required,
							onChange: (value) => setAttributes({ required: value }),
						}),
						required && el(TextControl, {
							label: __('Required message', 'giraforms'),
							value: requiredMessage,
							onChange: (val) => setAttributes({ requiredMessage: val }),
							placeholder: __('This field is required.', 'giraforms'),
							help: __('Overrides the default required error message for this field.', 'giraforms'),
						}),
						el(TextControl, {
							label: __('Help text', 'giraforms'),
							value: helpText,
							onChange: (value) => setAttributes({ helpText: value }),
						})
					),
					el(
						PanelBody,
						{ title: __('Range Settings', 'giraforms'), initialOpen: false },
						el(TextControl, {
							label: __('Minimum Value', 'giraforms'),
							type: 'number',
							value: min,
							onChange: (value) => setAttributes({ min: parseFloat(value) || 0 }),
						}),
						el(TextControl, {
							label: __('Maximum Value', 'giraforms'),
							type: 'number',
							value: max,
							onChange: (value) => setAttributes({ max: parseFloat(value) || 100 }),
						}),
						el(TextControl, {
							label: __('Step', 'giraforms'),
							type: 'number',
							value: step,
							onChange: (value) => setAttributes({ step: parseFloat(value) || 1 }),
							help: __('Increment value', 'giraforms'),
						}),
						el(RangeControl, {
							label: __('Default Value', 'giraforms'),
							value: defaultValue,
							onChange: (value) => setAttributes({ defaultValue: value }),
							min: min,
							max: max,
							step: step,
						}),
						el(TextControl, {
							label: __('Unit', 'giraforms'),
							value: unit,
							onChange: (value) => setAttributes({ unit: value }),
							placeholder: __('e.g., px, %, kg', 'giraforms'),
						})
					),
					el(
						PanelBody,
						{ title: __('Display Options', 'giraforms'), initialOpen: false },
						el(ToggleControl, {
							label: __('Show Current Value', 'giraforms'),
							checked: showValue,
							onChange: (value) => setAttributes({ showValue: value }),
						}),
						el(ToggleControl, {
							label: __('Show Min/Max Labels', 'giraforms'),
							checked: showMinMax,
							onChange: (value) => setAttributes({ showMinMax: value }),
						})
					),
					// Conditional Logic Panel
					
				),
				// Block Content
				el(
					'div',
					blockProps,
					el(
						'div',
						{ className: 'giraforms-range-header' },
						el(
							'label',
							{ className: required ? 'required' : '' },
							label
						),
						showValue && el(
							'span',
							{ className: 'giraforms-range-value' },
							defaultValue + unit
						)
					),
					el(
						'div',
						{ className: 'giraforms-range-wrapper' },
						showMinMax && el('span', { className: 'giraforms-range-min' }, min + unit),
						el('input', {
							type: 'range',
							min: min,
							max: max,
							step: step,
							value: defaultValue,
							disabled: true,
							className: 'giraforms-range-input',
						}),
						showMinMax && el('span', { className: 'giraforms-range-max' }, max + unit)
					),
					helpText && el('p', { className: 'giraforms-help-text' }, helpText)
				)
			);
		},

		save: function (props) {
			const { attributes } = props;
			const {
				fieldId,
				label,
				min,
				max,
				step,
				defaultValue,
				required,
				requiredMessage,
				helpText,
				showValue,
				showMinMax,
				unit
			} = attributes;

			const blockProps = useBlockProps.save({
				className: 'giraforms-field giraforms-range-slider-field',
				'data-field-id': fieldId,
			});

			return el(
				'div',
				blockProps,
				el(
					'div',
					{ className: 'giraforms-range-header' },
					el(
						'label',
						{ htmlFor: fieldId, className: required ? 'required' : '' },
						label
					),
					showValue && el(
						'span',
						{ className: 'giraforms-range-value', 'data-field': fieldId },
						el('span', { className: 'giraforms-range-value-number' }, defaultValue),
						unit
					)
				),
				el(
					'div',
					{ className: 'giraforms-range-wrapper' },
					showMinMax && el('span', { className: 'giraforms-range-min' }, min + unit),
					el('input', {
						type: 'range',
						id: fieldId,
						name: fieldId,
						min: min,
						max: max,
						step: step,
						value: defaultValue,
						required: required,
						'data-required-message': requiredMessage || undefined,
						'data-show-value': showValue ? '1' : '0',
						className: 'giraforms-range-input',
					}),
					showMinMax && el('span', { className: 'giraforms-range-max' }, max + unit)
				),
				helpText && el('div', { className: 'giraforms-field-description' }, helpText)
			);
		},
	});
})(
	window.wp.blocks,
	window.wp.element,
	window.wp.blockEditor,
	window.wp.components,
	window.wp.i18n
);
