<?php

/**
 * Blocks Initializer
 *
 * Enqueue CSS/JS of all the blocks.
 *
 * @since   1.0.0
 * @package xgate
 */

// Exit if accessed directly.
if (!defined('ABSPATH')) {
    exit;
}

/**
 * Enqueue Gutenberg block assets for both frontend + backend.
 *
 * Assets enqueued:
 * 2. blocks.build.js - Backend.
 *
 * @uses {wp-blocks} for block type registration & related functions.
 * @uses {wp-element} for WP Element abstraction — structure of blocks.
 * @uses {wp-i18n} to internationalize the block's text.
 * @uses {wp-editor} for WP editor styles.
 * @since 1.0.0
 */
function xgate_gallery_assets()
{ // phpcs:ignore

    // Register block editor script for backend.
    wp_register_script(
        'xgate-gallery-js', // Handle.
        get_template_directory_uri() . '/inc/blocks/gallery/build/gallery.js', // Block.build.js: We register the block here. Built with Webpack.
        array('wp-blocks', 'wp-element', 'wp-block-editor', 'wp-components'), // Dependencies, defined above.
        null, // filemtime( plugin_dir_path( __DIR__ ) . 'dist/blocks.build.js' ), // Version: filemtime — Gets file modification time.
        true // Enqueue the script in the footer.
    );

    // WP Localized globals. Use dynamic PHP stuff in JavaScript via `cgbGlobal` object.
    wp_localize_script(
        'xgate-gallery-js',
        'cgbGlobal', // Array containing dynamic data for a JS Global.
        [
            'pluginDirPath' => plugin_dir_path(__DIR__),
            'pluginDirUrl' => plugin_dir_url(__DIR__),
        ]
    );

    /**
     * Register Gutenberg block on server-side.
     *
     * Register the block on server-side to ensure that the block
     * scripts and styles for both frontend and backend are
     * enqueued when the editor loads.
     *
     * @link https://wordpress.org/gutenberg/handbook/blocks/writing-your-first-block-type#enqueuing-block-scripts
     * @since 1.16.0
     */
    register_block_type(
        'xgate/gallery',
        array(
            'editor_script' => 'xgate-gallery-js',
            'render_callback' => 'gallery_render'
        )
    );
}

/**
 * @param WP_Block $blocks Block Class Instance
 */

 function gallery_render($attributes, $content, $blocks)
 {
     // Count of inner blocks available
     $item_count = count($blocks->inner_blocks);
     ob_start();
     ?>
     <section class="w-full px-6 lg:px-16 mx-auto max-w-screen-2xl py-10 sm:py-20">
         <div class="grid sm:grid-cols-2 md:grid-cols-4 gap-5 md:gap-7 gallery">
             <?php
             foreach ($blocks->inner_blocks as $index => $inner_block) :
                 $custom_class = '';
                 if (($index + 1) % 4 === 3) {
                     $custom_class = 'col-span-2 md:row-span-2 featured-gallery-image';
                 } elseif (($index + 1) % 4 === 0) {
                     $custom_class = 'col-span-2 md:row-span-2 featured-gallery-image';
                 }
                 ?>
                 <div class="block-item <?php echo esc_attr($custom_class); ?>">
                     <?php echo $inner_block->render(); ?>
                 </div>
             <?php endforeach; ?>
         </div>
     </section>
     <?php
     return ob_get_clean();
 }
 


// Hook: Block assets.
add_action('init', 'xgate_gallery_assets');
