/* global wp */
( function ( blocks, element, blockEditor, i18n ) {
    'use strict';

    var el          = element.createElement;
    var Fragment    = element.Fragment;
    var __          = i18n.__;
    var useBlockProps = blockEditor.useBlockProps;
    var InspectorControls = blockEditor.InspectorControls;
    var PanelBody   = wp.components.PanelBody;
    var TextControl = wp.components.TextControl;

    blocks.registerBlockType( 'glance-live-search/search', {
        edit: function ( props ) {
            var attributes    = props.attributes;
            var setAttributes = props.setAttributes;
            var blockProps    = useBlockProps( { className: 'glse-block-preview' } );

            return el(
                Fragment,
                null,
                el(
                    InspectorControls,
                    null,
                    el(
                        PanelBody,
                        { title: __( 'Settings', 'glance-live-search' ), initialOpen: true },
                        el( TextControl, {
                            label:    __( 'Placeholder', 'glance-live-search' ),
                            help:     __( 'Leave empty to use the default placeholder text.', 'glance-live-search' ),
                            value:    attributes.placeholder,
                            onChange: function ( val ) { setAttributes( { placeholder: val } ); },
                        } )
                    )
                ),
                el(
                    'div',
                    blockProps,
                    el(
                        'div',
                        { className: 'glse-block-placeholder' },
                        el( 'span', { className: 'dashicons dashicons-search' } ),
                        el( 'span', { className: 'glse-block-label' },
                            __( 'Glance Live Search', 'glance-live-search' )
                        ),
                        attributes.placeholder
                            ? el( 'em', { className: 'glse-block-ph' }, '"' + attributes.placeholder + '"' )
                            : null
                    )
                )
            );
        },

        // save: null → server-side render (render.php).
        save: function () { return null; },
    } );

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