<?php
/**
 * Hyvä Themes - https://hyva.io
 * Copyright © Hyvä Themes. All rights reserved.
 * See COPYING.txt for license details.
 */

/**
 * @deprecated
 * @see hyva-themes/magento2-default-theme/Hyva_Theme/templates/elements/slider.phtml
 *
 * The PHP ViewModel-based slider is deprecated in favor of a progressively enhanced CSS slider.
 * The new implementation uses only child blocks, CSS, and the Alpine Snap Slider plugin.
 */

declare(strict_types=1);

use Hyva\Theme\Model\ViewModelRegistry;
use Hyva\Theme\ViewModel\HeroiconsOutline;
use Hyva\Theme\ViewModel\Store;
use Magento\Framework\Escaper;
use Magento\Framework\View\Element\Template;

// phpcs:disable Generic.Files.LineLength.TooLong

/** @var Template $block */
/** @var Escaper $escaper */
/** @var ViewModelRegistry $viewModels */

/** @var Store $viewModelStore */
$viewModelStore = $viewModels->require(Store::class);

/** @var HeroiconsOutline $heroicons */
$heroicons = $viewModels->require(HeroiconsOutline::class);

$title = (string) $block->getTitle();
$items = $block->getItems() ?? [];
if (is_object($items) && $items instanceof Iterator) {
    $items = iterator_to_array($items);
}
if (!$itemCount = count($items)) {
    return '';
}
$sliderItemRenderer = $block->getChildBlock('slider.item.template');

// The number of slides visible on the xl breakpoint
$maxVisibleSlides = $block->getData('max_visible') ?? 4;

// Breakpoints for 1 visible slider items on mobile, 2 visible on md, 3 on lg and 4 on xl (see $sliderPageSize).
$defaultSliderItemClasses = 'mr-2 py-1 md:w-1/2 lg:w-1/3 xl:w-1/4';

$sliderSectionClasses = $block->getData('maybe_purged_tailwind_section_classes') ?? 'my-12 text-gray-700 body-font';
$slideItemClasses = $block->getData('maybe_purged_tailwind_slide_item_classes') ?? $defaultSliderItemClasses;

?>
<script>
    'use strict';

    function initSliderComponent() {
        return {
            active: 0,
            itemCount: 0,
            getSlider() {
                return this.$root.querySelector('.js_slides');
            },
            pageSize: 4,
            pageFillers: 0,
            calcPageSize() {
                const slider = this.getSlider();
                if (slider) {
                    this.itemCount = slider.querySelectorAll('.js_slide').length;
                    this.pageSize = Math.round(slider.clientWidth / slider.querySelector('.js_slide').clientWidth);
                    this.pageFillers = (
                        this.pageSize * Math.ceil(this.itemCount / this.pageSize)
                    ) - this.itemCount;
                }
            },
            calcActive() {
                const slider = this.getSlider();
                if (slider) {
                    const sliderItems = this.itemCount + this.pageFillers;
                    const calculatedActiveSlide = slider.scrollLeft / (slider.scrollWidth / sliderItems);
                    this.active = Math.round(calculatedActiveSlide / this.pageSize) * this.pageSize;
                }
            },
            scrollPrevious() {
                this.scrollTo(this.active - this.pageSize);
            },
            scrollNext() {
                this.scrollTo(this.active + this.pageSize);
            },
            scrollTo(idx) {
                const slider = this.getSlider();
                if (slider) {
                    const slideWidth = slider.scrollWidth / (this.itemCount + this.pageFillers);
                    slider.scrollLeft = Math.floor(slideWidth) * idx;
                    this.active = idx;
                }
            }
        }
    }
</script>
<section class="<?= $escaper->escapeHtmlAttr($sliderSectionClasses) ?>"
         x-data="initSliderComponent()"
         x-defer="intersect"
         x-init="calcPageSize();"
         @resize.window.debounce="calcPageSize(); $nextTick( function() { calcActive() })"
         role="group"
         aria-roledescription="<?= $escaper->escapeHtmlAttr(__('Carousel')) ?>"
         <?php if ($title): ?>
         aria-label="<?= $escaper->escapeHtmlAttr(__('Carousel %1', $title)) ?>"
         <?php endif; ?>
>
    <?php if ($items): ?>
        <div class="relative">
            <?php if ($title): ?>
                <div class="container flex flex-col items-center pt-6 pb-3 mx-auto mb-6 border-b-2
                    border-gray-300 md:flex-row">
                    <h3 class="text-2xl font-medium text-gray-900 title-font">
                        <?= $escaper->escapeHtml($title); ?>
                    </h3>
                </div>
            <?php endif; ?>
            <div class="relative w-full overflow-x-hidden focus-within:ring-1 active:ring-0 ring-blue-500/50">
                <div class="relative flex flex-nowrap w-full overflow-auto js_slides snap"
                     @scroll.debounce="calcActive"
                >
                    <?php foreach ($items as $item): ?>
                        <div class="js_slide flex flex-col shrink-0 <?= $escaper->escapeHtmlAttr($slideItemClasses) ?>">
                            <div class="mx-1 grow card w-full card-interactive">
                                 <?= $sliderItemRenderer->setItem($item)->toHtml() ?>
                            </div>
                        </div>
                    <?php endforeach; ?>
                    <?php for ($i = 0; $i < $maxVisibleSlides; $i++): /* Add empty filler slides in case the number of items is not dividable by the pagesize */ ?>
                    <div :class="{
                        'js_dummy_slide flex-none w-full <?= $escaper->escapeJs($slideItemClasses) ?>' : pageFillers > <?= (int) $i ?>
                        }"></div>
                    <?php endfor; ?>
                </div>
            </div>
            <div style="min-height: 76px">
            <template x-if="itemCount > pageSize">
                <div class="flex items-center justify-center py-4">
                    <button
                        aria-label="<?= $escaper->escapeHtml(__('Previous')) ?>"
                        tabindex="-1"
                        class="mr-4 text-black rounded-full outline-none focus:outline-none flex-none"
                        :class="{ 'opacity-25 pointer-events-none' : active === 0 }"
                        @click="scrollPrevious">
                        <?= $heroicons->chevronLeftHtml('', 20, 20, ['aria-hidden' => 'true']) ?>
                    </button>
                    <div class="flex flex-wrap w-full md:w-auto justify-center">
                    <?php for ($i=0; $i < $itemCount; $i++): ?>
                        <span class="shrink-0 block w-3 h-3 m-1 bg-black bg-opacity-25 rounded-full shadow cursor-pointer"
                                :class="{
                                    'bg-opacity-100': active === <?= (int) $i ?>,
                                    'bg-opacity-25': active !== <?= (int) $i ?>,
                                    'hidden': (pageSize !== 1 && !!(<?= (int) $i ?> % pageSize))
                                    }"
                                @click="scrollTo(<?= (int) $i ?>)">
                        </span>
                    <?php endfor; ?>
                    </div>
                    <button
                        aria-label="<?= $escaper->escapeHtml(__('Next')) ?>"
                        tabindex="-1"
                        class="ml-4 text-black rounded-full outline-none focus:outline-none flex-none"
                        :class="{ 'opacity-25 pointer-events-none' : active >= itemCount-pageSize }"
                        @click="scrollNext">
                        <?= $heroicons->chevronRightHtml('', 20, 20, ['aria-hidden' => 'true']) ?>
                    </button>
                </div>
            </template>
            </div>
        </div>
    <?php endif; ?>
</section>