/**
 * maca News block – editor
 */
(function () {
    var __ = wp.i18n.__;
    var registerBlockType = wp.blocks.registerBlockType;
    var el = wp.element.createElement;
    var ServerSideRender = wp.serverSideRender;
    var RangeControl = wp.components.RangeControl;
    var ToggleControl = wp.components.ToggleControl;
    var SelectControl = wp.components.SelectControl;

    registerBlockType('maca-restu/maca-info-news', {
        title: __('maca News', 'maca-restu-pro'),
        description: __('Show published news from Informationsdisk.', 'maca-restu-pro'),
        category: 'maca-restu-pro',
        icon: 'megaphone',
        supports: {
            html: false
        },
        attributes: {
            limit: { type: 'number', default: 5 },
            layout: { type: 'string', default: 'list' },
            bannerScroll: { type: 'boolean', default: true },
            showImage: { type: 'boolean', default: true },
            showDate: { type: 'boolean', default: true },
            showExcerpt: { type: 'boolean', default: true }
        },
        edit: function (props) {
            var attributes = props.attributes;
            var setAttributes = props.setAttributes;
            var layout = attributes.layout || 'list';
            var isList = layout === 'list';
            var isBanner = layout === 'banner';

            return el(
                'div',
                { className: 'maca-restu-block-editor' },
                el(ServerSideRender, {
                    block: 'maca-restu/maca-info-news',
                    attributes: attributes
                }),
                el(
                    'div',
                    { className: 'maca-restu-block-controls' },
                    el(SelectControl, {
                        label: __('Layout', 'maca-restu-pro'),
                        value: layout,
                        options: [
                            { label: __('List', 'maca-restu-pro'), value: 'list' },
                            { label: __('Sidebar left', 'maca-restu-pro'), value: 'sidebar-left' },
                            { label: __('Sidebar right', 'maca-restu-pro'), value: 'sidebar-right' },
                            { label: __('Top banner', 'maca-restu-pro'), value: 'banner' }
                        ],
                        onChange: function (value) {
                            setAttributes({ layout: value });
                        }
                    }),
                    el(RangeControl, {
                        label: isBanner
                            ? __('Number of news in banner', 'maca-restu-pro')
                            : __('Number of items', 'maca-restu-pro'),
                        value: attributes.limit || 5,
                        onChange: function (value) {
                            setAttributes({ limit: value });
                        },
                        min: 1,
                        max: 20
                    }),
                    isBanner ? el(ToggleControl, {
                        label: __('Scrolling ticker', 'maca-restu-pro'),
                        checked: !!attributes.bannerScroll,
                        onChange: function (value) {
                            setAttributes({ bannerScroll: value });
                        },
                        help: __('Continuous horizontal scroll. Without this, swipe or scroll sideways when there are several news items.', 'maca-restu-pro')
                    }) : null,
                    isBanner ? el('p', { className: 'description' },
                        __('Several news items appear side by side in the same banner. Set “Number of news in banner” to 2 or more.', 'maca-restu-pro')
                    ) : null,
                    isBanner ? el('p', { className: 'description' },
                        __('Click a news item in the banner to read the full text in a popup.', 'maca-restu-pro')
                    ) : null,
                    isList ? el(ToggleControl, {
                        label: __('Show image', 'maca-restu-pro'),
                        checked: attributes.showImage !== false,
                        onChange: function (value) {
                            setAttributes({ showImage: value });
                        }
                    }) : null,
                    el(ToggleControl, {
                        label: __('Show date', 'maca-restu-pro'),
                        checked: attributes.showDate !== false,
                        onChange: function (value) {
                            setAttributes({ showDate: value });
                        }
                    }),
                    el(ToggleControl, {
                        label: __('Show excerpt', 'maca-restu-pro'),
                        checked: attributes.showExcerpt !== false,
                        onChange: function (value) {
                            setAttributes({ showExcerpt: value });
                        }
                    })
                )
            );
        },
        save: function () {
            return null;
        }
    });
})();
