/**
 * Select 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, Button } = components;
	const { __ } = i18n;

	registerBlockType('giraforms/select-field', {
		icon: {
			src: 'arrow-down',
			foreground: '#3858e9'
		},
		edit: function (props) {
			const { attributes, setAttributes, clientId } = props;
			const { fieldId, label, required, requiredMessage, options, multiple } = attributes;

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

			const addOption = () => {
				const newOptions = [...options, { label: 'Nouvelle option', value: 'option' + (options.length + 1) }];
				setAttributes({ options: newOptions });
			};

			const updateOption = (index, field, value) => {
				const newOptions = [...options];
				newOptions[index][field] = value;
				setAttributes({ options: newOptions });
			};

			const removeOption = (index) => {
				const newOptions = options.filter((_, i) => i !== index);
				setAttributes({ options: newOptions });
			};

			return el(
				Fragment,
				null,
				el(
					InspectorControls,
					null,
					el(
						PanelBody,
						{ title: __('Settings', 'giraforms') },
						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(ToggleControl, {
							label: __('Multiple selection', 'giraforms'),
							checked: multiple,
							onChange: (value) => setAttributes({ multiple: value }),
							help: __('Allow users to select more than one option.', 'giraforms'),
						}),
						el('hr'),
						el('h3', null, __('Options', 'giraforms')),
						options.map((option, index) =>
							el(
								'div',
								{ key: index, style: { marginBottom: '10px' } },
								el(TextControl, {
									label: __('Label', 'giraforms'),
									value: option.label,
									onChange: (value) => updateOption(index, 'label', value),
								}),
								el(TextControl, {
									label: __('Value', 'giraforms'),
									value: option.value,
									onChange: (value) => updateOption(index, 'value', value),
								}),
								el(Button, {
									isDestructive: true,
									onClick: () => removeOption(index),
								}, __('Remove', 'giraforms'))
							)
						),
						el(Button, {
							isPrimary: true,
							onClick: addOption,
						}, __('Add Option', 'giraforms'))
					),
					// Conditional Logic Panel
					
				),
				el(
					'div',
					useBlockProps({ className: 'giraforms-field' }),
					el('label', { className: required ? 'required' : '' }, label),
					el(
						'select',
						{ disabled: true, multiple: multiple || undefined },
						!multiple && el('option', { value: '' }, __('-- Select --', 'giraforms')),
						options.map((option, index) =>
							el('option', { key: index, value: option.value }, option.label)
						)
					)
				)
			);
		},

		save: function (props) {
			const { attributes } = props;
			const { fieldId, label, required, requiredMessage, options, multiple } = attributes;

			return el(
				'div',
				useBlockProps.save({ className: 'giraforms-field', 'data-field-id': fieldId }),
				el('label', { htmlFor: fieldId, className: required ? 'required' : '' }, label),
				el(
					'select',
					{
						id: fieldId,
						name: multiple ? fieldId + '[]' : fieldId,
						required: required,
						multiple: multiple || undefined,
						'data-required-message': requiredMessage || undefined,
					},
					!multiple && el('option', { value: '' }, '-- Select --'),
					options.map((option, index) =>
						el('option', { key: index, value: option.value }, option.label)
					)
				)
			);
		},
	});
})(window.wp.blocks, window.wp.element, window.wp.blockEditor, window.wp.components, window.wp.i18n);
