/**
 * Submit Button Block
 */

(function (blocks, element, blockEditor, components, i18n) {
	const { registerBlockType } = blocks;
	const { createElement: el, Fragment, useEffect } = element;
	const {
		InspectorControls,
		BlockControls,
		AlignmentToolbar,
		useBlockProps,
		PanelColorSettings
	} = blockEditor;

	const {
		PanelBody,
		TextControl,
		SelectControl,
		RangeControl,
		__experimentalToggleGroupControl,
		__experimentalToggleGroupControlOption
	} = components;

	const { __ } = i18n;

	// Fallback for ToggleGroupControl
	const ToggleGroupControl =
		__experimentalToggleGroupControl || components.ToggleGroupControl;
	const ToggleGroupControlOption =
		__experimentalToggleGroupControlOption || components.ToggleGroupControlOption;

	registerBlockType('giraforms/submit-button', {
		icon: {
			src: 'button',
			foreground: '#3858e9'
		},

		edit: function (props) {
			const { attributes, setAttributes } = props;
			const {
				buttonText,
				buttonStyle,
				alignment,
				formId,
				backgroundColor,
				textColor,
				borderRadius,
				width,
				gradient,
				paddingTop,
				paddingRight,
				paddingBottom,
				paddingLeft
			} = attributes;

			useEffect(() => {
				if (!formId) {
					setAttributes({
						formId: 'form_' + Math.random().toString(36).substring(2, 11),
					});
				}
			}, []);

			const buttonStyles = {};
			if (backgroundColor && buttonStyle !== 'outline') {
				buttonStyles.backgroundColor = backgroundColor;
			}
			if (textColor) {
				buttonStyles.color = textColor;
			}
			if (borderRadius) {
				buttonStyles.borderRadius = borderRadius;
			}
			if (gradient && buttonStyle !== 'outline') {
				buttonStyles.background = gradient;
			}
			if (buttonStyle === 'outline') {
				buttonStyles.backgroundColor = 'transparent';
				buttonStyles.borderColor = backgroundColor || textColor || '#385aea';
				buttonStyles.borderWidth = '2px';
				buttonStyles.borderStyle = 'solid';
				if (!textColor) {
					buttonStyles.color = backgroundColor || '#385aea';
				}
			}
			if (paddingTop) buttonStyles.paddingTop = paddingTop;
			if (paddingRight) buttonStyles.paddingRight = paddingRight;
			if (paddingBottom) buttonStyles.paddingBottom = paddingBottom;
			if (paddingLeft) buttonStyles.paddingLeft = paddingLeft;

			const wrapperStyles = { textAlign: alignment };

			const blockProps = useBlockProps({
				className: 'giraforms-submit-wrapper',
				style: wrapperStyles,
			});

			let buttonClass = 'wp-block-button';
			if (buttonStyle === 'outline') {
				buttonClass += ' is-style-outline';
			}
			if (width) {
				buttonClass += ` has-custom-width wp-block-button__width-${width.replace('%', '')}`;
			}

			return el(
				Fragment,
				null,

				el(
					BlockControls,
					null,
					el(AlignmentToolbar, {
						value: alignment,
						onChange: (value) => setAttributes({ alignment: value }),
					})
				),

				el(
					InspectorControls,
					null,

					el(
						PanelBody,
						{ title: __('Button Settings', 'giraforms'), initialOpen: true },
						el(TextControl, {
							label: __('Button Text', 'giraforms'),
							value: buttonText,
							onChange: (value) => setAttributes({ buttonText: value }),
						}),
						el(SelectControl, {
							label: __('Style', 'giraforms'),
							value: buttonStyle,
							options: [
								{ label: __('Filled', 'giraforms'), value: 'fill' },
								{ label: __('Outline', 'giraforms'), value: 'outline' },
							],
							onChange: (value) => setAttributes({ buttonStyle: value }),
						})
					),

					el(
						PanelBody,
						{ title: __('Width', 'giraforms'), initialOpen: false },
						ToggleGroupControl
							? el(
									ToggleGroupControl,
									{
										label: __('Button Width', 'giraforms'),
										value: width,
										onChange: (value) => setAttributes({ width: value }),
										isBlock: true,
									},
									el(ToggleGroupControlOption, { value: '25%', label: '25%' }),
									el(ToggleGroupControlOption, { value: '50%', label: '50%' }),
									el(ToggleGroupControlOption, { value: '75%', label: '75%' }),
									el(ToggleGroupControlOption, { value: '100%', label: '100%' })
							  )
							: el(SelectControl, {
									label: __('Button Width', 'giraforms'),
									value: width,
									options: [
										{ label: __('Auto', 'giraforms'), value: '' },
										{ label: '25%', value: '25%' },
										{ label: '50%', value: '50%' },
										{ label: '75%', value: '75%' },
										{ label: '100%', value: '100%' },
									],
									onChange: (value) => setAttributes({ width: value }),
							  })
					),

					el(PanelColorSettings, {
						title: __('Colors', 'giraforms'),
						initialOpen: false,
						colorSettings: [
							{
								value: backgroundColor,
								onChange: (value) => setAttributes({ backgroundColor: value }),
								label: __('Background', 'giraforms'),
							},
							{
								value: textColor,
								onChange: (value) => setAttributes({ textColor: value }),
								label: __('Text', 'giraforms'),
							},
						],
					}),

					el(
						PanelBody,
						{ title: __('Border', 'giraforms'), initialOpen: false },
						el(
							components.__experimentalUnitControl || components.UnitControl,
							{
								label: __('Border Radius', 'giraforms'),
								value: borderRadius,
								onChange: (value) => setAttributes({ borderRadius: value }),
								units: [
									{ value: 'px', label: 'px', default: 4 },
								],
								min: 0,
							}
						)
					),

					el(
						PanelBody,
						{ title: __('Padding', 'giraforms'), initialOpen: false },
						el('div', { style: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '12px' } },
							el(components.__experimentalUnitControl || components.UnitControl, {
								label: __('Top', 'giraforms'),
								value: paddingTop,
								onChange: (value) => setAttributes({ paddingTop: value }),
								units: [
									{ value: 'px', label: 'px', default: 12 },
									{ value: 'em', label: 'em', default: 0.75 },
									{ value: 'rem', label: 'rem', default: 0.75 },
								],
								min: 0,
							}),
							el(components.__experimentalUnitControl || components.UnitControl, {
								label: __('Right', 'giraforms'),
								value: paddingRight,
								onChange: (value) => setAttributes({ paddingRight: value }),
								units: [
									{ value: 'px', label: 'px', default: 24 },
									{ value: 'em', label: 'em', default: 1.5 },
									{ value: 'rem', label: 'rem', default: 1.5 },
								],
								min: 0,
							}),
							el(components.__experimentalUnitControl || components.UnitControl, {
								label: __('Bottom', 'giraforms'),
								value: paddingBottom,
								onChange: (value) => setAttributes({ paddingBottom: value }),
								units: [
									{ value: 'px', label: 'px', default: 12 },
									{ value: 'em', label: 'em', default: 0.75 },
									{ value: 'rem', label: 'rem', default: 0.75 },
								],
								min: 0,
							}),
							el(components.__experimentalUnitControl || components.UnitControl, {
								label: __('Left', 'giraforms'),
								value: paddingLeft,
								onChange: (value) => setAttributes({ paddingLeft: value }),
								units: [
									{ value: 'px', label: 'px', default: 24 },
									{ value: 'em', label: 'em', default: 1.5 },
									{ value: 'rem', label: 'rem', default: 1.5 },
								],
								min: 0,
							})
						)
					)
				),

				el(
					'div',
					blockProps,
					el(
						'div',
						{ className: buttonClass },
						el(
							'button',
							{
								type: 'submit',
								className: 'wp-block-button__link wp-element-button',
								style: buttonStyles,
								disabled: true,
							},
							buttonText
						)
					)
				)
			);
		},

		save: function (props) {
			const { attributes } = props;
			const {
				buttonText,
				buttonStyle,
				alignment,
				backgroundColor,
				textColor,
				borderRadius,
				width,
				gradient,
				paddingTop,
				paddingRight,
				paddingBottom,
				paddingLeft
			} = attributes;

			const buttonStyles = {};
			if (backgroundColor && buttonStyle !== 'outline') {
				buttonStyles.backgroundColor = backgroundColor;
			}
			if (textColor) {
				buttonStyles.color = textColor;
			}
			if (borderRadius) {
				buttonStyles.borderRadius = borderRadius;
			}
			if (gradient && buttonStyle !== 'outline') {
				buttonStyles.background = gradient;
			}
			if (buttonStyle === 'outline') {
				buttonStyles.backgroundColor = 'transparent';
				buttonStyles.borderColor = backgroundColor || textColor || '#385aea';
				buttonStyles.borderWidth = '2px';
				buttonStyles.borderStyle = 'solid';
				if (!textColor) {
					buttonStyles.color = backgroundColor || '#385aea';
				}
			}
			if (paddingTop) buttonStyles.paddingTop = paddingTop;
			if (paddingRight) buttonStyles.paddingRight = paddingRight;
			if (paddingBottom) buttonStyles.paddingBottom = paddingBottom;
			if (paddingLeft) buttonStyles.paddingLeft = paddingLeft;

			const saveProps = useBlockProps.save({
				className: 'giraforms-submit-wrapper',
				style: { textAlign: alignment },
			});

			let buttonClass = 'wp-block-button';
			if (buttonStyle === 'outline') {
				buttonClass += ' is-style-outline';
			}
			if (width) {
				buttonClass += ` has-custom-width wp-block-button__width-${width.replace('%', '')}`;
			}

			return el(
				'div',
				saveProps,
				el(
					'div',
					{ className: buttonClass },
					el(
						'button',
						{
							type: 'submit',
							className: 'wp-block-button__link wp-element-button',
							style: buttonStyles,
						},
						buttonText
					)
				)
			);
		},
	});
})(
	window.wp.blocks,
	window.wp.element,
	window.wp.blockEditor,
	window.wp.components,
	window.wp.i18n
);
