<?php

if (!function_exists('flo_slider_block_render_frontend_block')) {
	function flo_slider_block_render_frontend_block($atts = [])
	{
		extract($atts);

		// Theme Content Width
		$srcset_sizes = '';
		if (isset($themeContentWidth) && trim($themeContentWidth) != '') {
			$srcset_sizes =
				'sizes="(min-width: ' .
				$themeContentWidth .
				') ' .
				$themeContentWidth .
				', 100vw"';
		}

		if (!isset($isFullScreenHeight)) {
			$isFullScreenHeight = FALSE;
		}

		// flo-slideshow -  is the class that differentiate the SLider block from the gallery bock
		$myclass =
			'flo-slick-slider-block-slider slick-slider-block-slider flo-hidden ';
		$myclass .= ' ' . $sliderType;
		$myclass .= ' ' . $contentPosition;

		if ($isFullScreenHeight && 'singleitem' == $sliderType) {
			$myclass .= ' full-screen-height ';
		}

		//for smaller slider, we will use a special class to position the Play Video btn if it exists
		if (
			!$isFullScreenHeight &&
			'singleitem' == $sliderType &&
			$sliderHeight < 650
		) {
			$myclass .= ' slider-sh '; // slider small height
		}

		$mob_height_class = '';
		if ($isFullScreenHeightMobile && 'singleitem' == $sliderType) {
			$myclass .= ' full-screen-height-mobile ';
			$mob_height_class = ' full-screen-height-mobile ';
		}

		$maybeCustomTypographyTitleClass =
			$titleTypography['type'] !== 'theme' ? 'custom-typography' : '';
		$maybeCustomTypographyDescriptionClass =
			$descriptionTypography['type'] !== 'theme' ? 'custom-typography' : '';

		$slideroptions = [
			'data-slider-type' => isset($sliderType) ? $sliderType : 'singleitem',
			'data-slick-arrows' => isset($arrows) ? $arrows : TRUE,
			'data-slick-dots' => FALSE,
			'data-slick-adaptiveHeight' =>
			isset($adaptiveHeight) && $adaptiveHeight ? $adaptiveHeight : TRUE,
			'data-slick-autoplay' => isset($autoplay) ? $autoplay : FALSE,
			'data-slick-autoplaySpeed' =>
			isset($autoplay) && $autoplay
				? ($autoplaySpeed
					? $autoplaySpeed
					: 4000)
				: 0,
			'data-slick-centerMode' => isset($centerMode) ? $centerMode : FALSE,
			'data-slick-centerPadding' => isset($centerPadding) ? $centerPadding : 0,
			'data-slick-cssEase' => isset($cssEase) ? $cssEase : 'ease',
			'data-slick-draggable' => isset($draggable) ? $draggable : TRUE,
			'data-slick-fade' => isset($fade) ? $fade : 'false',
			'data-slick-focusOnSelect' => FALSE,
			'data-slick-easing' => 'linear',
			'data-slick-infinite' => isset($infinite) ? $infinite : TRUE,
			'data-slick-initialSlide' => isset($initialSlide) ? $initialSlide : 0,
			'data-slick-pauseOnFocus' => isset($pauseOnFocus) ? $pauseOnFocus : TRUE,
			'data-slick-pauseOnHover' => isset($pauseOnHover) ? $pauseOnHover : TRUE,
			'data-slick-slidesToShow' => isset($slidesToShow) ? $slidesToShow : 1,
			'data-slick-slidesToScroll' => 1,
			'data-slick-speed' => isset($speed) ? $speed : 800,
			'data-slick-swipe' => isset($swipe) ? $swipe : TRUE,
			'data-slick-swipeToSlide' => isset($swipeToSlide) ? $swipeToSlide : FALSE,
			'data-slick-touchMove' => isset($touchMove) ? $touchMove : TRUE,
			'data-slick-touchThreshold' => isset($touchThreshold)
				? $touchThreshold
				: 5,
			'data-slick-useCSS' => isset($useCSS) ? $useCSS : TRUE,
			'data-slick-useTransform' => isset($useTransform) ? $useTransform : TRUE,
			'data-slick-variableWidth' => isset($variableWidth)
				? $variableWidth
				: FALSE,
			'data-slick-vertical' => isset($vertical) ? $vertical : FALSE,
			'data-slick-verticalSwiping' => isset($verticalSwiping)
				? $verticalSwiping
				: FALSE,
			'data-slick-lazyLoad' => 'ondemand',
		];

		$slideroptions = apply_filters(
			'flo_slick_slideshow_slideroptions',
			$slideroptions,
			$atts
		);

		$return = '';

		if (count($slides)) {
			$styles_vars = '';

			$styles_vars .= '--slider-height: ' . $sliderHeight . 'px; ';
			$styles_vars .= '--slider-height-mobile: ' . $sliderHeightMobile . 'px; ';

			if ('multiple_items' == $sliderType) {
				if (!isset($sliderHeight) || !is_numeric($sliderHeight)) {
					$sliderHeight = 300;
				}

				$styles_vars .= '--items-gap: ' . $itemsGap / 2 . 'px; ';
			}
			$styles_vars .=
				' --top-margin:' .
				Flo_Guten_Blocks_Helper::get_em_by_value($topMargin) .
				';';
			$styles_vars .=
				' --bottom-margin:' .
				Flo_Guten_Blocks_Helper::get_em_by_value($bottomMargin) .
				';';
			$styles_vars .=
				' --mobile-top-margin:' .
				Flo_Guten_Blocks_Helper::get_em_by_value($mobileTopMargin) .
				';';
			$styles_vars .=
				' --mobile-bottom-margin:' .
				Flo_Guten_Blocks_Helper::get_em_by_value($mobileBottomMargin) .
				';';

			$return .=
				'<div class="' .
				$className .
				' flo-block ' .
				Flo_Guten_Blocks_Helper::get_additional_class($atts) .
				' flo-slick-slide-container' .
				(isset($align) ? ' align' . $align : '') .
				(isset($class) ? ' ' . $class : '') .
				'" ';

			$return .= 'style="' . $styles_vars . '"';
			$return .= !empty($anchor) ? 'id="' . $anchor . '"' : '';
			$return .= '>';
			$return .=
				'<div class="' .
				$myclass .
				'" data-content-position="' .
				$contentPosition .
				'"  style="--arrows-color: ' .
				Flo_Guten_Blocks_Helper::get_style_color($miArrowsColor) .
				'" ';
			foreach ($slideroptions as $key => $value) {
				$return .= ' ' . $key . '="' . flo_string_if_bool($value) . '"';
			}
			$return .= ' data-slider_id="' . mt_rand(0, 10000) . '">';

			$title_styles = Flo_Guten_Blocks_Helper::get_style_for_typography(
				'slide-title',
				$titleTypography
			);

			$title_tag = !empty($titleTagName) ? $titleTagName : 'h3';

			$title_theme_data_font =
				$titleTypography['type'] == 'theme' ? $titleTypography['theme'] : '';

			$description_styles = Flo_Guten_Blocks_Helper::get_style_for_typography(
				'slide-description',
				$descriptionTypography
			);
			$description_theme_data_font =
				$descriptionTypography['type'] == 'theme'
				? $descriptionTypography['theme']
				: '';

			Flo_Guten_Blocks_Helper::load_google_fonts([
				$titleTypography,
				$descriptionTypography,
			]);

			$lazy_load_img_class = 'lazyload';
			if ($fade || $sliderType === 'singleitem') {
				// for the fade we use a custom class
				$lazy_load_img_class = 'lazypreload';
			}

			foreach ($slides as $i => $slide) {
				//var_dump($slide);

				// initially we use the global color
				$current_slide_text_color = Flo_Guten_Blocks_Helper::get_style_color(
					$blockElementsColor
				);

				if (
					isset($slide['elementsColor']) &&
					($slide['elementsColor']['custom'] !== '' ||
						$slide['elementsColor']['theme'] !== '')
				) {
					$current_slide_text_color = Flo_Guten_Blocks_Helper::get_style_color(
						$slide['elementsColor']
					);
				}

				if (!isset($slide['elementsColor'])) {
					$slide['elementsColor'] = ['custom' => 'inherit'];
				}

				$slide_video_embed = '';
				if (
					isset($slide['addVideo']) &&
					$slide['addVideo'] &&
					isset($slide['videoEmbed']) &&
					strlen(trim($slide['videoEmbed']))
				) {
					$slide_video_embed =
						'<a class="flo-video-button ' .
						$contentPosition .
						'" style="--elements_color: ' .
						$current_slide_text_color .
						'" data-fancybox href="' .
						htmlentities($slide['videoEmbed']) .
						'">
																	<i class="gbp-icon-sl-play"></i>
																</a>';
				}

				$slide_title = '';
				$slide_description = '';

				if (isset($slide['title'])) {
					$slide_title = $slide['title'];
				}

				if (isset($slide['description'])) {
					$slide_description = $slide['description'];
				}

				$slide_content = '';

				if ($sliderType === 'multiple_items') {
					$title_content = <<<EOT
					<$title_tag>
						<span class="flo-slide-title  $maybeCustomTypographyTitleClass " data-font="$title_theme_data_font"
							style="$title_styles"> $slide_title </span>
					</$title_tag>
		EOT;
					$title_content_tags = trim($slide_title) === '' ? '' : $title_content;
					$slide_content .= <<<EOT
	<div class="flo-slide-content $contentPosition  $mob_height_class"
			style="--elements_color: $current_slide_text_color"
			data-elements_color="$current_slide_text_color"
	>
	<div class="top-side">
		$title_content_tags
	</div>
	<div class="bottom-side">
		<div class="flo-slide-description $maybeCustomTypographyDescriptionClass "
			data-font="$description_theme_data_font" style=" $description_styles ">$slide_description </div>
	</div>
	</div>
EOT;

					$slide_content =
						'<div class="multiple-items-content">' .
						$slide_video_embed .
						$slide_content .
						'</div>';
				}
				// slide overlay
				$slide_overlay = '';
				if ($enableMediaOverlay) {
					$overlayStyles =
						'--overlay-gradient: ' .
						Flo_Guten_Blocks_Public::get_overlay_gradient(
							$slide['mediaOverlay'],
							$mediaOverlay
						) .
						';';

					$slide_content .=
						'<div class="slide__overlay" style="' . $overlayStyles . '"></div>';
				}
				$img_proportion_css = ''; // in case the imgWidth is 0
				$current_slide_type = '';
				$mobile_position_style = '';
				if (isset($slide['type']) && $slide['type'] == 'video') {
					// sl media actually ))

					$sl_img =
						'<video class="slick-slider-video" preload="auto" autoplay loop paysinline webkit-playsinline x5-playsinline muted src="' .
						$slide['url'] .
						'"></video>';
					$current_slide_type = 'type-video';

				//$return .= '<div class="slick-slider-block-slide type-video" ><video class="slick-slider-video" preload="auto" autoplay loop paysinline webkit-playsinline x5-playsinline muted src="' . $slide['url'] . '"></video>' . $slide_content . '</div>';
				} elseif (isset($slide['url'])) {
					if (isset($slide['imagePositionMobile'])) {
						$imagePositionMobile = $slide['imagePositionMobile'];
					} else {
						$imagePositionMobile = 50;
					}
					$mobile_position = Flo_Guten_Blocks_Public::get_mobile_crop_position(
						$imagePositionMobile
					);
					$mobile_position_style = ' --mobile-position: ' . $mobile_position;

					$src_set = wp_get_attachment_image_srcset($slide['id'], 'full');

					// image proportion

					if (isset($slide['imgWidth']) && $slide['imgWidth'] !== 0) {
						$img_proportion = $slide['imgHeight'] / $slide['imgWidth'];
						$img_proportion_css = '--img-prop: ' . $img_proportion . ';';
					}

					/**
					 * For the Single item slide  we need  to use a custom lazy loading.
					 * For the we will use the class 'lazypreload' and in activate-slick-frontend.js on beforeChange  event
					 * we call a function which will look at the next image and will change the
					 * class 'lazypreload' with 'lazyload' - and  then lazy sizes script will pick up that class and will preload that image
					 *
					 * For the  viziblenearby - we can use directly the 'lazyload' class.
					 */

					if (
						($sliderType === 'multiple_items' &&
							($i < 2 || $i == sizeof($slides) - 1)) ||
						('singleitem' === $sliderType &&
							($i == 0 || $i == sizeof($slides) - 1))
					) {
						$sl_img =
							'<img class="slick-slider-image lazyload" alt="' .
							$slide['alt'] .
							'" data-id="' .
							$slide['id'] .
							'"  data-src="' .
							$slide['url'] .
							'" data-srcset="' .
							$src_set .
							'" ' .
							$srcset_sizes .
							'/>';
					} else {
						$sl_img =
							'<img class="slick-slider-image ' .
							$lazy_load_img_class .
							'" alt="' .
							$slide['alt'] .
							'" data-id="' .
							$slide['id'] .
							'"   data-src="' .
							$slide['url'] .
							'" data-srcset="' .
							$src_set .
							'" ' .
							$srcset_sizes .
							'/>';
					}

					$current_slide_type = 'type-img';
				} else {
					$sl_img =
						'<div class="slick-slider-block-slide-noimg-placeholder" style=" height: 500px; "><img src="' .
						plugin_dir_url(dirname(__FILE__)) .
						'../../assets/images/no-image.jpg" /></div>';
				}
				//str_replace('"', "'", $slide['description']) .
				$return .=
					'<div class="slick-slider-block-slide ' .
					$current_slide_type .
					'"
				style="' .
					$img_proportion_css .
					$mobile_position_style .
					'"
				data-title="' .
					htmlentities($slide_title) .
					'"
				data-slide-title="' .
					htmlentities(
						'<' .
							$title_tag .
							'>' .
							'<span
								class="flo-slide-title ' .
							$maybeCustomTypographyTitleClass .
							'"
								style="' .
							$title_styles .
							'"
								data-font="' .
							$title_theme_data_font .
							'"
							>' .
							$slide_title .
							'</span>' .
							'</' .
							$title_tag .
							'>'
					) .
					'"
				data-slide-description="' .
					htmlentities($slide_description) .
					'"
				data-slide-videoEmbed="' .
					htmlentities($slide_video_embed) .
					'"
				data-elements_color="' .
					$current_slide_text_color .
					'"
								>' .
					$sl_img .
					$slide_content .
					'</div>';
			}

			$return .= '</div>';

			$nr_slides = count($slides);

			// multiple items custom counter color
			$miCustomCounterColor = '';
			$miCustomCounterColor .=
				'--arrows-color: ' .
				Flo_Guten_Blocks_Helper::get_style_color($miArrowsColor);

			$sliderCounterHtml = '';

			if ($slideCounter) {
				$sliderCounterHtml = <<<EOT
<div class="flo_slick__counter flo_slick__counter--$sliderType flo_slick__counter--$contentPosition">
	<span class="flo_slick__current-index" style="$miCustomCounterColor">1</span>
	<span class="flo_slick__counter-delimiter" style="$miCustomCounterColor"></span>
	<span class="flo_slick__total-index" style="$miCustomCounterColor">
		$nr_slides
	</span>
</div>
EOT;
			} else { // just the counter wrapper to be used as placeholder
				$sliderCounterHtml = <<<EOT
<div class="flo_slick__counter flo_slick__counter--$sliderType flo_slick__counter--$contentPosition">	</div>
EOT;
			}

			if ('multiple_items' !== $sliderType) {
				$decorativeLineContent = '';

				if ($decorativeLine) {
					// if decorativeLine is enabled
					$decorativeLineContent = <<<EOT
<div class="decorative-line decorative-line-$contentPosition"></div>
EOT;
				}

				$outer_content = <<<EOT
<div class="flo-slide-content--wrapper">
	<div class="flo-slide-content $contentPosition">
		<div class="dummy-placeholder"></div>

		<div class="top-side-wrapper">

			<div class="video-embed-wrapper"></div>
			<div class="top-side">
			<div class="title-block"></div>
				<div class="counter-wrapper">
					$sliderCounterHtml
				</div>
			</div>
			<div class="bottom-side">
				<div
					class="flo-slide-description $maybeCustomTypographyDescriptionClass"
					style="$description_styles"
					data-font="$description_theme_data_font"
				></div>
			</div>
		</div>

		<div class="bottom-side-wrapper">

			$decorativeLineContent

			<div class="bottom-description">
				<div
					class="flo-slide-description $maybeCustomTypographyDescriptionClass"
					style="$description_styles"
					data-font="$description_theme_data_font"
				></div>
			</div>
			$sliderCounterHtml
		</div>
	</div>
</div>
EOT;

				$return .= $outer_content;
			} // eof if ('multiple_items' !== $sliderType)

			if ('multiple_items' === $sliderType) {
				$return .= $sliderCounterHtml;
			}

			$return .= '</div>';
		}

		return apply_filters(
			'flo_slick_slideshow_block_output',
			$return,
			$slides,
			$atts
		);
	}
}
