<?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
 */

use Hyva\Theme\Model\ViewModelRegistry;
use Hyva\Theme\ViewModel\HeroiconsSolid;
use Hyva\Theme\ViewModel\Navigation;
use Magento\Framework\View\Element\Template;
use Magento\Framework\Escaper;

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

/** @var Navigation $viewModelNavigation */
$viewModelNavigation = $viewModels->require(Navigation::class);

/** @var HeroiconsSolid $heroiconsSolid */
$heroiconsSolid = $viewModels->require(HeroiconsSolid::class);

$uniqueId = '_' . uniqid();

// Order is important here: 1. build the menu data, 2. then set the cache tags from the view model identities
$menuItems = $viewModelNavigation->getNavigation(4);
$block->setData('cache_tags', $viewModelNavigation->getIdentities());

?>
<div x-data="initMenuDesktop<?= $escaper->escapeHtml($uniqueId) ?>()"
     class="order-6 navigation hidden lg:flex lg:w-full"
>
    <!-- desktop -->
    <div x-ref="nav-desktop"
         @load.window="setActiveMenu($el)"
         class="hidden lg:block lg:min-h-0 lg:w-full lg:pt-0 lg:mt-4">
        <nav
            class="container w-full duration-150 ease-in-out transform flex justify-start
            w-auto min-h-0 transition-display justify-center"
        >
            <?php foreach ($menuItems as $index => $menuItem): ?>
                <div class="level-0"
                     @mouseenter="hoverPanelActiveId = '<?= /* @noEscape */ (string) $index ?>'"
                     @mouseleave="hoverPanelActiveId = 0"
                >
                    <span class="flex items-center block text-md">
                        <a class="w-full text-base level-0 py-2 px-4 hover:bg-container uppercase font-semibold"
                           href="<?= $escaper->escapeUrl($menuItem['url']) ?>"
                           title="<?= $escaper->escapeHtmlAttr($menuItem['name']) ?>"
                        >
                            <?= $escaper->escapeHtml($menuItem['name']) ?>
                        </a>
                    </span>
                    <?php if (!empty($menuItem['childData'])): ?>
                        <div
                            class="fixed left-0 w-full z-10 hidden px-6 py-4 shadow-lg bg-container"
                            :class="{
                                'hidden' : hoverPanelActiveId !== '<?= /* @noEscape */ (string) $index ?>',
                                'block' : hoverPanelActiveId === '<?= /* @noEscape */ (string) $index ?>'
                            }">
                            <?php foreach ($menuItem['childData'] as $subMenuItem): ?>
                                <a href="<?= $escaper->escapeUrl($subMenuItem['url']) ?>"
                                   title="<?= $escaper->escapeHtmlAttr($subMenuItem['name']) ?>"
                                   class="block w-full px-3 py-1 my-1 whitespace-nowrap first:mt-0 hover:underline"
                                >
                                    <span class="text-base text-gray-700">
                                        <?= $escaper->escapeHtml($subMenuItem['name']) ?>
                                    </span>
                                </a>
                            <?php endforeach; ?>
                        </div>
                    <?php endif; ?>
                </div>
            <?php endforeach; ?>
        </nav>
    </div>
</div>
<script>
    'use strict';

    const initMenuDesktop<?= $escaper->escapeHtml($uniqueId) ?> = () => {
        return {
            hoverPanelActiveId: null,
            setActiveMenu(menuNode) {
                Array.from(menuNode.querySelectorAll('a')).filter(link => {
                    return link.href === window.location.href.split('?')[0];
                }).map(item => {
                    item.classList.add('underline');
                    item.closest('div.level-0') &&
                    item.closest('div.level-0').querySelector('a.level-0').classList.add('underline');
                });
            }
        }
    }
</script>
