/**
 * Maca Menu List Block
 *
 * @package Maca_Menu_List
 * @since 1.0.0
 */

(function() {
    var __ = wp.i18n.__;
    var registerBlockType = wp.blocks.registerBlockType;
    var el = wp.element.createElement;
    var ServerSideRender = wp.serverSideRender;

    registerBlockType('maca-restu/menu-list', {
        title: __('maca Restu', 'maca-restu-pro'),
        description: __('Display menu categories with buttons', 'maca-restu-pro'),
        icon: 'list',
        category: 'widgets',
        keywords: [
            __('menu', 'maca-restu-pro'),
            __('category', 'maca-restu-pro'),
            __('food', 'maca-restu-pro')
        ],
        attributes: {
            buttons: {
                type: 'boolean',
                default: true
            },
            category: {
                type: 'string',
                default: ''
            }
        },
        edit: function(props) {
            var attributes = props.attributes;
            var setAttributes = props.setAttributes;

            return el('div', { className: 'maca-restu-block-editor' },
                el(ServerSideRender, {
                    block: 'maca-restu/menu-list',
                    attributes: attributes
                }),
                el('div', { className: 'maca-restu-block-controls' },
                    el('label', { className: 'components-base-control__label' },
                        __('Display Options', 'maca-restu-pro')
                    ),
                    el('select', {
                        value: attributes.buttons ? 'buttons' : 'list',
                        onChange: function(value) {
                            setAttributes({ buttons: value === 'buttons' });
                        },
                        className: 'components-select-control__input'
                    },
                        el('option', { value: 'buttons' }, __('Category Buttons', 'maca-restu-pro')),
                        el('option', { value: 'list' }, __('List View', 'maca-restu-pro'))
                    )
                )
            );
        },
        save: function() {
            return null; // Server-side rendering
        }
    });
})();
