<?php

namespace CarDealerPress\templates\partials\inventory;

use CarDealerPress\Includes\Functions\Fn_Inventory;
use CarDealerPress\Includes\Helpers\Option;

if ( ! defined( 'ABSPATH' ) ) {
	exit;
}

// for non ajax themes.
class Image_Display {

	public $fn_inventory;

	public function __construct() {
		$this->fn_inventory = new Fn_Inventory();
	}

	public function detail_thumb_bottom( $vehicle ): string {
		$list = self::build_image_list( $vehicle );
		$images_large = $list['large'];
		$images_small = $list['small'];
		$light_box_slides = $list['lightBox'];

		$video = ( empty( $vehicle['video'] ) ? '' : '<div id="video-play-container" onclick=\'window.open("' . $vehicle['video'] . '", "popup", "width=640, height=500, scrollbars=no, resizable=yes, toolbar=no, directories=no, location=no, menubar=yes, status=no, left=50, top=125"); return false\'><span id="video-play-icon-container"><span id="video-play-icon"></span></span>Video</div>' );

		$results = '<div id="vehicle-image-display">';
		$results .= ( empty( $video ) ? '' : '<div id="vehicle-video-container">' . $video . '</div>' );
		$results .= '<div id="primary-slider" class="splide">';
		$results .= '<div class="splide__arrows">';
		$results .= '<div class="splide__arrow splide__arrow--prev"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" width="40" height="40"><path d="m15.5 0.932-4.3 4.38 14.5 14.6-14.5 14.5 4.3 4.4 14.6-14.6 4.4-4.3-4.4-4.4-14.6-14.6z"></path></svg></div>';
		$results .= '<div class="splide__arrow splide__arrow--next"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" width="40" height="40"><path d="m15.5 0.932-4.3 4.38 14.5 14.6-14.5 14.5 4.3 4.4 14.6-14.6 4.4-4.3-4.4-4.4-14.6-14.6z"></path></svg></div>';
		$results .= '</div>';
		$results .= '<div class="splide__track"><ul class="splide__list">' . $images_large . '</ul></div>';
		$results .= '<div id="secondary-slider" class="splide"><div class="splide__track"><ul class="splide__list">' . $images_small . '</ul></div></div>';
		$results .= '</div>';

		$results .= '<div id="detailLightBox-background" class="lightBox-background" onclick="closeModal()"></div>';
		$results .= '<div id="detailLightBox" class="lightBox">';
		$results .= '<div class="lightBox-content">';
		$results .= $light_box_slides;
		$results .= '<a class="light-box-prev" onclick="plusSlides(-1)"><span class="light-box-prev-arrow">&#10094;</span></a>';
		$results .= '<a class="light-box-next" onclick="plusSlides(1)"><span class="light-box-next-arrow">&#10095;</span></a>';
		$results .= '<span class="close cursor" onclick="closeModal()">&times;</span>';
		$results .= '</div>';
		$results .= '</div>';

		$results .= '</div>';

		return $results;
	}

	public function images_with_thumbs_vertical( $vehicle ): string {
		$list = self::build_image_list( $vehicle );
		$images_large = $list['large'];
		$images_small = $list['small'];
		$light_box_slides = $list['lightBox'];

		$video = ( empty( $vehicle['video'] ) ? '' : '<div id="video-play-container" onclick=\'window.open("' . $vehicle['video'] . '", "popup", "width=640, height=500, scrollbars=no, resizable=yes, toolbar=no, directories=no, location=no, menubar=yes, status=no, left=50, top=125"); return false\'><span id="video-play-icon-container"><span id="video-play-icon"></span></span>Video</div>' );

		$results = ( empty( $video ) ? '' : '<div id="vehicle-video-container">' . $video . '</div>' );
		$results .= '<div id="carousel-display-wrapper">';
				$results .= '<div id="main-slider" class="splide">';
					$results .= '<div class="splide__arrows">';
						$results .= '<div class="splide__arrow splide__arrow--prev"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" width="40" height="40"><path d="m15.5 0.932-4.3 4.38 14.5 14.6-14.5 14.5 4.3 4.4 14.6-14.6 4.4-4.3-4.4-4.4-14.6-14.6z"></path></svg></div>';
						$results .= '<div class="splide__arrow splide__arrow--next"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" width="40" height="40"><path d="m15.5 0.932-4.3 4.38 14.5 14.6-14.5 14.5 4.3 4.4 14.6-14.6 4.4-4.3-4.4-4.4-14.6-14.6z"></path></svg></div>';
					$results .= '</div>';
					$results .= '<div class="splide__track"><ul class="splide__list">' . $images_large . '</ul></div>';
				$results .= '</div>';

				$results .= '<div id="thumb-slider" class="splide">';
					$results .= '<div class="splide__track"><ul class="splide__list">' . $images_small . '</ul></div>';
				$results .= '</div>';

			$results .= '<div id="detailLightBox-background" class="lightBox-background" onclick="closeModal()"></div>';
			$results .= '<div id="detailLightBox" class="lightBox">';
				$results .= '<div class="lightBox-content">';
					$results .= $light_box_slides;
					$results .= '<a class="light-box-prev" onclick="plusSlides(-1)"><span class="light-box-prev-arrow">&#10094;</span></a>';
					$results .= '<a class="light-box-next" onclick="plusSlides(1)"><span class="light-box-next-arrow">&#10095;</span></a>';
					$results .= '<span class="close cursor" onclick="closeModal()">&times;</span>';
				$results .= '</div>';
			$results .= '</div>';

		$results .= '</div>';

		return $results;
	}

	public function sliders_per_view( $vehicle ): string {
		$list             = self::build_image_array( $vehicle );
		$images_large     = $list['large'];
		$images_small     = $list['small'];
		$light_box_slides = $list['lightBox'];

		$content = "<div id='sliders-per-view' aria-label='Slide Container'>";
			$content .= "<div class='swiper swiper-per-view'>";
				$content .= "<div class='swiper-wrapper'>";
					foreach ( $images_large as $image ) {
						$content .= "<div class='swiper-slide'>";
						$content .= $image;
						$content .= "</div>";
					}
				$content .= "</div>";
	        $content .= "<div class='swiper-pagination'></div>";
	        $content .= "<div class='swiper-button-prev'></div>";
	        $content .= "<div class='swiper-button-next'></div>";

			$content .= "</div>";
		$content .= "</div>";

		return $content;
	}

	function video_display( $vehicle ) {
		$content = '';
		$video = $vehicle['video'];
		preg_match( '/(?<=v(\=|\/))([-a-zA-Z0-9_]+)|(?<=youtu\.be\/)([-a-zA-Z0-9_]+)|(?<=youtube.com\/embed\/)([-a-zA-Z0-9_]+)/', $video, $youtube_video );
		if ( $youtube_video ) {
			$content .= '<div id="inventory-video-wrapper">';
			$content .= "<iframe id='inventory-video-iframe'";
			$content .= " src='https://www.youtube.com/embed/" . $youtube_video[0] . "?feature=player_detailpage'";
			$content .= " title='vehicle-video' frameborder='0' allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share' referrerpolicy='strict-origin-when-cross-origin' allowfullscreen>";
			$content .= '</iframe>';
			$content .= '</div>';
		}

		return $content;
	}

	function build_image_list($vehicle){
		$images_large = $images_small = $light_box_slides = '';
		$i            = 0;
		$show_small   = count( $vehicle['photos_raw'] ) > 1;
		$idx          = 1;
		$title            = $vehicle['year'] . ' ' . $vehicle['make'] . ' ' . $vehicle['model'] . ' Located at ' . $vehicle['dealer'];
		if (empty($vehicle['photos_raw'])){
			// phpcs:ignore PluginCheck.CodeAnalysis.ImageFunctions.NonEnqueuedImage
			$sold_overlay = ! empty( $vehicle['sold_on'] ) ? '<img class="marked-sold-overlay" src="' . CDP_IMG . 'templates/inventory/sold_overlay.png" />' : '';
			$images_large = ( isset( $vehicle['image_medium'] ) ? '<li class="splide__slide"><img title="' . $title . '" class="vehicle-image" src="' . $vehicle['image_medium'] . ' " alt="slide-image"/>'.$sold_overlay.'</li>' : '' );
		} else {
			foreach ( $vehicle['photos_raw'] as $image ) {
				$save_class = ( 0 === $i ? 'vehicle-save' : '' );
				$this->fn_inventory->no_photo_replace( $image->large );
				$this->fn_inventory->no_photo_replace( $image->small );
				$li_img           = '<li class="splide__slide onclick " onclick="openModal();currentSlide(' . $idx . ')">';
				$li_img           .= '<img title="' . $title . '" class="hover-shadow cursor" src="' . $image->large . ' " alt="slide-image"/>';
				$li_img           .= '</li>';
				$images_large .= ( isset( $image->large ) ? $li_img : '' );
				// phpcs:ignore PluginCheck.CodeAnalysis.ImageFunctions.NonEnqueuedImage
				$light_box_slides .= '<div class="lightBoxSlides"><img title="' . $title . '"  src="' . $image->large . '" style="width:100%" alt="light-box-slides"></div>';
				if ( $show_small ) {
					// phpcs:ignore PluginCheck.CodeAnalysis.ImageFunctions.NonEnqueuedImage
					$images_small .= ( isset( $image->small ) ? '<li class="splide__slide vehicle-image-small small-slider-image"><img src="' . $image->small . '" alt="light-box-slides"/></li>' : '' );
				}
				$i ++;
				$idx ++;
			}
		}
		return array('large' => $images_large, 'small' => $images_small, 'lightBox' => $light_box_slides);
	}

	public function generate_video_html($video_url): string {
        return !empty($video_url) ?
        '<div id="video-play-container" onclick=\'window.open("' . $video_url . '", "popup", "width=640, height=500, scrollbars=no, resizable=yes, toolbar=no, directories=no, location=no, menubar=yes, status=no, left=50, top=125"); return false\'>' .
		                                         '<span id="video-play-icon-container"><span id="video-play-icon"></span></span>Video</div>' :
        '';
	}

	function build_image_array($vehicle){
		$images_large = $images_small = $light_box_slides = [];
		$i            = 0;
		$show_small   = count( $vehicle['photos_raw'] ) > 1;
		$idx          = 1;
		$title            = $vehicle['year'] . ' ' . $vehicle['make'] . ' ' . $vehicle['model'] . ' Located at ' . $vehicle['dealer'];
		if (empty($vehicle['photos_raw'])){
			// phpcs:ignore PluginCheck.CodeAnalysis.ImageFunctions.NonEnqueuedImage
			$sold_overlay = ! empty( $vehicle['sold_on'] ) ? '<img class="marked-sold-overlay" src="' . CDP_IMG . 'templates/inventory/sold_overlay.png" />' : '';
			$images_large[] = ( isset( $vehicle['image_medium'] ) ? '<img title="' . $title . '" class="vehicle-image" src="' . $vehicle['image_medium'] . ' " alt="slide-image"/>'.$sold_overlay : '' );
			$images_small[] = ( isset( $vehicle['image_medium'] ) ? '<img title="' . $title . '" class="vehicle-image" src="' . $vehicle['image_medium'] . ' " alt="slide-image"/>'.$sold_overlay : '' );
		} else {
			foreach ( $vehicle['photos_raw'] as $image ) {
				$this->fn_inventory->no_photo_replace( $image->large );
				$images_large[]  = '<img title="' . $title . '" class="hover-shadow cursor" src="' . $image->large . ' " alt="slide-image"/>';
				$images_small[]  = '<img title="' . $title . '" class="hover-shadow cursor" src="' . $image->small . ' " alt="slide-image"/>';
			}
		}
		return array('large' => $images_large, 'small' => $images_small, 'lightBox' => $light_box_slides);
	}

	public function swiper_thumbs_bottom( $vehicle ): string {
		$list             = self::build_image_array( $vehicle );
		$images_large     = $list['large'];
		$images_small     = $list['small'];
		$light_box_slides = $list['lightBox'];

		//$content = "<div id='main-gallery' aria-label='Slide Container Main'>";
		$content = "<div class='swiper swiper-main'>";
		$content .= "<div class='swiper-wrapper'>";
		foreach ( $images_large as $image ) {
			$content .= "<div class='swiper-slide'>";
			$content .= $image;
			$content .= "</div>";
		}
		$content .= "</div>";
		$content .= "<div class='swiper-pagination'></div>";
		$content .= "<div class='swiper-button-prev'></div>";
		$content .= "<div class='swiper-button-next'></div>";
		$content .= "</div>";
		//$content .= "</div>";

		//$content .= "<div id='thumbs' aria-label='Slide Container Thumbs'>";
		$content .= "<div class='swiper swiper-thumbs'>";
		$content .= "<div class='swiper-wrapper'>";
		foreach ( $images_small as $image ) {
			$content .= "<div class='swiper-slide'>";
			$content .= $image;
			$content .= "</div>";
		}
		$content .= "</div>";
		$content .= "</div>";
		//$content .= "</div>";

		return $content;
	}

	public function swiper_carousel( $vehicle ): string {
		$list             = self::build_image_array( $vehicle );
		$images_large     = $list['large'];
		$images_small     = $list['small'];
		$light_box_slides = $list['lightBox'];

		//$content = "<div id='main-gallery' aria-label='Slide Container Main'>";
		$content = "<div class='swiper swiper-main'>";
		$content .= "<div class='swiper-wrapper'>";
		foreach ( $images_large as $image ) {
			$content .= "<div class='swiper-slide'>";
			$content .= $image;
			$content .= "</div>";
		}
		$content .= "</div>";
		$content .= "<div class='swiper-pagination'></div>";
		$content .= "<div class='swiper-button-prev'></div>";
		$content .= "<div class='swiper-button-next'></div>";
		$content .= "</div>";
		//$content .= "</div>";

		return $content;
	}


}
