<?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 Magento\Framework\Escaper;
use Magento\LayeredNavigation\Block\Navigation;

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

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

/** @var HeroiconsOutline $heroicons */
$heroicons = $viewModels->require(HeroiconsOutline::class);
?>
<?php if ($block->canShowBlock()): ?>
    <div
        x-data="initLayeredNavigation()"
        x-init="checkIsMobileResolution()"
        @resize.window.debounce="checkIsMobileResolution()"
        @visibilitychange.window.debounce="checkIsMobileResolution()"
        class="block md:border-0 bg-header-darker  md:bg-white md:py-0 md:px-0 md:my-6"
        role="region"
        aria-label="<?= $escaper->escapeHtmlAttr(__('Product filters')) ?>"
    >
        <div class="relative py-4 md:py-0">
            <h2
                id="filters-heading"
                class="block-title"
            >
                <button
                    type="button"
                    @click="blockOpen = !blockOpen"
                    class="block-title flex items-center justify-between w-full text-start focus-visible:outline-none focus-visible:ring-0"
                    aria-controls="filters-content"
                    :aria-expanded="blockOpen"
                    :aria-disabled="!isMobile"
                    :disabled="!isMobile ? '' : null"
                >
                <span class="text-primary-darker text-base lg:text-2xl font-bold px-2 lg:px-4 font-sen hidden md:block">
                    <?= $escaper->escapeHtml(__('Filter by')) ?>
                </span>
                    <span
                        class="py-1 px-1 ml-2 md:hidden"
                        x-ref="LayeredNavigationMobileToggleIcon"
                    >
                    <svg  xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" class="transition-transform transform duration-300 ease-in-out w-6 my-2 text-primary-darker" role="img">
                        <path d="M0.75 4.23089H12.169C12.5131 5.7974 13.9121 6.97345 15.5805 6.97345C17.2488 6.97345 18.6478 5.79745 18.9919 4.23089H23.25C23.6642 4.23089 24 3.89508 24 3.48089C24 3.0667 23.6642 2.73089 23.25 2.73089H18.9915C18.6467 1.16517 17.2459 -0.0116272 15.5805 -0.0116272C13.9141 -0.0116272 12.5139 1.16498 12.1693 2.73089H0.75C0.335812 2.73089 0 3.0667 0 3.48089C0 3.89508 0.335812 4.23089 0.75 4.23089ZM13.588 3.48286L13.588 3.47479C13.5913 2.37947 14.4851 1.48842 15.5805 1.48842C16.6743 1.48842 17.5681 2.37825 17.5728 3.47306L17.573 3.48408C17.5712 4.58128 16.6781 5.4735 15.5805 5.4735C14.4833 5.4735 13.5904 4.58217 13.5879 3.48562L13.588 3.48286ZM23.25 19.7691H18.9915C18.6467 18.2034 17.2459 17.0265 15.5805 17.0265C13.9141 17.0265 12.5139 18.2032 12.1693 19.7691H0.75C0.335812 19.7691 0 20.1048 0 20.5191C0 20.9333 0.335812 21.2691 0.75 21.2691H12.169C12.5131 22.8356 13.9121 24.0116 15.5805 24.0116C17.2488 24.0116 18.6478 22.8356 18.9919 21.2691H23.25C23.6642 21.2691 24 20.9333 24 20.5191C24 20.1048 23.6642 19.7691 23.25 19.7691ZM15.5805 22.5116C14.4833 22.5116 13.5904 21.6203 13.5879 20.5237L13.588 20.521L13.588 20.513C13.5913 19.4176 14.4851 18.5265 15.5805 18.5265C16.6743 18.5265 17.5681 19.4164 17.5728 20.5111L17.573 20.5222C17.5714 21.6195 16.6782 22.5116 15.5805 22.5116ZM23.25 11.25H11.831C11.4869 9.68348 10.0879 8.50748 8.41955 8.50748C6.75117 8.50748 5.35223 9.68348 5.00808 11.25H0.75C0.335812 11.25 0 11.5858 0 12C0 12.4142 0.335812 12.75 0.75 12.75H5.00845C5.35331 14.3157 6.75413 15.4925 8.41955 15.4925C10.0859 15.4925 11.4861 14.3159 11.8307 12.75H23.25C23.6642 12.75 24 12.4142 24 12C24 11.5858 23.6642 11.25 23.25 11.25ZM10.412 11.998L10.412 12.0061C10.4087 13.1014 9.51492 13.9925 8.41955 13.9925C7.32572 13.9925 6.43191 13.1026 6.42717 12.0079L6.42703 11.9969C6.42867 10.8996 7.32188 10.0075 8.41955 10.0075C9.5167 10.0075 10.4096 10.8988 10.4121 11.9954L10.412 11.998Z" fill="#004472"></path>
                    </svg>
                </span>
                </button>
            </h2>
            <div  id="filters-content"
                  class="block-content filter-content hidden md:block p-4 lg:p-3 xl:p-6 bg-white"
                  :class="{ 'hidden': !blockOpen }" >
                <?= $block->getChildHtml('state') ?>
                <a
                    href="#product-list"
                    class="sr-only focus:not-sr-only bg-blue-600 text-white px-12 py-4 text-center block rounded-sm"
                >
                    <?= $escaper->escapeHtml(__('Skip to product list')) ?>
                </a>
                <?php
                $allowedFilters = ['Category', 'Price', 'Brand', 'Colour'];

                foreach ($block->getFilters() as $filter): ?>
                    <?php if ($filter->getItemsCount()):
                        $filterName = $filter->getName();
                        if (!in_array($filterName, $allowedFilters, true)) {
                            continue;
                        }
                        ?>

                        <div
                            x-data="{

                            id: $id('filter-option')
                        }"
                            x-defer="intersect"
                            class="border-b-2 card filter-option px-0 shadow-none "
                        >
                            <h3 :id="`${id}-title`">
                                <button
                                    type="button"
                                    @click="open = !open"
                                    class="filter-options-title flex justify-between items-center cursor-pointer text-start  border-container w-full focus-visible:outline-none focus-visible:ring-0"
                                    :class="{ 'border-b pb-4': open }"
                                    :aria-controls="`${id}-content`"
                                    :aria-expanded="open"
                                >
                                <span class="title text-sm md:text-base font-semibold font-sen text-primary-darker">
                                    <?= $escaper->escapeHtml(__($filter->getName())) ?>
                                    <span class="sr-only"> <?= $escaper->escapeHtml(__('filter')) ?></span>
                                </span>
                                    <span class="py-1 px-1 rounded">
                                    <?= $heroicons->chevronDownHtml(
                                        'transition-transform transform duration-300 ease-in-out text-primary-darker',
                                        24,
                                        24,
                                        [
                                            ":class" => "{ 'rotate-180': open }",
                                            "aria-hidden" => "true",
                                            "focusable" => "false"
                                        ]
                                    ); ?>
                                </span>
                                </button>
                            </h3>
                            <template x-if="open">
                                <div
                                    :id="`${id}-content`"
                                    class="filter-options-content pt-3 lg:max-h-[200px] overflow-auto"
                                >
                                    <?= /* @noEscape */ $block->getChildBlock('renderer')->setFilterTitle($filter->getName())->render($filter); ?>
                                </div>
                            </template>
                        </div>
                    <?php endif; ?>
                <?php endforeach; ?>
            </div>
        </div>
    </div>
    <script>
        function initLayeredNavigation() {
            return {
                open: false,
                isMobile: false,
                blockOpen: false,
                checkIsMobileResolution() {
                    const mobileElement = this.$refs.LayeredNavigationMobileToggleIcon;
                    this.isMobile = mobileElement
                        ? getComputedStyle(mobileElement).display !== "none"
                        : window.matchMedia('(max-width: 767px)').matches; // Fallback to `md` breakpoint
                }
            }
        }
    </script>
<?php endif; ?>
