<?php
/**
 * Flex Container shortcode template.
 *
 * @package Total WordPress Theme
 * @subpackage Total Theme Core
 * @version 2.7
 */

defined( 'ABSPATH' ) || exit;

$html           = '';
$flex_direction = ! empty( $atts['flex_direction'] ) ? sanitize_text_field( $atts['flex_direction'] ) : 'row';
$align_items    = ! empty( $atts['align_items'] ) ? sanitize_text_field( $atts['align_items'] ) : '';
$unique_class   = vcex_element_unique_classname( 'vcex-flex-container' );

// Stack breakpoint
if ( ! empty( $atts['row_stack_bp'] ) && in_array( $atts['row_stack_bp'], [ 'xl', 'lg', 'md', 'sm' ], true ) ) {
	$stack_breakpoint    = $atts['row_stack_bp'];
	$stack_breakpoint_px = vcex_get_breakpoint_px( $stack_breakpoint );
} else {
	$stack_breakpoint    = '';
    $stack_breakpoint_px = '';
}

// Get sanitized and parsed inner elements
$inner_html_safe = do_shortcode( wp_kses_post( $content ) );

// Define wrap classes
$wrap_class = [
	'vcex-flex-container',
	'vcex-module',
	'wpex-flex',
];

if ( empty( $atts['el_class'] ) || ! str_contains( (string) $atts['el_class'], '-gap-' ) ) {
	$wrap_class[] = 'wpex-gap-20';
}

if ( ! empty( $atts['width'] ) ) {
	$align = ! empty( $atts['align'] ) ? $atts['align'] : 'center';
	$wrap_class[] = vcex_parse_align_class( $align );
}

if ( vcex_validate_att_boolean( 'flex_wrap', $atts ) ) {
	$wrap_class[] = 'wpex-flex-wrap';
}

if ( vcex_validate_att_boolean( 'flex_grow', $atts ) ) {
	$wrap_class[] = 'vcex-flex-container--items_grow';
}

if ( 'column' === $flex_direction ) {
	$wrap_class[] = 'wpex-flex-col';
} elseif ( $stack_breakpoint ) {
	if ( 'true' == $atts['row_stack_reverse'] ) {
		$wrap_class[] = 'wpex-flex-col-reverse';
	} else {
		$wrap_class[] = 'wpex-flex-col';
	}
	$wrap_class[] = "wpex-{$stack_breakpoint}-flex-row";
}

if ( $stack_breakpoint && ! empty( $atts['row_stack_align_items'] ) ) {
	$row_stack_align_items = $atts['row_stack_align_items'];
	$wrap_class[] = vcex_parse_align_items_class( $row_stack_align_items );
	if ( $row_stack_align_items === $align_items ) {
		$align_items = '';
	} elseif ( ! $align_items && 'stretch' !== $row_stack_align_items ) {
		$wrap_class[] = vcex_parse_align_items_class( 'stretch', $stack_breakpoint );
	}
}

if ( $align_items ) {
	$wrap_class[] = vcex_parse_align_items_class( $atts['align_items'], $stack_breakpoint );
}

if ( ! empty( $atts['justify_content'] ) ) {
	$wrap_class[] = vcex_parse_justify_content_class( $atts['justify_content'], $stack_breakpoint );
}

if ( $extra_classes = vcex_get_shortcode_extra_classes( $atts, 'vcex_grid_container' ) ) {
	$wrap_class = array_merge( $wrap_class, $extra_classes );
}

$style = '';

$parent_style = vcex_inline_style( [
	'gap'          => $atts['gap'] ?? '',
	'max_width'    => $atts['width'] ?? '',
	'background'   => $atts['background_color'] ?? '',
	'border_color' => $atts['border_color'] ?? '',
], false );

// Min-Height: Needs to be added here because of WPBakery bugs we need an important attribute
if ( ! empty( $atts['min_height'] ) ) {
	$min_height_safe = is_numeric( $atts['min_height'] ) ? "{$atts['min_height']}.px" : esc_attr( $atts['min_height']);
	$parent_style .= "min-height:{$min_height_safe}!important;";
}

if ( $parent_style ) {
	$style .= ".{$unique_class}{{$parent_style}}";
}

// Add flex basis CSS
if ( 'row' === $flex_direction && ! empty( $atts['flex_basis'] ) ) {
	$flex_basis = $atts['flex_basis'];
	if ( $stack_breakpoint_px ) {
		$style .= '@media only screen and (min-width: ' . esc_attr( $stack_breakpoint_px ) . ') {';
	}
	if ( is_string( $flex_basis ) && false !== strpos( $flex_basis, ',' ) ) {
		$flex_basis = explode( ',', $flex_basis );
		$count = 0;
		foreach ( $flex_basis as $flex_basis_item ) {
			$count++;
			$flex_basis_item = trim( $flex_basis_item );
			$flex_basis_item_shrink_grow = ''; // reset for each item.
			if ( 'auto' !== $flex_basis_item ) {
				if ( is_numeric( $flex_basis_item ) && 0 !== $flex_basis_item ) {
					$flex_basis_item = $flex_basis_item . 'px';
				}
				$flex_basis_item_shrink_grow = 'flex-grow:0;flex-shrink:1;'; // must allow shrink to prevent issues on smaller devices when flex_wrap is enabled
			}
			$style .= '.' . $unique_class . ' > *:nth-child(' . $count . ') {flex-basis:' . esc_attr( $flex_basis_item ) . ';' . $flex_basis_item_shrink_grow . '}';
		}

	} else {
		if ( 'auto' === $flex_basis ) {
			$style .= '.' . $unique_class . ' > * {flex-basis:' . esc_attr( $flex_basis ) . ';}';
		} else {
			$style .= '.' . $unique_class . ' > * {flex-basis:' . esc_attr( $flex_basis ) . ';flex-grow:0;flex-shrink:1;}';
		}
	}

	if ( $stack_breakpoint_px ) {
		$style .= '}';
	}

}

// Scacked CSS
if ( $stack_breakpoint_px ) {
	$stack_breakpoint_max_px = absint( $stack_breakpoint_px ) - 1 . 'px'; // remove 1px from breakpoint since we use max-width
	$stack_css = vcex_inline_style( [
		'gap' => $atts['row_stack_gap'] ?? null,
	], false );
	if ( $stack_css ) {
		$stack_css = ".{$unique_class}{{$stack_css}}";
		$style .= "@media only screen and (max-width: {$stack_breakpoint_max_px}) {{$stack_css}}";
	}
}

// Get and combine inner styles to prevent issues with :nth-child() selectors
if ( $inner_html_safe && ! vcex_vc_is_inline() && str_contains( $inner_html_safe, '<style' ) ) {
	preg_match_all('#<style\b[^>]*>(.*?)</style>#is', $inner_html_safe, $style_matches );
	if ( ! empty( $style_matches ) && ! empty( $style_matches[0] ) ) {
		$inner_html_safe = preg_replace('#<style\b[^>]*>(.*?)</style>#is', '', $inner_html_safe);
		$style .= implode( '', array_map( 'trim', $style_matches[1] ) );
	}
}

if ( $style ) {
	$wrap_class[] = $unique_class;
	$html .= "<style>{$style}</style>";
}

$wrap_class = vcex_parse_shortcode_classes( $wrap_class, 'vcex_flex_container', $atts );

$html .= '<div class="' . esc_attr( $wrap_class ) . '"' . vcex_get_unique_id( $atts['unique_id'] ) . '>';
	if ( $inner_html_safe ) {
		$html .= $inner_html_safe;
	}
$html .= '</div>';

echo $html; // @codingStandardsIgnoreLine