/* global wp */
( function ( wp ) {
	'use strict';

	var el = wp.element.createElement;
	var __ = wp.i18n.__;
	var InspectorControls = wp.blockEditor.InspectorControls;
	var PanelBody = wp.components.PanelBody;
	var TextControl = wp.components.TextControl;
	var SelectControl = wp.components.SelectControl;
	var RangeControl = wp.components.RangeControl;
	var ToggleControl = wp.components.ToggleControl;
	var ServerSideRender = wp.serverSideRender;

	wp.blocks.registerBlockType( 'wohno/listings', {
		edit: function ( props ) {
			var a = props.attributes;
			var set = props.setAttributes;

			var controls = el(
				InspectorControls,
				{},
				el(
					PanelBody,
					{ title: __( 'Filter', 'wohno' ), initialOpen: true },
					el( TextControl, {
						label: __( 'Stadt', 'wohno' ),
						value: a.city,
						onChange: function ( v ) {
							set( { city: v } );
						},
					} ),
					el( TextControl, {
						label: __( 'PLZ', 'wohno' ),
						value: a.zip,
						onChange: function ( v ) {
							set( { zip: v } );
						},
					} ),
					el( TextControl, {
						label: __( 'Zimmer min.', 'wohno' ),
						type: 'number',
						value: a.rooms_min,
						onChange: function ( v ) {
							set( { rooms_min: v } );
						},
					} ),
					el( TextControl, {
						label: __( 'Zimmer max.', 'wohno' ),
						type: 'number',
						value: a.rooms_max,
						onChange: function ( v ) {
							set( { rooms_max: v } );
						},
					} ),
					el( TextControl, {
						label: __( 'Max. Miete (€)', 'wohno' ),
						type: 'number',
						value: a.rent_max,
						onChange: function ( v ) {
							set( { rent_max: v } );
						},
					} ),
					el( SelectControl, {
						label: __( 'Objekttyp', 'wohno' ),
						value: a.property_type,
						options: [
							{ label: __( 'Alle', 'wohno' ), value: '' },
							{ label: __( 'Wohnung', 'wohno' ), value: 'apartment' },
							{ label: __( 'Haus', 'wohno' ), value: 'house' },
							{ label: __( 'Studio', 'wohno' ), value: 'studio' },
							{ label: __( 'WG-Zimmer', 'wohno' ), value: 'wg_room' },
							{ label: __( 'Sonstiges', 'wohno' ), value: 'other' },
						],
						onChange: function ( v ) {
							set( { property_type: v } );
						},
					} ),
					el( ToggleControl, {
						label: __( 'Nur WBS', 'wohno' ),
						checked: a.wbs_only,
						onChange: function ( v ) {
							set( { wbs_only: v } );
						},
					} ),
					el( TextControl, {
						label: __( 'Suche', 'wohno' ),
						value: a.q,
						onChange: function ( v ) {
							set( { q: v } );
						},
					} )
				),
				el(
					PanelBody,
					{ title: __( 'Layout', 'wohno' ), initialOpen: false },
					el( SelectControl, {
						label: __( 'Darstellung', 'wohno' ),
						value: a.layout,
						options: [
							{ label: __( 'Raster', 'wohno' ), value: 'grid' },
							{ label: __( 'Karten (groß)', 'wohno' ), value: 'cards' },
							{ label: __( 'Liste', 'wohno' ), value: 'list' },
							{ label: __( 'Karte', 'wohno' ), value: 'map' },
						],
						onChange: function ( v ) {
							set( { layout: v } );
						},
					} ),
					el( RangeControl, {
						label: __( 'Anzahl', 'wohno' ),
						min: 1,
						max: 50,
						value: a.limit,
						onChange: function ( v ) {
							set( { limit: v } );
						},
					} ),
					// "Spalten" only affects the grid layout.
					'grid' === a.layout
						? el( RangeControl, {
							label: __( 'Spalten', 'wohno' ),
							min: 1,
							max: 4,
							value: a.columns,
							onChange: function ( v ) {
								set( { columns: v } );
							},
						} )
						: null,
					el( ToggleControl, {
						label: __( '„Mehr laden"-Button', 'wohno' ),
						checked: a.load_more,
						onChange: function ( v ) {
							set( { load_more: v } );
						},
					} ),
					el( ToggleControl, {
						label: __( 'Suche & Filter anzeigen', 'wohno' ),
						help: __( 'Zeigt deinen Besuchern eine Filterleiste (Stadt, Zimmer, Preis …) über den Inseraten.', 'wohno' ),
						checked: a.search,
						onChange: function ( v ) {
							set( { search: v } );
						},
					} )
				)
			);

			var preview = el( ServerSideRender, {
				block: 'wohno/listings',
				attributes: a,
			} );

			return el( 'div', props.blockProps || {}, controls, preview );
		},
		save: function () {
			return null; // Dynamic block — rendered server-side.
		},
	} );

	// Single-listing block: embed one listing's card by id.
	wp.blocks.registerBlockType( 'wohno/listing', {
		edit: function ( props ) {
			var a = props.attributes;
			var set = props.setAttributes;

			var controls = el(
				InspectorControls,
				{},
				el(
					PanelBody,
					{ title: __( 'Inserat', 'wohno' ), initialOpen: true },
					el( TextControl, {
						label: __( 'Inserat-ID', 'wohno' ),
						help: __( 'Die ID des Inserats (aus wohno.de).', 'wohno' ),
						value: a.id,
						onChange: function ( v ) {
							set( { id: v } );
						},
					} )
				)
			);

			var preview = a.id
				? el( ServerSideRender, { block: 'wohno/listing', attributes: a } )
				: el( 'p', {}, __( 'Bitte eine Inserat-ID eingeben.', 'wohno' ) );

			return el( 'div', props.blockProps || {}, controls, preview );
		},
		save: function () {
			return null; // Dynamic block — rendered server-side.
		},
	} );
} )( window.wp );
