{% set uniqueId = "carousel-" ~ random() %}
{% set carouselFunctionName = "initCarousel" ~ uniqueId|replace({'-': ''}) %}

<div x-data="{{ carouselFunctionName }}()" x-init="init()" class="relative w-full max-w-7xl mx-auto">
	<div x-ref="swiperContainer" id="{{ uniqueId }}" class="swiper lg:h-full">
		<div class="swiper-wrapper lg:!flex lg:!transform-none lg:flex-wrap lg:gap-4">
			{% if slides is defined and slides %}
				{% for index, product in slides %}
					{# Utilisation de style display block par défaut pour les 3 premiers éléments #}
					<div data-hash="index-{{ uniqueId }}-{{ index }}"
						 style="{% if index < 3 %}display: block;{% endif %}"
						 x-cloak
						 x-show="isVisible({{ index }})"
						 x-transition:enter="transition-opacity duration-500"
						 x-transition:enter-start="opacity-0"
						 x-transition:enter-end="opacity-100"
						 x-transition:leave="transition-opacity duration-300"
						 x-transition:leave-start="opacity-100"
						 x-transition:leave-end="opacity-0"
						 class="swiper-slide relative overflow-hidden lg:!mr-0 {% if loop.first or index == 5 or index == 6 %} lg:!w-full {% else %} lg:!w-[calc(50%_-_8px)] {% endif %}">
						<img src="{{ product.src|path }}"
							 alt="{{ product.alt }}"
							 class="w-full h-full object-cover aspect-square">
						{% if loop.first %}
							<div class="absolute bottom-4 hidden lg:flex gap-2 w-full justify-center">
								{% render "@template-button" with {
									color: "light",
									size: "sm",
									type: "leading-icon",
									label: "Essai virtuel",
									icon: {
										name: "library--camera"
									}
								} %}
								{% render "@template-button" with {
									color: "light",
									size: "sm",
									type: "leading-icon",
									label: "Vue 3D",
									icon: {
										name: "library--3d"
									}
								} %}
							</div>
						{% endif %}
					</div>
				{% endfor %}
			{% endif %}
		</div>

		{% if carousel.showPagination %}
			<div x-ref="pagination"
				 class="swiper-pagination-{{ uniqueId }} swiper-pagination lg:hidden {{ paginationClass }}"
					{{ swiper_pagination_attribute }}></div>
		{% endif %}
	</div>

	<div x-ref="pdpButtonProductGallerie" class="hidden lg:flex gap-2 w-full justify-center mt-4">
		{% render "@template-button" with {
			color: "dark-ghost",
			label: "Voir plus",
			button_attribute: 'x-show="visibleItems < maxItems" @click="showMore"'
		} %}
		{% render "@template-button" with {
			color: "dark-ghost",
			label: "Voir moins",
			button_attribute: 'x-show="visibleItems > 3" @click="showLess"'
		} %}
	</div>
</div>

<script>
	function {{ carouselFunctionName }}() {
		return {
			swiper: null,
			options: {{ carousel|json_encode|raw }},
			componentId: '{{ uniqueId }}',
			visibleItems: 3,
			maxItems: {{ slides|length }},

			showMore() {
				this.visibleItems = Math.min(this.visibleItems + 3, this.maxItems);
				this.scrollToLastVisible();
			},

			showLess() {
				this.visibleItems = Math.max(3, this.visibleItems - 3);
				this.scrollToLastVisible();
			},

			scrollToLastVisible() {
				// Attendre que le DOM soit mis à jour
				setTimeout(() => {
					const lastVisibleItem = document.querySelector(`[data-hash="index-${this.componentId}-${this.visibleItems - 1}"]`);
					if (lastVisibleItem) {
						lastVisibleItem.scrollIntoView({ behavior: 'smooth', block: "end"});
					}
				}, 100);
			},

			isVisible(index) {
				return this.$store.screen.isTablet || index < this.visibleItems;
			},

			init() {
				this.$watch('$store.screen.isTablet', (isTablet) => {
					if (isTablet && !this.swiper) {
						this.initSwiper();
					} else if (!isTablet && this.swiper) {
						this.swiper.destroy(true, true);
						this.swiper = null;
					}
				});

				if (this.$store.screen.isTablet) {
					this.initSwiper();
				}
			},

			initSwiper() {
				this.swiper = new Swiper(this.$refs.swiperContainer, {
					slidesPerView: this.options.slidesPerView.mobile,
					spaceBetween: this.options.spaceBetween,
					pagination: this.options.showPagination ? {
						el: '.swiper-pagination-' + this.componentId,
						clickable: true,
						bulletClass: 'bullet',
						bulletActiveClass: 'active',
					} : false,
					navigation: this.options.showNavigation ? {
						nextEl: '.carousel-button-next-' + this.componentId,
						prevEl: '.carousel-button-prev-' + this.componentId
					} : false,
					hashNavigation: {
						watchState: true,
					},
					breakpoints: {
						640: {
							slidesPerView: this.options.slidesPerView.tablet
						}
					}
				});
			},
		};
	}
</script>