<?php
/**
 * Hyvä Themes - https://hyva.io
 * Copyright © Hyvä Themes 2020-present. All rights reserved.
 * This product is licensed per Magento install
 * See https://hyva.io/license
 */

declare(strict_types=1);

use Hyva\Theme\Model\ViewModelRegistry;
use Hyva\Theme\ViewModel\HeroiconsOutline;
use Hyva\Theme\ViewModel\ProductListItem;
use Hyva\Theme\ViewModel\ProductPage;
use Hyva\Theme\ViewModel\Store;
use Magento\Catalog\Block\Product\ReviewRendererInterface as ProductReviewRenderer;
use Magento\Framework\Escaper;
use Magento\Framework\View\Element\Template;
use Banyo\CustomHomePage\ViewModel\ThirdParty;

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

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

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

/** @var ProductPage $productViewModel */
$productViewModel = $viewModels->require(ProductPage::class);

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

/** @var ProductListItem $productListItemViewModel */
$productListItemViewModel = $viewModels->require(ProductListItem::class);

/** @var ThirdParty $viewModel */

$objectManager = \Magento\Framework\App\ObjectManager::getInstance();
$viewModel = $objectManager->get(Banyo\CustomHomePage\ViewModel\ThirdParty::class);

/** @var ThirdParty $viewModel */
$viewModel = $viewModels->require(ThirdParty::class);

// Get full action name
$request = $block->getRequest();
$heading = "";
$fullActionName = $request->getFullActionName();
// Only set heading if not on the product detail page
if ($fullActionName !== 'catalog_product_view') {
    $heading = $viewModel->getConfigValue('bestseller_homepage/bestseller_homepage_title');
}
$viewMode = 'grid';
$imageDisplayArea = 'category_page_grid';
$showDescription = false;

$name = (string)$block->getName();
$title = (string)$block->getTitle();
$headingTag = $block->getData('heading_tag') ?: 'h3';
$items = $block->getItems() ?? [];
if (is_object($items) && $items instanceof Iterator) {
    $items = iterator_to_array($items);
}
if (!$itemCount = count($items)) {
    return '';
}

$sliderIndex = 1;
$sliderItemRenderer = $block->getLayout()->getBlock('product_list_item')
    ?: $block->getChildBlock('slider.item.template')
        ?: $block->getLayout()->createBlock(Template::class);

$hideRatingSummary = (bool)$block->getData('hide_rating_summary');
$hideDetails = (bool)$block->getData('hide_details');

$sliderItemRenderer->setData('hide_details', $hideDetails);
$sliderItemRenderer->setData('hide_rating_summary', $hideRatingSummary);

// The slider item renderer block is often a shared instance.
// If a specific item template is set for this slider, the previously set template must be reset later
// so the item template is only replaced for the one slider it is specified on.
$sharedItemRendererTemplate = null;
$isSharedItemRenderer = $sliderItemRenderer !== $block->getChildBlock('slider.item.template');
if ($isSharedItemRenderer && $block->getChildBlock('slider.item.template')) {
    $sharedItemRendererTemplate = $sliderItemRenderer->getTemplate();
    $sliderSpecificItemTemplate = $block->getChildBlock('slider.item.template')->getTemplate();
    $sliderItemRenderer->setTemplate($sliderSpecificItemTemplate);
}

// 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 = 'md:w-1/2 lg:w-1/3 xl:w-1/4';

$sliderSectionClasses = $block->getData('maybe_purged_tailwind_section_classes') ?? 'my-6 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;
                }
            },
            skipCarouselToNavigation(navSelector) {
                const element = document.getElementById(navSelector)
                if (element) {
                    element.scrollIntoView({behavior: 'smooth', block: 'end'});
                    const button = element.querySelector('button:not([disabled])');
                    this.$nextTick(() => button && button.focus({preventScroll: true}))
                }
            }
        }
    }
</script>
<section
    class="px-3 2xl:container 3xl:max-w-screen-2xl <?= $escaper->escapeHtmlAttr($sliderSectionClasses) ?>"
    x-data="initSliderComponent()"
    x-init="calcPageSize();"
    x-id="['slider-nav', 'slider-desc', 'slider-id']"
    @resize.window.debounce="calcPageSize(); $nextTick( function() { calcActive() })"
    role="group"
    aria-roledescription="<?= $escaper->escapeHtmlAttr(__('Carousel')) ?>"
    aria-label="<?= $escaper->escapeHtmlAttr(__('Carousel %1', $title)) ?>"
    :aria-describedby="$id('slider-desc')"
    x-defer="intersect"
>
    <?php if ($items): ?>
        <div class="relative">
        <?php if ($title): ?>
            <div class="px-6 mx-auto mb-6">
            <<?= /* @noEscape */
        $headingTag ?> class="text-3xl font-bold font-inter text-black text-center">
            <?= $escaper->escapeHtml($heading); ?>
            </<?= /* @noEscape */
        $headingTag ?>>
            </div>
        <?php endif; ?>
        <span
            class="sr-only"
            :id="$id('slider-desc')"
            tabindex="-1"
        >
                <?= $escaper->escapeHtml(__('Navigating through the elements of the carousel is possible using the tab key. You can skip the carousel or go straight to carousel navigation using the skip links.')) ?>
            </span>

        <a
            href="#<?= $escaper->escapeHtmlAttr($name) ?>-slider-end"
            class="action skip sr-only focus:not-sr-only focus:absolute focus:z-30 focus:bg-white"
        >
            <?= $escaper->escapeHtml(__('Press to skip carousel')) ?>
        </a>
        <button
            x-show="itemCount > pageSize"
            type="button"
            class="action skip sr-only focus:not-sr-only focus:absolute focus:z-30 focus:bg-white"
            @click.prevent="skipCarouselToNavigation($id('slider-nav'))"
        >
            <?= $escaper->escapeHtml(__('Press to go to carousel navigation')) ?>
        </button>
        <div class="flex-none relative w-full ">
            <div class="relative flex flex-nowrap -mx-1 overflow-auto js_slides snap"
                 @scroll.debounce="calcActive"
            >
                <?php foreach ($items as $product): ?>
                    <div class="js_slide flex shrink-0 w-full p-1 shadow-md <?= $escaper->escapeHtmlAttr($slideItemClasses) ?>"
                         role="group"
                         aria-label="<?= $escaper->escapeHtmlAttr(__('Item %1', $sliderIndex++)) ?>"
                         :aria-describedby="`slide-desc-<?= $escaper->escapeHtmlAttr($product->getId()) ?>-${$id('slider-id')}`"
                    >
                        <?= /** @noEscape */
                        $productListItemViewModel->getItemHtmlWithRenderer(
                            $sliderItemRenderer,
                            $product,
                            $block,
                            $viewMode,
                            ProductReviewRenderer::SHORT_VIEW,
                            $imageDisplayArea,
                            $showDescription
                        ) ?>
                    </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 w-full flex-none <?= $escaper->escapeJs($slideItemClasses) ?>' : pageFillers > <?= (int)$i ?>
                        }"></div>
                <?php endfor; ?>
            </div>

            <div class="absolute z-10 top-1/2 w-full">
                <template x-if="itemCount > pageSize">
                    <div
                        class="flex items-center justify-center"
                        :id="$id('slider-nav')"
                    >
                        <button
                            type="button"
                            aria-label="<?= $escaper->escapeHtmlAttr(__('Previous slide')) ?>"
                            :disabled="active === 0"
                            class="left-2 absolute p-2.5 rounded-full transition bg-white text-primary shadow "
                            :class="{ 'opacity-25 pointer-events-none' : active === 0 }"
                            @click="scrollPrevious"
                        >
                            <?= /** @noEscape */$heroicons->arrowLeftHtml() ?>
                        </button>
                        <div class="flex flex-wrap w-full md:w-auto justify-center hidden">
                            <?php for ($i = 0; $i < $itemCount; $i++): ?>
                                <button
                                    type="button"
                                    :class="{
                                    'hidden': (pageSize !== 1 && !!(<?= (int)$i ?> % pageSize))
                                }"
                                    :aria-current="active === <?= (int)$i ?>"
                                    :aria-label="hyva.str('<?= $escaper->escapeJs(__('Display slide %1')) ?>', (<?= (int)$i ?> / pageSize) + 1)"
                                    @click="scrollTo(<?= (int)$i ?>)"
                                >
                            <span
                                class="shrink-0 block w-3 h-3 m-4 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>
                                </button>
                            <?php endfor; ?>
                        </div>
                        <button
                            aria-label="<?= $escaper->escapeHtmlAttr(__('Next slide')) ?>"
                            :disabled="active >= itemCount-pageSize"
                            class="right-2 absolute p-2.5 rounded-full transition bg-white text-primary shadow "
                            :class="{ 'opacity-25 pointer-events-none' : active >= itemCount-pageSize }"
                            @click="scrollNext"
                        >
                            <?= /** @noEscape */ $heroicons->arrowRightHtml() ?>

                        </button>
                    </div>
                </template>
            </div>
        </div>
        <span id="<?= $escaper->escapeHtmlAttr($name) ?>-slider-end" tabindex="-1"></span>
        </div>
    <?php endif; ?>

</section>
<?php

if ($sharedItemRendererTemplate) {
    $sliderItemRenderer->setTemplate($sharedItemRendererTemplate);
}

?>
