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

	registerBlockType('giraforms/email-field', {
		icon: {
			src: 'email',
			foreground: '#3858e9'
		},
		edit: function (props) {
			const { attributes, setAttributes, clientId } = props;
			const { fieldId, label, placeholder, required, requiredMessage, helpText, sendConfirmation, confirmationTemplateId } = attributes;

			

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

			const blockProps = useBlockProps({
				className: 'giraforms-field giraforms-field-email',
			});

			return el(
				Fragment,
				null,
				el(
					InspectorControls,
					null,
					el(
						PanelBody,
						{ title: __('Field Settings', 'giraforms') },
						el(TextControl, {
							label: __('Label', 'giraforms'),
							value: label,
							onChange: (value) => setAttributes({ label: value }),
						}),
						el(TextControl, {
							label: __('Placeholder', 'giraforms'),
							value: placeholder,
							onChange: (value) => setAttributes({ placeholder: 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: __('Send confirmation email', 'giraforms'),
							help: __('User will receive a confirmation email after submission', 'giraforms'),
							checked: sendConfirmation,
							onChange: (value) => setAttributes({ sendConfirmation: value }),
						}),
						
						el(TextControl, {
							label: __('Help text', 'giraforms'),
							value: helpText,
							onChange: (value) => setAttributes({ helpText: value }),
						})
					),
					
				),
				el(
					'div',
					blockProps,
					el(
						'label',
						{ htmlFor: fieldId, className: required ? 'required' : '' },
						label
					),
					el('input', {
						type: 'email',
						id: fieldId,
						placeholder: placeholder,
						disabled: true,
					}),
					helpText &&
						el('div', { className: 'giraforms-field-description' }, helpText)
				)
			);
		},

		save: function (props) {
			const { attributes } = props;
			const { fieldId, label, placeholder, required, requiredMessage, helpText, sendConfirmation, confirmationTemplateId } = attributes;

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

			return el(
				'div',
				blockProps,
				el(
					'label',
					{ htmlFor: fieldId, className: required ? 'required' : '' },
					label
				),
				el('input', {
					type: 'email',
					id: fieldId,
					name: fieldId,
					placeholder: placeholder,
					required: required,
					'data-required-message': requiredMessage || undefined,
					'data-send-confirmation': sendConfirmation ? 'true' : 'false',
					'data-confirmation-template-id': confirmationTemplateId || '',
				}),
				helpText &&
					el('div', { className: 'giraforms-field-description' }, helpText)
			);
		},
	});
})(
	window.wp.blocks,
	window.wp.element,
	window.wp.blockEditor,
	window.wp.components,
	window.wp.i18n
);
