/**
 * maca Restu menu list block – editor
 */
(function () {
    var __ = wp.i18n.__;
    var registerBlockType = wp.blocks.registerBlockType;
    var el = wp.element.createElement;
    var ServerSideRender = wp.serverSideRender;
    var config = window.macaMenulistBlock || {};
    var categories = Array.isArray(config.categories) ? config.categories : [];
    var showCategoryPicker = config.showCategoryPicker !== false;
    var i18n = config.i18n || {};

    function categorySelectValue(attributes) {
        if (attributes.categoryId && attributes.categoryId > 0) {
            return String(attributes.categoryId);
        }
        return '';
    }

    function onCategoryChange(setAttributes, event) {
        var value = event.target.value;
        if (!value) {
            setAttributes({ categoryId: 0, category: '' });
            return;
        }

        var id = parseInt(value, 10);
        var name = '';
        categories.forEach(function (cat) {
            if (cat.id === id) {
                name = cat.name || '';
            }
        });

        setAttributes({
            categoryId: id,
            category: name
        });
    }

    registerBlockType('maca-restu/maca-menu-list', {
        title: __('maca Restu menu list', 'maca-restu-pro'),
        description: __('Display your maca Restu menu categories and menus.', 'maca-restu-pro'),
        category: 'maca-restu-pro',
        icon: 'food',
        supports: {
            html: false
        },
        attributes: {
            buttons: { type: 'boolean', default: true },
            category: { type: 'string', default: '' },
            categoryId: { type: 'number', default: 0 }
        },
        edit: function (props) {
            var attributes = props.attributes;
            var setAttributes = props.setAttributes;
            var categoryOptions = [
                el('option', { key: 'all', value: '' }, i18n.allCategories || __('All categories', 'maca-restu-pro'))
            ];

            categories.forEach(function (cat) {
                categoryOptions.push(
                    el('option', { key: String(cat.id), value: String(cat.id) }, cat.name || '')
                );
            });

            return el(
                'div',
                { className: 'maca-restu-block-editor' },
                el(ServerSideRender, {
                    block: 'maca-restu/maca-menu-list',
                    attributes: attributes
                }),
                el(
                    'div',
                    { className: 'maca-restu-block-controls' },
                    el(
                        'label',
                        { className: 'components-base-control__label' },
                        i18n.displayOptions || __('Display Options', 'maca-restu-pro')
                    ),
                    el(
                        'select',
                        {
                            value: attributes.buttons ? 'buttons' : 'list',
                            onChange: function (event) {
                                setAttributes({ buttons: event.target.value === 'buttons' });
                            },
                            className: 'components-select-control__input'
                        },
                        el('option', { value: 'buttons' }, i18n.categoryButtons || __('Category Buttons', 'maca-restu-pro')),
                        el('option', { value: 'list' }, i18n.listView || __('List (vertical buttons)', 'maca-restu-pro'))
                    ),
                    showCategoryPicker
                        ? el(
                            'div',
                            { className: 'maca-restu-block-category-control' },
                            el(
                                'label',
                                { className: 'components-base-control__label' },
                                i18n.category || __('Category', 'maca-restu-pro')
                            ),
                            el(
                                'select',
                                {
                                    value: categorySelectValue(attributes),
                                    onChange: function (event) {
                                        onCategoryChange(setAttributes, event);
                                    },
                                    className: 'components-select-control__input'
                                },
                                categoryOptions
                            ),
                            el(
                                'p',
                                { className: 'components-base-control__help' },
                                i18n.categoryHelp || __('Show all categories, or only one category on this page.', 'maca-restu-pro')
                            )
                        )
                        : null
                )
            );
        },
        save: function () {
            return null;
        }
    });
})();
