<?php

namespace Tech360;

defined( 'ABSPATH' ) or die;

class Slider extends Cpt {

	static function _slider_settings( $id ) {

		$output = [];

		$output[ 'autoplay' ] = get_field( 'slider_autoplay', $id );
		$output[ 'fade' ] = get_field( 'slider_transition_type', $id ) == 'fade' ? true : false;
		$output[ 'pause_on_hover' ] = get_field( 'slider_pause_on_hover', $id );
		$output[ 'transition_time' ] = get_field( 'slider_transition_time', $id ) ? ( intval( get_field( 'slider_transition_time', $id ) ) / 100 ) * 1000 : 1000;
		$output[ 'pause_time' ] = get_field( 'slider_pause_time', $id ) ? ( intval( get_field( 'slider_pause_time', $id ) ) / 100 ) * 7500 : 7500;
		$output[ 'slides_to_show' ] = get_field( 'slider_slides_to_show', $id ) ? intval( get_field( 'slider_slides_to_show', $id ) ) : 1;
		$output[ 'show_arrows' ] = get_field( 'slider_show_arrows', $id );
		$output[ 'show_ticker' ] = get_field( 'slider_show_ticker', $id );

		return $output;

	}

	static function _slider_class( $id, $extra_class ) {

		$output = [];
		$output[] = 't360-slider';

		if( get_field( 'slider_show_arrows', $id ) || get_field( 'slider_show_ticker', $id ) ) {
			$output[] = get_field( 'slider_controls_position', $id );
		}

		if( get_field( 'enable_advanced_settings', $id ) && get_field( 'css_classes', $id ) ) {
			$css_classes = explode( ' ', Utils::trim_all( get_field( 'css_classes', $id ) ) );
			$output = array_merge( $output, $css_classes );
		}

		if( is_string( $extra_class ) ) {
			$extra_class = explode( ' ', Utils::trim_all( $extra_class ) );
		}

		if( is_array( $extra_class ) ) {
			$output = array_merge( $output, $extra_class );
		}

		return implode( ' ', $output );

	}

	static function _slider_id( $id ) {

		if( get_field( 'enable_advanced_settings', $id ) && get_field( 'css_id', $id ) ) {
			return Utils::sluggify( Utils::trim_all( get_field( 'css_id', $id ) ) );
		} else {
			return 't360-slider-' . $id;
		}

	}

	static function _slide_class( $id ) {

		$output = [];
		$output[] = 't360-slide';

		if( get_field( 'text_align', $id ) ) {
			$output[] = get_field( 'text_align', $id );
		}

		if( get_field( 'text_color', $id ) ) {
			$output[] = get_field( 'text_color', $id );
		}

		if( get_field( 'enable_advanced_settings', $id ) && get_field( 'css_classes', $id ) ) {
			$css_classes = explode( ' ', Utils::trim_all( get_field( 'css_classes', $id ) ) );
			$output = array_merge( $output, $css_classes );
		}

		return implode( ' ', $output );

	}

	static function _slide_style( $id ) {

		$output = [];

		if( get_field( 'slide_bg_color', $id ) ) {
			$output[] = sprintf( 'background-color: %s', get_field( 'slide_bg_color', $id ) );
		}

		if( get_field( 'slide_bg_image', $id ) && has_post_thumbnail( $id ) ) {
			$output[] = sprintf( 'background-image: url(%s)', get_the_post_thumbnail_url( $id, 'full' ) );
			$output[] = 'background-repeat: no-repeat';
			$output[] = 'background-size: cover';
		}

		return implode( '; ', $output );

	}

	static function _heading_class( $slide_id ) {

		$output = [];
		$output[] = 'slide-title';

		if( 'text-light' == get_field( 'text_color', $slide_id ) ) {
			$output[] = 'text-light';
		}

		return implode( ' ', $output );

	}

	static function _overlay_style( $slide_id ) {

		$output = [];

		if( get_field( 'slide_bg_image', $slide_id ) && has_post_thumbnail( $slide_id ) && get_field( 'slide_overlay_color', $slide_id ) ) {
			$output[] = sprintf( 'background-color: %s', get_field( 'slide_overlay_color', $slide_id ) );
			$output[] = sprintf( 'opacity: %s', intval( get_field( 'slide_overlay_opacity', $slide_id ) ) / 100 );
		}

		return implode( '; ', $output );

	}

	static function _slide_button( $slide_id ) {

		$button = get_field( 'slide_button', $slide_id ) && get_field( 'slide_button_link', $slide_id );

		if( ! $button )
			return false;

		$btn_class = [];
		$btn_class[] = 'btn';
		$btn_class[] = get_field( 'slide_button_type', $slide_id );
		if( 'none' != get_field( 'slide_button_spacing', $slide_id ) ) {
			$btn_class[] = get_field( 'slide_button_spacing', $slide_id );
		}

		$button = [
			'label' => get_field( 'slide_button_label', $slide_id ),
			'href' => get_field( 'slide_button_link', $slide_id ),
			'class' => implode( ' ', $btn_class )
		];

		return $button;

	}

	static function render( $id, $extra_class = null ) {

		$slider = get_post( $id );

		if( $slider ) {
			$slides = get_field( 'slider_slides', $id );
		}

		if( $slides ) {

			$slider_settings = self::_slider_settings( $id );
			$slider_class = self::_slider_class( $id, $extra_class );
			$slider_id = self::_slider_id( $id );

		?>
			<div class="<?php echo $slider_class ?>">
				<div id="<?php echo $slider_id ?>">
			<?php
				foreach( $slides as $slide ) {

					$slide_title = apply_filters( 'the_title', $slide->post_title, $slide->ID );
					$slide_content = apply_filters( 'the_content', $slide->post_content );
					$slide_button = self::_slide_button( $slide->ID );

					$reverse_columns = ( ! get_field( 'slide_bg_image', $slide->ID ) && get_field( 'slide_reverse_columns', $slide->ID ) ) || ( get_field( 'slide_bg_image', $slide->ID ) && ( 'half' == get_field( 'slide_content_width', $slide->ID ) ) && get_field( 'slide_reverse_columns', $slide->ID ) );

				?>
					<div class="<?php echo self::_slide_class( $slide->ID ) ?>" style="<?php echo self::_slide_style( $slide->ID ) ?>">
						<div class="slide-content-wrapper container">
							<div class="row<?php echo $reverse_columns ? ' flex-row-reverse' : '' ?>">
						<?php
							if( get_field( 'slide_bg_image', $slide->ID ) ) {
								$content_class = ( 'full' == get_field( 'slide_content_width', $slide->ID ) ) ? 'col-12' : 'col-md-6';
						?>
								<div class="<?php echo $content_class ?>">
									<h2 class="<?php echo self::_heading_class( $slide->ID ) ?>"><?php echo $slide_title ?></h2>
									<div class="slide-content">
									<?php
										echo $slide_content;
										if( $slide_button ) {
									?>
										<a class="<?php echo $slide_button[ 'class' ] ?>" href="<?php echo $slide_button[ 'href' ] ?>"><?php echo $slide_button[ 'label' ] ?></a>
									<?php
										}
									?>
									</div>
								</div>
						<?php
							} else {
						?>
								<div class="col-md-6">
									<h2 class="<?php echo self::_heading_class( $slide->ID ) ?>"><?php echo $slide_title ?></h2>
									<div class="slide-content">
									<?php
										echo $slide_content;
										if( $slide_button ) {
									?>
										<a class="<?php echo $slide_button[ 'class' ] ?>" href="<?php echo $slide_button[ 'href' ] ?>"><?php echo $slide_button[ 'label' ] ?></a>
									<?php
										}
									?>
									</div>
								</div>
								<div class="col-md-6 text-center">
									<?php echo get_the_post_thumbnail( $slide->ID, 'post-thumbnail', [ 'class' => 'img-fluid' ] ) ?>
								</div>
						<?php
							}
						?>
							</div><!-- /.row -->
						</div><!-- /.slide-content-wrapper -->
					<?php
						if( ! empty( self::_overlay_style( $slide->ID ) ) ) {
					?>
						<span class="bg-overlay" style="<?php echo self::_overlay_style( $slide->ID ) ?>"></span>
					<?php
						}
					?>
					</div>
				<?php
				}
			?>
				</div><!-- /#$slider_id -->
			</div><!-- /.t360-slider -->
			<script>
				(function($) {
					$('#<?php echo $slider_id ?>').slick({
					<?php if( $fade ) { ?>
						fade: true,
					<?php } ?>
						slidesToShow: <?php echo $slider_settings[ 'slides_to_show' ] ?>,
						slidesToScroll: <?php echo $slider_settings[ 'slides_to_show' ] ?>,
						autoplay: <?php echo $slider_settings[ 'autoplay' ] ? 'true' : 'false' ?>,
						autoplaySpeed: <?php echo $slider_settings[ 'pause_time' ] ?>,
						speed: <?php echo $slider_settings[ 'transition_time' ] ?>,
						arrows: <?php echo $slider_settings[ 'show_arrows' ] ? 'true' : 'false' ?>,
						dots: <?php echo $slider_settings[ 'show_ticker' ] ? 'true' : 'false' ?>,
						pauseOnHover: <?php echo $slider_settings[ 'pause_on_hover' ] ? 'true' : 'false' ?>,
						infinite: true,
						prevArrow: '<button type="button" class="slick-prev"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60"><path class="arrow-bg" d="M56 60H4c-2.21 0-4-1.79-4-4V4c0-2.21 1.79-4 4-4h52c2.21 0 4 1.79 4 4v52c0 2.21-1.79 4-4 4z" opacity="0.25"/><path class="arrow" fill="#fff" d="M19.39 31.42L37.78 49.8c.78.78 2.05.78 2.83 0 .78-.78.78-2.05 0-2.83L23.64 30l16.97-16.97c.78-.78.78-2.05 0-2.83-.78-.78-2.05-.78-2.83 0L19.39 28.59c-.78.78-.78 2.04 0 2.83z"/></svg></button>',
						nextArrow: '<button type="button" class="slick-next"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60"><path class="arrow-bg" d="M56 60H4c-2.21 0-4-1.79-4-4V4c0-2.21 1.79-4 4-4h52c2.21 0 4 1.79 4 4v52c0 2.21-1.79 4-4 4z" opacity="0.25"/><path class="arrow" fill="#fff" d="M40.61 31.42L22.22 49.8c-.78.78-2.05.78-2.83 0-.78-.78-.78-2.05 0-2.83L36.36 30 19.39 13.04c-.78-.78-.78-2.05 0-2.83.78-.78 2.05-.78 2.83 0L40.6 28.59c.79.78.79 2.04.01 2.83z"/></svg></button>'
					});
				})(jQuery);
			</script>
		<?php
		}

	}

}

$slider_labels = [
	'singular_name' => 'Slider',
	'name' => 'Sliders'
];

$slider_args = [
	'menu_icon' => 'dashicons-slides',
	'menu_position' => 34,
	'supports' => [ 'title', 'page_attributes' ]
];

$slider_columns = [
	'slides' => [
		'field' => 'slider_slides',
		'label' => 'Slides'
	],
	'shortcode' => [
		'label' => 'Shortcode<br><i style="font-size: 85%">Click to select, CTRL+C to copy</i>',
		'content' => '[slider id=%s]'
	]
];

$slider = new Slider(
	'slider',
	$slider_labels,
	$slider_args
);

$slider->columns( $slider_columns, false );
