<?php

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

$client_id = ! empty( $attributes['clientId'] ) ? str_replace( array( ';', '=', '(', ')', ' ' ), '', wp_strip_all_tags( $attributes['clientId'] ) ) : '';
$block_id  = 'vidplex_' . str_replace( '-', '_', esc_attr( $client_id ) );

$attributes['isPremium'] = vidplex_premium_access();

$video_styles = array(
	'width'  => array(
		'desktop' => isset( $attributes['videoStyles']['width']['desktop'] ) ? esc_attr( $attributes['videoStyles']['width']['desktop'] ) : '',
		'tablet'  => isset( $attributes['videoStyles']['width']['tablet'] ) ? esc_attr( $attributes['videoStyles']['width']['tablet'] ) : '',
		'mobile'  => isset( $attributes['videoStyles']['width']['mobile'] ) ? esc_attr( $attributes['videoStyles']['width']['mobile'] ) : '',
	),
	'height' => array(
		'desktop' => isset( $attributes['videoStyles']['height']['desktop'] ) ? esc_attr( $attributes['videoStyles']['height']['desktop'] ) : '',
		'tablet'  => isset( $attributes['videoStyles']['height']['tablet'] ) ? esc_attr( $attributes['videoStyles']['height']['tablet'] ) : '',
		'mobile'  => isset( $attributes['videoStyles']['height']['mobile'] ) ? esc_attr( $attributes['videoStyles']['height']['mobile'] ) : '',
	),
);

$carousel = array(
	'bullet' => array(
		'align'                 => isset( $attributes['carousel']['bullet']['align'] ) ? esc_attr( $attributes['carousel']['bullet']['align'] ) : 'center',
		'gap'                   => isset( $attributes['carousel']['bullet']['gap'] ) ? esc_attr( $attributes['carousel']['bullet']['gap'] ) : '',
		'top'                   => array(
			'desktop' => isset( $attributes['carousel']['bullet']['top']['desktop'] ) ? esc_attr( $attributes['carousel']['bullet']['top']['desktop'] ) : '',
			'tablet'  => isset( $attributes['carousel']['bullet']['top']['tablet'] ) ? esc_attr( $attributes['carousel']['bullet']['top']['tablet'] ) : '',
			'mobile'  => isset( $attributes['carousel']['bullet']['top']['mobile'] ) ? esc_attr( $attributes['carousel']['bullet']['top']['mobile'] ) : '',
		),
		'left'                  => array(
			'desktop' => isset( $attributes['carousel']['bullet']['left']['desktop'] ) ? esc_attr( $attributes['carousel']['bullet']['left']['desktop'] ) : '',
			'tablet'  => isset( $attributes['carousel']['bullet']['left']['tablet'] ) ? esc_attr( $attributes['carousel']['bullet']['left']['tablet'] ) : '',
			'mobile'  => isset( $attributes['carousel']['bullet']['left']['mobile'] ) ? esc_attr( $attributes['carousel']['bullet']['left']['mobile'] ) : '',
		),
		'right'                 => array(
			'desktop' => isset( $attributes['carousel']['bullet']['right']['desktop'] ) ? esc_attr( $attributes['carousel']['bullet']['right']['desktop'] ) : '',
			'tablet'  => isset( $attributes['carousel']['bullet']['right']['tablet'] ) ? esc_attr( $attributes['carousel']['bullet']['right']['tablet'] ) : '',
			'mobile'  => isset( $attributes['carousel']['bullet']['right']['mobile'] ) ? esc_attr( $attributes['carousel']['bullet']['right']['mobile'] ) : '',
		),
		'width'                 => isset( $attributes['carousel']['bullet']['width'] ) ? esc_attr( $attributes['carousel']['bullet']['width'] ) : '',
		'height'                => isset( $attributes['carousel']['bullet']['height'] ) ? esc_attr( $attributes['carousel']['bullet']['height'] ) : '',
		'radius'                => isset( $attributes['carousel']['bullet']['radius'] ) ? esc_attr( $attributes['carousel']['bullet']['radius'] ) : '',
		'active_width'          => isset( $attributes['carousel']['bullet']['activeWidth'] ) ? esc_attr( $attributes['carousel']['bullet']['activeWidth'] ) : '',
		'active_height'         => isset( $attributes['carousel']['bullet']['activeHeight'] ) ? esc_attr( $attributes['carousel']['bullet']['activeHeight'] ) : '',
		'active_radius'         => isset( $attributes['carousel']['bullet']['activeRadius'] ) ? esc_attr( $attributes['carousel']['bullet']['activeRadius'] ) : '',
		'active_outline'        => isset( $attributes['carousel']['bullet']['activeHeight'] ) ? esc_attr( vidplex_render_trbl( 'outline', $attributes['carousel']['bullet']['activeBorder'] ) ) : '',
		'active_outline_offset' => isset( $attributes['carousel']['bullet']['activeBorderOffset'] ) ? esc_attr( $attributes['carousel']['bullet']['activeBorderOffset'] ) : '',
	),
	'nav'    => array(
		'size'       => isset( $attributes['carousel']['nav']['size'] ) ? esc_attr( $attributes['carousel']['nav']['size'] ) : '',
		'box_width'  => isset( $attributes['carousel']['nav']['boxWidth'] ) ? esc_attr( $attributes['carousel']['nav']['boxWidth'] ) : '',
		'box_height' => isset( $attributes['carousel']['nav']['boxHeight'] ) ? esc_attr( $attributes['carousel']['nav']['boxHeight'] ) : '',
		'border'     => isset( $attributes['carousel']['nav']['border'] ) ? esc_attr( vidplex_render_trbl( 'border', $attributes['carousel']['nav']['border'] ) ) : '',
		'radius'     => isset( $attributes['carousel']['nav']['radius'] ) ? esc_attr( $attributes['carousel']['nav']['radius'] ) : '',
	),
	'color'  => array(
		'nav'              => isset( $attributes['carousel']['color']['nav'] ) ? esc_attr( $attributes['carousel']['color']['nav'] ) : '',
		'nav_hover'        => isset( $attributes['carousel']['color']['navHover'] ) ? esc_attr( $attributes['carousel']['color']['navHover'] ) : '',
		'nav_bg'           => isset( $attributes['carousel']['color']['navBg'] ) ? esc_attr( $attributes['carousel']['color']['navBg'] ) : '',
		'nav_bg_hover'     => isset( $attributes['carousel']['color']['navBgHover'] ) ? esc_attr( $attributes['carousel']['color']['navBgHover'] ) : '',
		'nav_border_hover' => isset( $attributes['carousel']['color']['navBorderHover'] ) ? esc_attr( $attributes['carousel']['color']['navBorderHover'] ) : '',
		'bullet'           => isset( $attributes['carousel']['color']['bullet'] ) ? esc_attr( $attributes['carousel']['color']['bullet'] ) : '',
		'bullet_hover'     => isset( $attributes['carousel']['color']['bulletHover'] ) ? esc_attr( $attributes['carousel']['color']['bulletHover'] ) : '',
		'bullet_active'    => isset( $attributes['carousel']['color']['bulletActive'] ) ? esc_attr( $attributes['carousel']['color']['bulletActive'] ) : '',
	),
);

$styles = array(
	'padding' => array(
		'desktop' => isset( $attributes['styles']['padding']['desktop'] ) ? esc_attr( vidplex_render_trbl( 'padding', $attributes['styles']['padding']['desktop'] ) ) : '',
		'tablet'  => isset( $attributes['styles']['padding']['tablet'] ) ? esc_attr( vidplex_render_trbl( 'padding', $attributes['styles']['padding']['tablet'] ) ) : '',
		'mobile'  => isset( $attributes['styles']['padding']['mobile'] ) ? esc_attr( vidplex_render_trbl( 'padding', $attributes['styles']['padding']['mobile'] ) ) : '',
	),
	'width'   => array(
		'desktop' => isset( $attributes['styles']['width']['desktop'] ) ? esc_attr( $attributes['styles']['width']['desktop'] ) : '',
		'tablet'  => isset( $attributes['styles']['width']['tablet'] ) ? esc_attr( $attributes['styles']['width']['tablet'] ) : '',
		'mobile'  => isset( $attributes['styles']['width']['mobile'] ) ? esc_attr( $attributes['styles']['width']['mobile'] ) : '',
	),
	'height'  => array(
		'desktop' => isset( $attributes['styles']['height']['desktop'] ) ? esc_attr( $attributes['styles']['height']['desktop'] ) : '',
		'tablet'  => isset( $attributes['styles']['height']['tablet'] ) ? esc_attr( $attributes['styles']['height']['tablet'] ) : '',
		'mobile'  => isset( $attributes['styles']['height']['mobile'] ) ? esc_attr( $attributes['styles']['height']['mobile'] ) : '',
	),
	'border'  => isset( $attributes['styles']['border'] ) ? esc_attr( vidplex_render_trbl( 'border', $attributes['styles']['border'] ) ) : '',
	'radius'  => isset( $attributes['styles']['radius'] ) ? esc_attr( $attributes['styles']['radius'] ) : '',
);

$sticky_styles = array(
	'padding' => array(
		'desktop' => isset( $attributes['stickyStyles']['padding']['desktop'] ) ? esc_attr( vidplex_render_trbl( 'padding', $attributes['stickyStyles']['padding']['desktop'] ) ) : '',
		'tablet'  => isset( $attributes['stickyStyles']['padding']['tablet'] ) ? esc_attr( vidplex_render_trbl( 'padding', $attributes['stickyStyles']['padding']['tablet'] ) ) : '',
		'mobile'  => isset( $attributes['stickyStyles']['padding']['mobile'] ) ? esc_attr( vidplex_render_trbl( 'padding', $attributes['stickyStyles']['padding']['mobile'] ) ) : '',
	),
	'margin'  => array(
		'desktop' => isset( $attributes['stickyStyles']['margin']['desktop'] ) ? esc_attr( vidplex_render_trbl( 'margin', $attributes['stickyStyles']['margin']['desktop'] ) ) : '',
		'tablet'  => isset( $attributes['stickyStyles']['margin']['tablet'] ) ? esc_attr( vidplex_render_trbl( 'margin', $attributes['stickyStyles']['margin']['tablet'] ) ) : '',
		'mobile'  => isset( $attributes['stickyStyles']['margin']['mobile'] ) ? esc_attr( vidplex_render_trbl( 'margin', $attributes['stickyStyles']['margin']['mobile'] ) ) : '',
	),
	'width'   => array(
		'desktop' => isset( $attributes['stickyStyles']['width']['desktop'] ) ? esc_attr( $attributes['stickyStyles']['width']['desktop'] ) : '',
		'tablet'  => isset( $attributes['stickyStyles']['width']['tablet'] ) ? esc_attr( $attributes['stickyStyles']['width']['tablet'] ) : '',
		'mobile'  => isset( $attributes['stickyStyles']['width']['mobile'] ) ? esc_attr( $attributes['stickyStyles']['width']['mobile'] ) : '',
	),
	'height'  => array(
		'desktop' => isset( $attributes['stickyStyles']['height']['desktop'] ) ? esc_attr( $attributes['stickyStyles']['height']['desktop'] ) : '',
		'tablet'  => isset( $attributes['stickyStyles']['height']['tablet'] ) ? esc_attr( $attributes['stickyStyles']['height']['tablet'] ) : '',
		'mobile'  => isset( $attributes['stickyStyles']['height']['mobile'] ) ? esc_attr( $attributes['stickyStyles']['height']['mobile'] ) : '',
	),
	'border'  => isset( $attributes['stickyStyles']['border'] ) ? esc_attr( vidplex_render_trbl( 'border', $attributes['stickyStyles']['border'] ) ) : '',
	'radius'  => isset( $attributes['stickyStyles']['radius'] ) ? esc_attr( $attributes['stickyStyles']['radius'] ) : '',
);

$close_icon = array(
	'size'   => isset( $attributes['closeIcon']['size'] ) ? esc_attr( $attributes['closeIcon']['size'] ) : '',
	'width'  => isset( $attributes['closeIcon']['boxWidth'] ) ? esc_attr( $attributes['closeIcon']['boxWidth'] ) : '',
	'height' => isset( $attributes['closeIcon']['boxHeight'] ) ? esc_attr( $attributes['closeIcon']['boxHeight'] ) : '',
	'border' => isset( $attributes['closeIcon']['border'] ) ? esc_attr( vidplex_render_trbl( 'border', $attributes['closeIcon']['border'] ) ) : '',
	'radius' => isset( $attributes['closeIcon']['radius'] ) ? esc_attr( $attributes['closeIcon']['radius'] ) : '',
	'top'    => isset( $attributes['closeIcon']['top'] ) ? esc_attr( $attributes['closeIcon']['top'] ) : '',
	'left'   => isset( $attributes['closeIcon']['left'] ) ? esc_attr( $attributes['closeIcon']['left'] ) : '',
	'right'  => isset( $attributes['closeIcon']['right'] ) ? esc_attr( $attributes['closeIcon']['right'] ) : '',
	'color'  => array(
		'icon'     => isset( $attributes['closeIcon']['color']['icon'] ) ? esc_attr( $attributes['closeIcon']['color']['icon'] ) : '',
		'icon_h'   => isset( $attributes['closeIcon']['color']['iconHover'] ) ? esc_attr( $attributes['closeIcon']['color']['iconHover'] ) : '',
		'bg'       => isset( $attributes['closeIcon']['color']['bg'] ) ? esc_attr( $attributes['closeIcon']['color']['bg'] ) : '',
		'bg_h'     => isset( $attributes['closeIcon']['color']['bgHover'] ) ? esc_attr( $attributes['closeIcon']['color']['bgHover'] ) : '',
		'border_h' => isset( $attributes['closeIcon']['color']['borderHover'] ) ? esc_attr( $attributes['closeIcon']['color']['borderHover'] ) : '',
	),
);

$block_styles = "
#$block_id .vidplex-background-video-item {
	width: {$video_styles['width']['desktop']};
	height: {$video_styles['height']['desktop']};
}

@media only screen and (max-width: 1025px) {
	#$block_id .vidplex-background-video-item {
		width: {$video_styles['width']['tablet']};
		height: {$video_styles['height']['tablet']};
	}
}
@media only screen and (max-width: 570px) {
	#$block_id .vidplex-background-video-item {
		width: {$video_styles['width']['mobile']};
		height: {$video_styles['height']['mobile']};
	}
}

#$block_id .swiper-button-prev::after,
#$block_id .swiper-button-next::after {
    font-size: {$carousel['nav']['size']};
}
#$block_id .swiper-button-prev,
#$block_id .swiper-button-next {
    width: {$carousel['nav']['box_width']};
    height: {$carousel['nav']['box_height']};
    {$carousel['nav']['border']}
    border-radius: {$carousel['nav']['radius']};
    color: {$carousel['color']['nav']};
    background-color: {$carousel['color']['nav_bg']};
}
#$block_id .swiper-button-prev:hover,
#$block_id .swiper-button-next:hover {
    color: {$carousel['color']['nav_hover']};
    background-color: {$carousel['color']['nav_bg_hover']};
    border-color: {$carousel['color']['nav_border_hover']};
}
#$block_id .swiper-pagination {
	bottom: {$carousel['bullet']['top']['desktop']};
	text-align: {$carousel['bullet']['align']};
}
#$block_id .swiper-pagination .swiper-pagination-bullet {
	width: {$carousel['bullet']['width']};
	height: {$carousel['bullet']['height']};
	border-radius: {$carousel['bullet']['radius']};
	background-color: {$carousel['color']['bullet']};
}
#$block_id .swiper-horizontal .swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 0 var(--swiper-pagination-bullet-horizontal-gap, {$carousel['bullet']['gap']});
}
#$block_id .swiper-pagination .swiper-pagination-bullet-active {
	width: {$carousel['bullet']['active_width']};
	height: {$carousel['bullet']['active_height']};
	{$carousel['bullet']['active_outline']}
	outline-offset: {$carousel['bullet']['active_outline_offset']};
	border-radius: {$carousel['bullet']['active_radius']};
	background-color: {$carousel['color']['bullet_active']};
}
#$block_id .swiper-pagination .swiper-pagination-bullet:hover {
	background-color: {$carousel['color']['bullet_hover']};
}

#$block_id.mode-default {
    height: {$styles['height']['desktop']};
}
#$block_id .iframe__wrapper {
    {$styles['padding']['desktop']}
    width: {$styles['width']['desktop']};
    height: {$styles['height']['desktop']};
    {$styles['border']}
    border-radius: {$styles['radius']};
}

#$block_id .sticky-iframe__wrapper {
    {$sticky_styles['padding']['desktop']}
    {$sticky_styles['margin']['desktop']}
    width: {$sticky_styles['width']['desktop']};
    height: {$sticky_styles['height']['desktop']};
    {$sticky_styles['border']}
    border-radius: {$sticky_styles['radius']};
}
@media only screen and (max-width: 1025px) {
    #$block_id.mode-default {
        height: {$styles['height']['tablet']};
    }
    #$block_id .iframe__wrapper {
        {$styles['padding']['tablet']}
        width: {$styles['width']['tablet']};
        height: {$styles['height']['tablet']};
    }

    #$block_id .sticky-iframe__wrapper {
        {$sticky_styles['padding']['tablet']}
        {$sticky_styles['margin']['tablet']}
        width: {$sticky_styles['width']['tablet']};
        height: {$sticky_styles['height']['tablet']};
    }
}
@media only screen and (max-width: 570px) {
    #$block_id.mode-default {
        height: {$styles['height']['mobile']};
    }
    #$block_id .iframe__wrapper {
        {$styles['padding']['mobile']}
        width: {$styles['width']['mobile']};
        height: {$styles['height']['mobile']};
    }

    #$block_id .sticky-iframe__wrapper {
        {$sticky_styles['padding']['mobile']}
        {$sticky_styles['margin']['mobile']}
        width: {$sticky_styles['width']['mobile']};
        height: {$sticky_styles['height']['mobile']};
    }
}

#$block_id .sticky-iframe__wrapper .close__icon {
    width: {$close_icon['width']};
    height: {$close_icon['height']};
    {$close_icon['border']}
    border-radius: {$close_icon['radius']};
    background-color: {$close_icon['color']['bg']};
    color: {$close_icon['color']['icon']};
    margin-top: {$close_icon['top']};

    & svg {
        width: {$close_icon['size']};
        height: {$close_icon['size']};
    }

    &:hover {
        background-color: {$close_icon['color']['bg_h']};
        color: {$close_icon['color']['icon_h']};
        border-color: {$close_icon['color']['border_h']};
    }

    &.position-left {
        margin-left: {$close_icon['left']};
    }
    &.position-right {
        margin-right: {$close_icon['right']};
    }
}
";

add_action(
	'wp_enqueue_scripts',
	function () use ( $block_styles ) {
		wp_add_inline_style( 'vidplex-block-styles', vidplex_clean_empty_css( $block_styles ) );
	}
);

wp_localize_script( 'vidplex--featured-video--frontend-script', $block_id, $attributes );
wp_add_inline_script( 'vidplex--featured-video--frontend-script', 'document.addEventListener("DOMContentLoaded", function(event) { window.vidplexFeaturedVideo( "' . $block_id . '" ) }) ' );

$wrapper_attributes = get_block_wrapper_attributes();

$classes   = array();
$classes[] = 'vidplex-block-wrapper';
$classes[] = 'default' === $attributes['type'] ? 'sticky-video-wrapper' : '';
?>

<div class="<?php echo esc_attr( implode( ' ', array_map( 'sanitize_html_class', array_values( $classes ) ) ) ); ?>">
	<div <?php echo $wrapper_attributes; ?>>
		<?php
		if ( 'default' === $attributes['type'] ) {
			$classes   = array();
			$classes[] = 'vidplex-block';
			$classes[] = 'vidplex-sticky-video';
			$classes[] = vidplex_premium_access() && 'default' === $attributes['mode'] ? 'mode-default' : 'mode-always';
			?>
			<div id="<?php echo $block_id; ?>" class="<?php echo esc_attr( implode( ' ', array_map( 'sanitize_html_class', array_values( $classes ) ) ) ); ?>">
				<?php
				$classes   = array();
				$classes[] = 'iframe__holder';
				$classes[] = vidplex_premium_access() && 'default' === $attributes['mode'] ? 'iframe__wrapper' : 'sticky-iframe__wrapper';
				$classes[] = 'placement-' . str_replace( ' ', '-', $attributes['stickyStyles']['placement'] );
				?>
				<section class="<?php echo esc_attr( implode( ' ', array_map( 'sanitize_html_class', array_values( $classes ) ) ) ); ?>">
					<div></div>

					<?php
					$classes   = array();
					$classes[] = 'close__icon';
					$classes[] = 'position-' . $attributes['closeIcon']['position'];
					$classes[] = vidplex_premium_access() && 'default' === $attributes['mode'] ? 'display__none' : '';
					?>
					<div class="<?php echo esc_attr( implode( ' ', array_map( 'sanitize_html_class', array_values( $classes ) ) ) ); ?>">
						<svg
							width="16"
							height="16"
							viewBox="0 0 12 12"
							fill="currentColor"
							xmlns="http://www.w3.org/2000/svg">
							<path d="M10.9449 9.66003C11.3049 10.02 11.3049 10.58 10.9449 10.94C10.7649 11.12 10.5449 11.2 10.3049 11.2C10.0649 11.2 9.84493 11.12 9.66493 10.94L6.00492 7.28004L2.34491 10.94C2.16491 11.12 1.94492 11.2 1.70492 11.2C1.46492 11.2 1.24493 11.12 1.06493 10.94C0.704932 10.58 0.704932 10.02 1.06493 9.66003L4.72492 6.00004L1.06493 2.34004C0.704932 1.98004 0.704932 1.42004 1.06493 1.06004C1.42493 0.700037 1.98491 0.700037 2.34491 1.06004L6.00492 4.72003L9.66493 1.06004C10.0249 0.700037 10.5849 0.700037 10.9449 1.06004C11.3049 1.42004 11.3049 1.98004 10.9449 2.34004L7.2849 6.00004L10.9449 9.66003Z" />
						</svg>
					</div>
				</section>
			</div>
			<?php
		} elseif ( 'bg' === $attributes['type'] ) {
			$classes   = array();
			$classes[] = 'vidplex-block';
			$classes[] = 'vidplex-background-video';
			$classes[] = 'placement-' . str_replace( ' ', '-', $attributes['blockPlacement'] );
			$classes[] = 'slider' === $attributes['layout'] && isset( $attributes['carousel']['nav']['enabled'], $attributes['carousel']['nav']['showOnHover'] ) && $attributes['carousel']['nav']['enabled'] && $attributes['carousel']['nav']['showOnHover'] ? 'nav-hover-show' : '';
			$classes[] = 'slider' === $attributes['layout'] && ! vidplex_premium_access() ? 'single-video-mode' : '';
			?>
			<div class="<?php echo esc_attr( implode( ' ', array_map( 'sanitize_html_class', array_values( $classes ) ) ) ); ?>" id="<?php echo $block_id; ?>">
				<?php
				if ( vidplex_premium_access() && 'slider' === $attributes['layout'] ) {
					?>
					<div class="swiper-container">
						<div class="swiper-wrapper">
							<?php echo $content; ?>
						</div>
					</div>
					<?php
					if ( isset( $attributes['carousel']['bullet']['enabled'] ) && filter_var( $attributes['carousel']['bullet']['enabled'], FILTER_VALIDATE_BOOLEAN ) ) {
						?>
						<div class="swiper-pagination"></div>
						<?php
					}

					if ( isset( $attributes['carousel']['nav']['enabled'] ) && filter_var( $attributes['carousel']['nav']['enabled'], FILTER_VALIDATE_BOOLEAN ) ) {
						?>
						<div class="swiper-button-prev"></div>
						<div class="swiper-button-next"></div>
						<?php
					}
					?>
					<?php
				} else {
					echo $content;
				}
				?>
			</div>
			<?php
		}
		?>
	</div>
</div>