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

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

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

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

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

			// Update option
			const updateOption = (index, field, value) => {
				const newOptions = [...options];
				newOptions[index][field] = value;
				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(SelectControl, {
							label: __('Display Style', 'giraforms'),
							value: displayStyle,
							options: [
								{ label: __('Default', 'giraforms'), value: 'default' },
								{ label: __('Buttons', 'giraforms'), value: 'buttons' },
							],
							onChange: (value) => setAttributes({ displayStyle: value }),
						})
					),
					el(
						PanelBody,
						{ title: __('Options', 'giraforms'), initialOpen: true },
						options.map((option, index) =>
							el(
								'div',
								{ key: index, style: { marginBottom: '15px', padding: '10px', border: '1px solid #ddd', borderRadius: '4px' } },
								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,
									isSmall: true,
									onClick: () => removeOption(index),
								}, __('Remove', 'giraforms'))
							)
						),
						el(Button, {
							isPrimary: true,
							onClick: addOption,
						}, __('Add Option', 'giraforms'))
					),
					// Conditional Logic Panel
					
				),
				el(
					'div',
					useBlockProps({ className: 'giraforms-field giraforms-field-checkbox' + (displayStyle === 'buttons' ? ' giraforms-style-buttons' : '') }),
					el('label', { className: required ? 'required' : '' }, label),
					el('div', { className: 'giraforms-options-wrapper' },
						options.map((option, index) =>
							el(
								'div',
								{ key: index, className: 'giraforms-checkbox-option' },
								el('input', { type: 'checkbox', disabled: true, value: option.value }),
								el('label', null, option.label)
							)
						)
					)
				)
			);
		},

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

			return el(
				'div',
				useBlockProps.save({ className: 'giraforms-field giraforms-field-checkbox' + (displayStyle === 'buttons' ? ' giraforms-style-buttons' : ''), 'data-field-id': fieldId }),
				el('label', { className: required ? 'required' : '' }, label),
				el('div', { className: 'giraforms-options-wrapper' },
					options.map((option, index) =>
						el(
							'div',
							{ key: index, className: 'giraforms-checkbox-option' },
							el('input', {
								type: 'checkbox',
								id: fieldId + '_' + index,
								name: fieldId + '[]',
								value: option.value,
							'data-required-message': requiredMessage || undefined,
							}),
							el('label', { htmlFor: fieldId + '_' + index }, option.label)
						)
					)
				)
			);
		},
	});
})(window.wp.blocks, window.wp.element, window.wp.blockEditor, window.wp.components, window.wp.i18n);
