( function ( blocks, element, serverSideRender, blockEditor, components, i18n ) {
	var __ = i18n.__,
		el = element.createElement,
		registerBlockType = blocks.registerBlockType,
		ServerSideRender = serverSideRender,
		useBlockProps = blockEditor.useBlockProps,
		InspectorControls = blockEditor.InspectorControls,
		BlockControls = element.BlockControls,
		PanelBody = components.PanelBody,
		SelectControl = components.SelectControl;

	registerBlockType( 'mobile-api/vehicle-archive', {
		apiVersion: 3,
		title: __( 'Vehicle Archive', 'ad-integration-for-mobile-de-api' ),
		description: __( 'Display a vehicle archive on the page.', 'ad-integration-for-mobile-de-api' ),
		icon: 'car',
		category: 'widgets',
		supports: {
			align: true,
			alignWide: true
		},
		attributes: {
			category: {
				type: 'array',
				default: []
			}
		},

		edit: function ( props ) {
			var blockProps = useBlockProps();

			// Get vehicle categotory taxonomy for select options
			const taxonomies = wp.data.select( 'core' ).getEntityRecords( 'taxonomy', 'mobile_api_vehicle_category', {per_page: -1} );
			const options = [];
			jQuery.each( taxonomies, function( key, val ) {
				options.push( { value: val.slug, label: val.name } );
			});

			return [
				el( 'div', blockProps,
					el( ServerSideRender, {
						block: 'mobile-api/vehicle-archive',
						attributes: props.attributes,
					} )
				),
				el( InspectorControls, { key: 'setting' },
					el( PanelBody, {
						title: __( 'Vehicle Archive Attributes', 'ad-integration-for-mobile-de-api' ),
						className: 'block-vehicle-archive-attributes',
						initialOpen: true
					},
					el( 'p', {}, __( 'Configure the vehicle archive according to your needs.', 'ad-integration-for-mobile-de-api' ) ),
					el( SelectControl, {
						label: __( 'Vehicle Category', 'ad-integration-for-mobile-de-api' ),
						value: props.attributes.category,
						multiple: true,
						options: options,
						onChange: function ( newCategory ) {
							props.setAttributes( { category: newCategory } )
						}
					}))
				)
			]
		},
	} );
} )(
	window.wp.blocks,
	window.wp.element,
	window.wp.serverSideRender,
	window.wp.blockEditor,
	window.wp.components,
	window.wp.i18n
);
