<?php

function gtm_render_block_slider_template( $attr, $content, $block ) {
	$page_key = isset( $block->context['queryId'] ) ? 'query-' . $block->context['queryId'] . '-page' : 'query-page';
	$page     = empty( $_GET[$page_key] ) ? 1 : (int) $_GET[$page_key];

	$query_args = gtm_build_query_vars_from_query_block( $block, $page );
	// Override the custom query with the global query if needed.
	$use_global_query = ( isset( $block->context['query']['inherit'] ) && $block->context['query']['inherit'] );
	if ( $use_global_query ) {
		global $wp_query;
		if ( $wp_query && isset( $wp_query->query_vars ) && is_array( $wp_query->query_vars ) ) {
			// Unset `offset` because if is set, $wp_query overrides/ignores the paged parameter and breaks pagination.
			unset( $query_args['offset'] );
			$query_args = wp_parse_args( $wp_query->query_vars, $query_args );

			if ( empty( $query_args['post_type'] ) && is_singular() ) {
				$query_args['post_type'] = get_post_type( get_the_ID() );
			}
		}
	}

	/* ME */$query_args = gtm_apply_post_template_query_args( $query_args, $block, $page, $attr );
	$query              = new WP_Query( $query_args );

	if ( ! $query->have_posts() ) {
		return '';
	}

	$classnames = '';
	if ( isset( $block->context['displayLayout'] ) && isset( $block->context['query'] ) ) {
		if ( isset( $block->context['displayLayout']['type'] ) && 'flex' === $block->context['displayLayout']['type'] ) {
			$classnames = "is-flex-container columns-{$block->context['displayLayout']['columns']}";
		}
	}

	$classnames .= ' swiper swiper-container';
	if ( ! empty( $attr['enableAutoSlidesPerView'] ) ) {
		$classnames .= ' gtm-has-slider-template-auto-slides-per-view';
	}

	$wrapper_attributes = get_block_wrapper_attributes( ['class' => $classnames] );

	$content = '';
	$content .= '<div class="swiper-wrapper">';
	/* ME start */
	$i = 0;
	/* ME end */
	while ( $query->have_posts() ) {
		/* ME start */
		if ( ++$i <= ( $attr['offset'] ?? 0 ) ) {
			$query->the_post();
			$i++;
			continue;
		} else if ( ! empty( $attr['limit'] ) && $i > ( $attr['offset'] ?? 0 ) + $attr['limit'] ) {
			break;
		}
		/* ME end */
		$query->the_post();
		$block_content = (
			new WP_Block(
				$block->parsed_block,
				[
					'postType' => get_post_type(),
					'postId'   => get_the_ID(),
				]
			)
		)->render( ['dynamic' => false] );
		/* ME start */
		if ( ! empty( trim( $block_content ) ) ) {
			/* ME end */
			$content .= '<div class="swiper-slide">';
			$post_classes = esc_attr( implode( ' ', get_post_class( 'gtm-block-post' ) ) );
			$content .= '<div class="' . esc_attr( $post_classes ) . '">' . $block_content . '</div>';
			$content .= '</div>';
			/* ME start */
		}
		/* ME end */
	}
	$content .= '</div>';

	wp_reset_postdata();

	if ( $attr['enableArrow'] ) {
		$content .= '<div class="swiper-button-prev"></div>';
		$content .= '<div class="swiper-button-next"></div>';
	}
	if ( $attr['enablePagination'] ) {
		$content .= '<div class="swiper-pagination"></div>';
	}

	$wrapper_attributes .= ' data-swiper="' . esc_attr( json_encode( gtm_slider_template_buildSwiperParams( $attr ) ) ) . '"';
	wp_enqueue_script( 'gutenmate-slider' );
	wp_enqueue_style( 'gutenmate-slider' );

	return sprintf(
		'<div %1$s>%2$s</div>',
		$wrapper_attributes,
		$content
	);
}

function gtm_slider_template_buildBreakpoints( $attributes ) {
	$lg = $md = $sm = [];

	/* Need a complex solution since swiperjs is mobile-first but gutenmate is desktop-first */

	if ( empty( $attributes['enableAutoSlidesPerView'] ) ) {
		if ( isset( $attributes['slidesPerView']['lg'] ) && $attributes['slidesPerView']['lg'] != "" ) {
			$sm['slidesPerView'] = intval( $attributes['slidesPerView']['lg'] );
			$md['slidesPerView'] = intval( $attributes['slidesPerView']['lg'] );
			$lg['slidesPerView'] = intval( $attributes['slidesPerView']['lg'] );
		}

		if ( isset( $attributes['slidesPerView']['md'] ) && $attributes['slidesPerView']['md'] != "" ) {
			$sm['slidesPerView'] = intval( $attributes['slidesPerView']['md'] );
			$md['slidesPerView'] = intval( $attributes['slidesPerView']['md'] );
		}

		if ( isset( $attributes['slidesPerView']['sm'] ) && $attributes['slidesPerView']['sm'] != "" ) {
			$sm['slidesPerView'] = intval( $attributes['slidesPerView']['sm'] );
		}
	}

	if ( isset( $attributes['slideGap']['lg'] ) && $attributes['slideGap']['lg'] != "" ) {
		$sm['spaceBetween'] = intval( $attributes['slideGap']['lg'] );
		$md['spaceBetween'] = intval( $attributes['slideGap']['lg'] );
		$lg['spaceBetween'] = intval( $attributes['slideGap']['lg'] );
	}

	if ( isset( $attributes['slideGap']['md'] ) && $attributes['slideGap']['md'] != "" ) {
		$sm['spaceBetween'] = intval( $attributes['slideGap']['md'] );
		$md['spaceBetween'] = intval( $attributes['slideGap']['md'] );
	}

	if ( isset( $attributes['slideGap']['sm'] ) && $attributes['slideGap']['sm'] != "" ) {
		$sm['spaceBetween'] = intval( $attributes['slideGap']['sm'] );
	}

	return [
		0    => $sm,
		768  => $md,
		1200 => $lg,
	];
}

function gtm_slider_template_buildSwiperParams( $attributes ) {
	$attributes = wp_parse_args( $attributes, [
		'enableAutoSlidesPerView' => false,
		'slidesPerView'           => ['lg' => 1],
		'slideGap'                => ['lg' => 0],
		'enableLoop'              => false,
		'enableAutoplay'          => false,
		'enableArrow'             => true,
		'enablePagination'        => false,
		'enableCenterSlides'      => false,
	] );

	$params = [
		'loop'           => $attributes['enableLoop'] ?: false,
		'breakpoints'    => gtm_slider_template_buildBreakpoints( $attributes ),
		'autoplay'       => $attributes['enableAutoplay'] ? [
			'delay' => intval( $attributes['autoplayDelay'] ),
		] : false,
		'navigation'     => $attributes['enableArrow'] ?: false,
		'pagination'     => $attributes['enablePagination'] ?: false,
		'centeredSlides' => $attributes['enableCenteredSlides'] ?: false,
	];

	if ( ! empty( $attributes['enableAutoSlidesPerView'] ) ) {
		$params['slidesPerView'] = 'auto';
	}

	return $params;
}

/**
 * Registers the `gtm/slider-template` block on the server.
 */
function gtm_register_block_slider_template() {
	gtm_register_block_type( 'slider-template', [
		'render_callback'   => 'gtm_render_block_slider_template',
		'skip_inner_blocks' => true,
	] );
}

add_action( 'init', 'gtm_register_block_slider_template' );

add_filter( 'gtm.BlockStyleCompiler.gtm/slider-template', 'gtm_compile_block_css_slider_template', 10, 3 );
function gtm_compile_block_css_slider_template( $output, $attributes, $blockName ) {
	$block_style = ['classes' => [], 'style' => []];

	$block_style['classes'][] = 'gtm-block';

	if ( $attributes['enableAutoSlidesPerView'] ) {
		gtm_css_compileCssVar( $block_style, "slider-template-slide-width", $attributes['slideWidth'] );
	}

	if ( $attributes['enableArrow'] ) {
		gtm_css_compileCssVar( $block_style, "slider-template-arrow-width", $attributes['arrowWidth'] );
		gtm_css_compileCssVar( $block_style, "slider-template-arrow-height", $attributes['arrowHeight'] );
		gtm_css_compileCssVar( $block_style, "slider-template-arrow-size", $attributes['arrowSize'] );
		gtm_css_compileCssVar( $block_style, "slider-template-arrow-x", $attributes['arrowXPosition'] );
		gtm_css_compileCssVar( $block_style, "slider-template-arrow-radius", gtm_css_parseBorderRadiusValue( $attributes['arrowRadius'] ) );
		gtm_css_compileCssVar( $block_style, "slider-template-arrow-shadow", gtm_css_parseShadowValue( $attributes['arrowShadow'] ) );
		gtm_css_compileCssVar( $block_style, "slider-template-arrow-color", gtm_css_parseColorValue( $attributes['arrowColor'] ) );
		gtm_css_compileCssVar( $block_style, "slider-template-arrow-bg", gtm_css_parseColorValue( $attributes['arrowBg'] ) );
		gtm_css_compileCssVar( $block_style, "slider-template-arrow-hover-color", gtm_css_parseColorValue( $attributes['arrowHoverColor'] ) );
		gtm_css_compileCssVar( $block_style, "slider-template-arrow-hover-bg", gtm_css_parseColorValue( $attributes['arrowHoverBg'] ) );
	}

	if ( $attributes['enablePagination'] ) {
		gtm_css_compileCssVar( $block_style, "slider-template-pagination-active-color", $attributes['paginationActiveColor'] );

		gtm_css_compileCssVar( $block_style, "slider-template-pagination-bullet-size", $attributes['paginationBulletSize'] );

		gtm_css_compileCssVar( $block_style, "slider-template-pagination-bullet-y", $attributes['paginationBulletY'] );

		gtm_css_compileCssVar( $block_style, "slider-template-pagination-bullet-y", $attributes['paginationBulletY'] );
	}

	// Apply to output
	$block_style['style'] = ['{{BLOCK}}' => $block_style['style']];

	return [
		'classes' => array_merge( $output['classes'], $block_style['classes'] ),
		'style'   => array_replace_recursive( $output['style'], $block_style['style'] ),
	];
}