<?php
use EVPB\Tools\AdvancedTab;
use EVPB\Tools\Helper;
use EVPB\Tools\ToCSS;

$innerBlocks = $content;

if( !function_exists( 'evbContainerWidthVal' ) ) {
	function evbContainerWidthVal( $content, $device ) {
		extract( $content ?? [] );

		return $isFullWidth || 0 === intval( $width[$device] ) ? '100%' : $width[$device];
	}
}
if( !function_exists( 'evbContainerContentCSS' ) ) {
	function evbContainerContentCSS( $attributes, $device ) {
		extract( $attributes ?? [] );
		extract( $content ?? [] );
		extract( $items ?? [] );

		return 'max-width:' . evbContainerWidthVal( $content, $device ) . ';' .
		ToCSS::hasCSS( 'height', $height[$device] ? ToCSS::autoOrVal( $height[$device] ) : '' ) .
		ToCSS::hasCSS( 'align-self', $alignment['vertical'][$device] ) .
		ToCSS::hasCSS( 'justify-self', $alignment['horizontal'][$device] ) .
		ToCSS::hasCSS( 'flex-direction', $direction[$device] ) .
		ToCSS::hasCSS( 'justify-content', $justify[$device] ) .
		ToCSS::hasCSS( 'align-items', $align[$device] ) .
		ToCSS::hasCSS( 'flex-wrap', $wrap[$device] ) .
		ToCSS::hasCSS( 'column-gap', $columnGap[$device] ) .
		ToCSS::hasCSS( 'row-gap', $rowGap[$device] );
	}
}

if( !function_exists( 'evbContainerStyle' ) ) {
	function evbContainerStyle( $attributes, $id ) {
		$prefix = 'evbContainer';
		extract( $attributes ?? [] );

		// Selectors
		$mainSl = "#$id >.$prefix";
		$contentSl = "$mainSl >.$prefix" . 'Content';

		$styles = "
			$contentSl {
				". evbContainerContentCSS( $attributes, 'desktop' ) ."
			}

			". Helper::TAB_BREAKPOINT ." {
				$contentSl {
					". evbContainerContentCSS( $attributes, 'tablet' ) ."
				}
			}
			". Helper::MOB_BREAKPOINT ." {
				$contentSl {
					". evbContainerContentCSS( $attributes, 'mobile' ) ."
				}
			}
		";

		return $styles;
	}
}

$prefix = 'evbContainer';
$id = wp_unique_id( "$prefix-" );
extract( $attributes ?? [] );

$evbContainerCSS = AdvancedTab::generateCSS( "#$id", "#$id >.$prefix", $advanced ) . evbContainerStyle( $attributes, $id );
if ( ! empty( trim( $evbContainerCSS ) ) ) {
	wp_add_inline_style( 'evb-container-style', $evbContainerCSS );
}

if( isset( $advanced['animation']['type'] ) && !empty( $advanced['animation']['type'] ) ) {
	wp_enqueue_style( 'aos' );
	wp_enqueue_script( 'aos' );
}

$tag = $advanced['layout']['tag'] ?? $attributes['tag'] ?? 'div';
?>
<<?php echo esc_attr( $tag ); ?>
	<?php echo wp_kses_data( get_block_wrapper_attributes() ); ?>
	id='<?php echo esc_attr( $id ); ?>'
	<?php echo wp_kses_data( AdvancedTab::animationProps( $advanced['animation'] ?? null ) ); ?>
>
	<div <?php echo AdvancedTab::getAdvancedAttributes( $advanced['attributes'] ?? [], [ 'class' => $prefix ] ); ?>>
		<div class='evbShape top' data-shape='<?php echo esc_attr( wp_json_encode( $shape['top'] ) ); ?>'></div>

		<div class='<?php echo esc_attr( $prefix ); ?>Content'>
			<?php echo Helper::allowGetterThenForCSS( wp_kses( $innerBlocks, Helper::allowedHTML() ) ); ?>
		</div>

		<div class='evbShape bottom' data-shape='<?php echo esc_attr( wp_json_encode( $shape['bottom'] ) ); ?>'></div>
	</div>
</<?php echo esc_attr( $tag ); ?>>