(function( blocks, element, editor, components, i18n ) {
	const { registerBlockType } = blocks;
	const { createElement } = element;
	const { InspectorControls } = editor;
	const { PanelBody, RangeControl, SelectControl } = components;
	const { __ } = i18n;

	registerBlockType( 'foodord/products', {
		title: __( 'FoodOrd Products', 'foodord' ),
		description: __( 'Display WooCommerce products in a grid layout.', 'foodord' ),
		icon: 'products',
		category: 'widgets',
		keywords: [
			__( 'woocommerce', 'foodord' ),
			__( 'products', 'foodord' ),
			__( 'foodord', 'foodord' ),
		],

		attributes: {
			limit: {
				type: 'number',
				default: -1,
			},
			columns: {
				type: 'number',
				default: 4,
			},
			orderby: {
				type: 'string',
				default: 'menu_order',
			},
			order: {
				type: 'string',
				default: 'ASC',
			},
		},

		edit: function( props ) {
			const { attributes, setAttributes } = props;
			const { limit, columns, orderby, order } = attributes;

			return [
				createElement( InspectorControls, {
					key: 'inspector',
				},
					createElement( PanelBody, {
						title: __( 'Products Settings', 'foodord' ),
						initialOpen: true,
					},
						createElement( RangeControl, {
							label: __( 'Number of Products', 'foodord' ),
							value: limit === -1 ? 50 : limit,
							onChange: function( value ) {
								setAttributes( { limit: value === 50 ? -1 : value } );
							},
							min: 1,
							max: 50,
							help: __( 'Set to maximum (50) to show all products.', 'foodord' ),
						} ),
						createElement( RangeControl, {
							label: __( 'Columns', 'foodord' ),
							value: columns,
							onChange: function( value ) {
								setAttributes( { columns: value } );
							},
							min: 1,
							max: 6,
						} ),
						createElement( SelectControl, {
							label: __( 'Order By', 'foodord' ),
							value: orderby,
							options: [
								{ label: __( 'Date', 'foodord' ), value: 'date' },
								{ label: __( 'Title', 'foodord' ), value: 'title' },
								{ label: __( 'Menu Order', 'foodord' ), value: 'menu_order' },
								{ label: __( 'Random', 'foodord' ), value: 'rand' },
							],
							onChange: function( value ) {
								setAttributes( { orderby: value } );
							},
						} ),
						createElement( SelectControl, {
							label: __( 'Order', 'foodord' ),
							value: order,
							options: [
								{ label: __( 'Descending', 'foodord' ), value: 'DESC' },
								{ label: __( 'Ascending', 'foodord' ), value: 'ASC' },
							],
							onChange: function( value ) {
								setAttributes( { order: value } );
							},
						} )
					)
				),

				createElement( 'div', {
					key: 'preview',
					className: 'foodord-products-block-preview',
				},
					createElement( 'div', {
						className: 'foodord-block-placeholder',
					},
						createElement( 'h3', null, __( 'FoodOrd Products', 'foodord' ) ),
						createElement( 'p', null,
							__( 'Displaying', 'foodord' ) + ' ' +
							( limit === -1 ? __( 'all', 'foodord' ) : limit ) + ' ' +
							__( 'products in', 'foodord' ) + ' ' + columns + ' ' +
							__( 'columns, ordered by', 'foodord' ) + ' ' + orderby + ' (' + order + ')'
						),
						createElement( 'div', {
							className: 'foodord-preview-grid wc-columns-' + columns,
						},
							Array.from({ length: Math.min( columns, 4 ) }, function( _, index ) {
								return createElement( 'div', {
									key: index,
									className: 'foodord-preview-item',
								},
									createElement( 'div', { className: 'preview-image' } ),
									createElement( 'div', { className: 'preview-title' }, __( 'Product Title', 'foodord' ) ),
									createElement( 'div', { className: 'preview-price' }, '$19.99' ),
									createElement( 'div', { className: 'preview-button' }, __( 'Add to cart', 'foodord' ) )
								);
							} )
						)
					)
				),
			];
		},

		save: function() {
			// Return null since this is a dynamic block rendered by PHP.
			return null;
		},
	} );

})( window.wp.blocks, window.wp.element, window.wp.blockEditor, window.wp.components, window.wp.i18n );
