/**
 * @file assets/js/blocks/block-book-grid.js
 * Registers the mbs/book-grid Gutenberg block.
 * Depends on mbs-blocks-editor (wp.* globals + window.mbsBlocksCore helpers).
 * Helpers used: none
 * @package MyBookShowroom
 * @since   1.0.0
 */

( function ( wp, mbsCore ) {
    'use strict';

    const { registerBlockType } = wp.blocks;
    const { InspectorControls, useBlockProps } = wp.blockEditor;
    const { ServerSideRender } = wp.serverSideRender;
    const { PanelBody, SelectControl, TextControl, RangeControl, ToggleControl } = wp.components;
    const { createElement: el, Fragment } = wp.element;

    // ============================================================================
    registerBlockType('mbs/book-grid', {
        apiVersion: 3,
        title: 'Book Grid',
        icon: 'grid-view',
        category: 'mbs',
        keywords: [ 'books', 'catalog', 'grid', 'library', 'book list' ],

        attributes: {
            limit:   { type: 'number', default: 6 },
            columns: { type: 'number', default: 3 },   // BLK-GRID-1: per-block column count
            orderby: { type: 'string', default: 'date' },
            author:  { type: 'string', default: '' },
            series:  { type: 'string', default: '' },
            genre:   { type: 'string', default: '' },
            tag:     { type: 'string', default: '' },
        },

        edit: function (props) {
            const { attributes, setAttributes } = props;

            return el(
                Fragment,
                {},
                el(
                    InspectorControls,
                    {},
                    el(
                        PanelBody,
                        { title: 'Book Grid Settings', initialOpen: true },
                        el(RangeControl, {
                            label: 'Number of Books',
                            value: attributes.limit,
                            onChange: function (value) {
                                setAttributes({ limit: value });
                            },
                            min: 1,
                            max: 24,
                        }),
                        el(RangeControl, {
                            label: 'Columns',
                            value: attributes.columns,
                            onChange: function (value) {
                                setAttributes({ columns: value });
                            },
                            min: 1,
                            max: 6,
                        }),
                        el(SelectControl, {
                            label: 'Order By',
                            value: attributes.orderby,
                            options: [
                                { label: 'Date Added',    value: 'date' },
                                { label: 'Title (A–Z)',   value: 'title' },
                                { label: 'Menu Order',    value: 'menu_order' },
                                { label: 'Random',        value: 'rand' },
                            ],
                            onChange: function (value) {
                                setAttributes({ orderby: value });
                            },
                        })
                    ),
                    el(
                        PanelBody,
                        { title: 'Filter by Taxonomy', initialOpen: false },
                        el(TextControl, {
                            label: 'Author slug',
                            help: 'Show books by this author only (use the term slug).',
                            value: attributes.author,
                            onChange: function (value) {
                                setAttributes({ author: value });
                            },
                        }),
                        el(TextControl, {
                            label: 'Series slug',
                            help: 'Show books in this series only.',
                            value: attributes.series,
                            onChange: function (value) {
                                setAttributes({ series: value });
                            },
                        }),
                        el(TextControl, {
                            label: 'Genre slug',
                            help: 'Show books in this genre only.',
                            value: attributes.genre,
                            onChange: function (value) {
                                setAttributes({ genre: value });
                            },
                        }),
                        el(TextControl, {
                            label: 'Tag slug',
                            help: 'Show books with this tag only.',
                            value: attributes.tag,
                            onChange: function (value) {
                                setAttributes({ tag: value });
                            },
                        })
                    )
                ),
                el(
                    'div',
                    useBlockProps({ className: 'mbs-block mbs-block-book-grid' }),
                    el(ServerSideRender, {
                        block: 'mbs/book-grid',
                        attributes: attributes,
                    })
                )
            );
        },

        save: function () {
            return null;
        },
    });

} )( window.wp, window.mbsBlocksCore || {} );
