/**
 * Registers the Yatoon Gutenberg blocks in the block editor.
 *
 * Each block is a thin wrapper around an existing shortcode. There is no
 * "save" markup on our side -- the server always renders it via
 * render_callback (see class-yatoon-editor-integrations.php), and this file
 * only builds the editing UI: Inspector controls plus a live preview using
 * ServerSideRender, so what you see in the editor is the real shortcode
 * output, not a fake mock-up.
 */
( function( blocks, element, blockEditor, components, i18n, serverSideRender ) {
    if ( ! blocks || ! window.YatoonBlocksData ) {
        return;
    }

    var el = element.createElement;
    var InspectorControls = blockEditor.InspectorControls;
    var PanelBody = components.PanelBody;
    var TextControl = components.TextControl;
    var ToggleControl = components.ToggleControl;
    var SelectControl = components.SelectControl;
    var __ = i18n.__;
    var ServerSideRender = serverSideRender && serverSideRender.default ? serverSideRender.default : serverSideRender;

    function fieldControl( def, key, value, onChange ) {
        if ( def.type === 'boolean' ) {
            return el( ToggleControl, {
                key: key,
                label: def.label,
                checked: !! value,
                onChange: function( v ) {
                    var next = {};
                    next[ key ] = v;
                    onChange( next );
                },
            } );
        }
        if ( def.type === 'select' ) {
            var options = [];
            for ( var optKey in def.options ) {
                if ( def.options.hasOwnProperty( optKey ) ) {
                    options.push( { label: def.options[ optKey ], value: optKey } );
                }
            }
            return el( SelectControl, {
                key: key,
                label: def.label,
                value: value,
                options: options,
                onChange: function( v ) {
                    var next = {};
                    next[ key ] = v;
                    onChange( next );
                },
            } );
        }
        return el( TextControl, {
            key: key,
            label: def.label,
            type: def.type === 'number' ? 'number' : 'text',
            value: value,
            onChange: function( v ) {
                var next = {};
                next[ key ] = def.type === 'number' ? Number( v ) : v;
                onChange( next );
            },
        } );
    }

    Object.keys( window.YatoonBlocksData ).forEach( function( slug ) {
        var surface = window.YatoonBlocksData[ slug ];
        var blockName = 'yatoon/' + slug;
        var attKeys = Object.keys( surface.atts || {} );

        blocks.registerBlockType( blockName, {
            title: surface.title,
            description: surface.description,
            icon: surface.icon,
            category: 'yatoon',
            keywords: [ 'yatoon', 'booking', 'salon', 'appointment' ],
            attributes: ( function() {
                var attrs = {};
                attKeys.forEach( function( key ) {
                    var def = surface.atts[ key ];
                    attrs[ key ] = {
                        type: def.type === 'number' ? 'number' : ( def.type === 'boolean' ? 'boolean' : 'string' ),
                        default: def.default,
                    };
                } );
                return attrs;
            } )(),

            edit: function( props ) {
                var attributes = props.attributes;
                var setAttributes = props.setAttributes;

                var controls = attKeys.length
                    ? attKeys.map( function( key ) {
                        return fieldControl( surface.atts[ key ], key, attributes[ key ], setAttributes );
                    } )
                    : [ el( 'p', { key: 'none', style: { opacity: 0.7 } }, surface.description ) ];

                return el( element.Fragment, {},
                    el( InspectorControls, {},
                        el( PanelBody, { title: __( 'Settings', 'yatoon-booking-system' ) }, controls )
                    ),
                    el( 'div', { className: 'yatoon-block-preview' },
                        ServerSideRender
                            ? el( ServerSideRender, { block: blockName, attributes: attributes } )
                            : el( 'p', {}, surface.title )
                    )
                );
            },

            save: function() {
                return null; // Always server-rendered.
            },
        } );
    } );
} )(
    window.wp.blocks,
    window.wp.element,
    window.wp.blockEditor || window.wp.editor,
    window.wp.components,
    window.wp.i18n,
    window.wp.serverSideRender
);
