( () => {
	const { __ } = wp.i18n;

	window.JeoLegendTypes.registerLegendType( 'icons', {
	label: __( 'Icon categories', 'jeowp' ),

	/**
	 * Returns the schema fo the legend_type_options for this legend type
	 */
	getSchema() {
		return {
			type: 'object',
			properties: {
				colors: {
					type: 'array',
					description: __( 'An array of labels and icons', 'jeowp' ),
					items: {
						type: 'object',
						properties: {
							label: {
								type: 'string',
							},
							icon: {
								type: 'string',
								description: __( 'URL', 'jeowp' ),
							},
						},
					},
				},
			},
		};
	},

	render( map, attributes ) {
		const container = document.createElement( 'div' );
		container.classList.add( 'icons-container' );

		attributes.legend_type_options.icons.forEach( ( c ) => {
			const iconItem = document.createElement( 'div' );
			iconItem.classList.add( 'icons-item' );

			const box = document.createElement( 'img' );
			box.classList.add( 'icons-item-img' );
			box.src = c.icon;

			const itemLabel = document.createElement( 'span' );
			itemLabel.innerHTML = c.label;

			iconItem.appendChild( box );
			iconItem.appendChild( itemLabel );

			container.appendChild( iconItem );
		} );

		return container;
	},

	} );
} )();
