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

declare(strict_types=1);

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

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

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

$blockId = $block->getBlockId() ?: 'collapsible';
$blockClass = $block->getBlockCss();
$blockTitle = $block->getBlockTitle() ?: __('Details');
$isNav = $block->getIsNav() !== null ? $block->getIsNav() : false;
?>

<div class="card py-2 px-8 mb-6 <?= $escaper->escapeHtmlAttr($blockClass) ?>"
     x-data="initAccountNavigation()"
     x-init="checkIsMobileResolution()"
     @resize.window.debounce="checkIsMobileResolution()"
     @visibilitychange.window.debounce="checkIsMobileResolution()"
>
    <button
        type="button"
        id="<?= $escaper->escapeHtmlAttr($blockId) ?>-title"
        class="group py-2 flex justify-between items-center w-full"
        @click="blockOpen = !blockOpen"
        :aria-expanded="blockOpen"
        :aria-disabled="!isMobile"
        :disabled="!isMobile ? '' : null"
    >

        <span class="text-lg">
            <?= $escaper->escapeHtml($blockTitle) ?>
        </span>
        <span
            class="px-1 py-1 border rounded border-gray-300 md:hidden"
            x-ref="AccountNavigationMobileToggleIcon"
        >
            <?= $heroicons->chevronDownHtml(
                'transition-transform duration-300 ease-in-out transform group-aria-expanded:rotate-180',
                24,
                24,
                ['aria-hidden' => 'true']
            ); ?>
        </span>
    </button>
    <?php if ($isNav): ?>
        <nav
            id="<?= $escaper->escapeHtmlAttr($blockId) ?>"
            aria-labelledby="<?= $escaper->escapeHtmlAttr($blockId) ?>-title"
            class="hidden md:block border-t pt-3 my-2 border-gray-300"
            :class="{ 'hidden': !blockOpen }"
        >
            <?= $block->getChildHtml() ?>
        </nav>
    <?php else: ?>
        <div
            id="<?= $escaper->escapeHtmlAttr($blockId) ?>"
            class="hidden md:block border-t pt-3 my-2 border-gray-300"
            :class="{ 'hidden': !blockOpen }"
        >
            <?= $block->getChildHtml() ?>
        </div>
    <?php endif; ?>
</div>
<script>
    function initAccountNavigation() {
        return {
            isMobile: false,
            blockOpen: false,
            checkIsMobileResolution() {
                const mobileElement = this.$refs.AccountNavigationMobileToggleIcon;
                this.isMobile = mobileElement
                    ? getComputedStyle(mobileElement).display !== 'none'
                    : window.matchMedia('(max-width: 767px)').matches; // Fallback to `md` breakpoint
            }
        }
    }
</script>
