<?php
/**
 * WeCodeArt Framework
 *
 * WARNING: This file is part of the core WeCodeArt Framework. DO NOT edit this file under any circumstances.
 * Please do all modifications in the form of a child theme.
 *
 * @package		WeCodeArt Framework
 * @subpackage  Gutenberg\Blocks
 * @copyright   Copyright (c) 2025, WeCodeArt Framework
 * @since		5.2.4
 * @version		6.4.1
 */

namespace WeCodeArt\Gutenberg\Blocks\Design;

defined( 'ABSPATH' ) || exit;

use WeCodeArt\Singleton;
use WeCodeArt\Gutenberg\Blocks\Dynamic;
use function WeCodeArt\Functions\get_prop;

/**
 * Gutenberg Columns blocks.
 */
class Columns extends Dynamic {

	use Singleton;

	/**
	 * Block namespace.
	 *
	 * @var string
	 */
	protected $namespace = 'core';

	/**
	 * Block name.
	 *
	 * @var string
	 */
	protected $block_name = 'columns';

	/**
	 * Block args.
	 * 
	 * @param	array $current	Existing register args
	 *
	 * @return 	array
	 */
	public function block_type_args( $current ): array {
		$supports 	= get_prop( $current, [ 'supports' ], [] );

		return [
			'render_callback' 	=> [ $this, 'render' ],
			'supports'			=> wp_parse_args( [
				'shadow'	=> true, 
			], $supports )
		];
	}

	/**
	 * Dynamically renders the `core/columns` block.
	 *
	 * @param 	array 	$attributes	The attributes.
	 * @param 	string 	$content 	The block markup.
	 * @param 	object 	$block 		The block data.
	 *
	 * @return 	string 	The block markup.
	 */
	public function render( array $attributes = [], string $content = '', object $block = null ): string {
		$dom 	= wecodeart( 'dom' )::create( (string) $content );
		$div 	= wecodeart( 'dom' )::get_element( 'div', $dom );

		if ( $div ) {
			$column_count = (string) count( $block->parsed_block['innerBlocks'] ?? 0 );
	
			$div->setAttribute( 'data-columns', $column_count );

			$is_stacked = get_prop( $attributes, [ 'isStackedOnMobile' ] );

			$class	= $is_stacked === false ? 'is-not-stacked-on-mobile': 'is-stacked-on-mobile';
	
			if ( $class === 'is-stacked-on-mobile' ) {
				$classes 	= explode( ' ', $div->getAttribute( 'class' ) );
	
				if ( ! in_array( $class, $classes ) ) {
					$classes[] = $class;
				}
	
				$classes = array_unique( $classes );
	
				$div->setAttribute( 'class', implode( ' ', $classes ) );
			}
	
			$content = $dom->saveHTML();
		}
	
		return (string) $content;
	}

	/**
	 * Block styles
	 *
	 * @return 	string 	The block styles.
	 */
	public function styles() {
		$breaks	= wecodeart_json( [ 'settings', 'custom', 'breakpoints' ], [] );
		$mobile	= get_prop( $breaks, 'sm', '640px' );

		$inline = <<<CSS
			*[class*="col-"] {
				flex: 0 0 auto;
			}
		CSS;
		
		foreach( $breaks as $key => $val ) {
			$inline .= "@media (min-width:{$val}){";
			$inline .= ".col-{$key}{flex: 1 0 0%}";
			$inline .= "}";
		}

		return <<<CSS
			.wp-block-columns {
				display: flex;
				flex-wrap: wrap;
				align-items: initial!important;
			}
			.wp-block-columns.grid {
				--wp--style--block-gap: var(--wp--custom--gutter);
				display: grid;
			}
			.wp-block-columns.are-vertically-aligned-top {
				align-items: flex-start;
			}
			.wp-block-columns.are-vertically-aligned-center {
				align-items: center;
			}
			.wp-block-columns.are-vertically-aligned-bottom {
				align-items: flex-end;
			}
			.wp-block-column {
				width: 100%;
				flex: 1 0 0%;
				max-width: 100%;
				box-sizing: border-box;
			}
			.wp-block-column.is-vertically-aligned-top {
				align-self: flex-start;
			}
			.wp-block-column.is-vertically-aligned-center {
				align-self: center;
			}
			.wp-block-column.is-vertically-aligned-bottom {
				align-self: flex-end;
			}
			@media (max-width: $mobile) {
				.wp-block-columns.is-stacked-on-mobile {
					flex-direction: column;
				}
			}
			{$inline}
		CSS;
	}
}
