<?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\HyvaCsp;
use Hyva\Theme\ViewModel\LucideIcons;
use Magento\Framework\Escaper;
use Magento\Framework\View\Element\Template;

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

/** @var LucideIcons $lucideIcons */
$lucideIcons = $viewModels->require(LucideIcons::class);
?>

<a
    id="compare-link"
    class="relative hidden md:inline-flex btn bg-transparent border-transparent p-1 invisible"
    :class="hiddenIfEmpty"
    href="<?= $escaper->escapeUrl($block->getUrl('catalog/product_compare/index')) ?>"
    title="<?= $escaper->escapeHtmlAttr(__('Compare Products')) ?>"
    x-data="initCompareHeader"
    @private-content-loaded.window="receiveCompareData"
    :aria-label="linkAriaLabel"
>
    <?= $lucideIcons->scaleHtml('', 24, 24, ["aria-hidden" => "true"]) ?>
    <span
        x-text="itemCount"
        class="absolute -top-1.5 -right-1.5 px-2 py-1 rounded-full bg-primary text-on-primary
            text-xs font-semibold leading-none text-center uppercase tabular-nums"
        aria-hidden="true"
    ></span>
</a>

<script>
    function initCompareHeader() {
        return {
            compareProducts: null,
            itemCount: 0,
            hiddenIfEmpty() {
                return {
                    'invisible': this.itemCount < 1
                }
            },
            linkAriaLabel() {
                const countLabel = this.itemCount > 1
                    ? hyva.str('<?= $escaper->escapeJs(__('%1 Items')) ?>', this.itemCount)
                    : hyva.str('<?= $escaper->escapeJs(__('%1 Item')) ?>', this.itemCount);
                return `<?= $escaper->escapeJs(__('Compare Products')) ?> (${countLabel})`;
            },
            receiveCompareData() {
                const data = this.$event.detail.data;
                if (data['compare-products'] && data['compare-products'].count) {
                    this.compareProducts = data['compare-products'];
                    this.itemCount = this.compareProducts.count;
                }
            },
            itemCountLabel() {
                return `(${this.itemCount})`;
            }
        }
    }

    window.addEventListener('alpine:init', () => {
        Alpine.data('initCompareHeader', initCompareHeader);
    }, { once: true })
</script>
<?php $hyvaCsp->registerInlineScript() ?>
