/**
 * Language Switcher - Gutenberg Block (Editor)
 *
 * @package Signocore\Multilanguage
 */

(function () {
	'use strict';

	var el = wp.element.createElement;
	var registerBlockType = wp.blocks.registerBlockType;
	var InspectorControls = wp.blockEditor.InspectorControls;
	var PanelBody = wp.components.PanelBody;
	var SelectControl = wp.components.SelectControl;
	var ToggleControl = wp.components.ToggleControl;
	var ServerSideRender = wp.serverSideRender;
	var useBlockProps = wp.blockEditor.useBlockProps;

	registerBlockType('signocore-multilanguage/language-switcher', {
		edit: function (props) {
			var attributes = props.attributes;
			var setAttributes = props.setAttributes;
			var blockProps = useBlockProps();

			return el(
				'div',
				blockProps,
				el(InspectorControls, null,
					el(PanelBody, { title: 'Settings', initialOpen: true },
						el(SelectControl, {
							label: 'Style',
							value: attributes.style,
							options: [
								{ label: 'Dropdown', value: 'dropdown' },
								{ label: 'Horizontal List', value: 'list' },
								{ label: 'Flags Only', value: 'flags' },
								{ label: 'Inline', value: 'inline' },
							],
							onChange: function (value) {
								setAttributes({ style: value });
							},
						}),
						el(ToggleControl, {
							label: 'Show Flags',
							checked: attributes.showFlags,
							onChange: function (value) {
								setAttributes({ showFlags: value });
							},
						}),
						el(ToggleControl, {
							label: 'Show Language Names',
							checked: attributes.showNames,
							onChange: function (value) {
								setAttributes({ showNames: value });
							},
						})
					)
				),
				el(ServerSideRender, {
					block: 'signocore-multilanguage/language-switcher',
					attributes: attributes,
				})
			);
		},
	});
})();
