/**
 * Textarea 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/textarea-field', {
		icon: {
			src: 'editor-textcolor',
			foreground: '#3858e9'
		},
		edit: function (props) {
			const { attributes, setAttributes, clientId } = props;
			const { fieldId, label, placeholder, required, requiredMessage, helpText, rows, minLength, maxLength } = attributes;

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

			return el(
				Fragment,
				null,
				el(
					InspectorControls,
					null,
					el(
						PanelBody,
						{ title: __('Field Settings', 'giraforms'), initialOpen: true },
						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(TextControl, {
							label: __('Help text', 'giraforms'),
							value: helpText,
							onChange: (value) => setAttributes({ helpText: value }),
						}),
						el(RangeControl, {
							label: __('Number of rows', 'giraforms'),
							value: rows,
							onChange: (value) => setAttributes({ rows: value }),
							min: 2,
							max: 20,
						})
					),
					el(
						PanelBody,
						{ title: __('Validation', 'giraforms'), initialOpen: false },
						el(RangeControl, {
							label: __('Minimum length', 'giraforms'),
							value: minLength,
							onChange: (value) => setAttributes({ minLength: value }),
							min: 0,
							max: 5000,
						}),
						el(RangeControl, {
							label: __('Maximum length', 'giraforms'),
							value: maxLength,
							onChange: (value) => setAttributes({ maxLength: value }),
							min: 0,
							max: 5000,
						})
					),
					// Conditional Logic Panel
					
				),
				el(
					'div',
					useBlockProps({ className: 'giraforms-field giraforms-field-textarea' }),
					el('label', { className: required ? 'required' : '' }, label),
					el('textarea', {
						placeholder: placeholder,
						rows: rows,
						disabled: true,
					}),
					helpText && el('div', { className: 'giraforms-field-description' }, helpText)
				)
			);
		},

		save: function (props) {
			const { attributes } = props;
			const { fieldId, label, placeholder, required, requiredMessage, helpText, rows, minLength, maxLength } = attributes;

			return el(
				'div',
				useBlockProps.save({ className: 'giraforms-field giraforms-field-textarea', 'data-field-id': fieldId }),
				el('label', { htmlFor: fieldId, className: required ? 'required' : '' }, label),
				el('textarea', {
					id: fieldId,
					name: fieldId,
					placeholder: placeholder,
					rows: rows,
					required: required,
					'data-required-message': requiredMessage || undefined,
					minLength: minLength > 0 ? minLength : null,
					maxLength: maxLength > 0 ? maxLength : null,
				}),
				helpText && el('div', { className: 'giraforms-field-description' }, helpText)
			);
		},
	});
})(window.wp.blocks, window.wp.element, window.wp.blockEditor, window.wp.components, window.wp.i18n);
