<?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\CurrentProduct;
use Hyva\Theme\ViewModel\Navigation;
use Hyva\Theme\ViewModel\StoreConfig;
use Magento\Catalog\ViewModel\Product\Breadcrumbs;
use Magento\CatalogUrlRewrite\Model\ProductUrlPathGenerator;
use Magento\Framework\Escaper;
use Magento\Theme\Block\Html\Breadcrumbs as BreadcrumbsBlock;

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

$storeConfigViewModel = $viewModels->require(StoreConfig::class);
$breadcrumbsViewModel = $viewModels->require(Breadcrumbs::class);
$navigationViewModel = $viewModels->require(Navigation::class);
$currentProductViewModel = $viewModels->require(CurrentProduct::class);

$productUrlSuffix = $storeConfigViewModel->getStoreConfig(ProductUrlPathGenerator::XML_PATH_PRODUCT_URL_SUFFIX);
$categoryUrlSuffix = $breadcrumbsViewModel->getCategoryUrlSuffix();

// Modules may disable the rendering of application/ld+json BreadcrumbList by setting this flag in layout XML
$skipLinkedDataJsonSchema = $block->getData('skip_ld_json_schema');

$product = $currentProductViewModel->exists() ? $currentProductViewModel->get() : null;

?>
<nav class="breadcrumbs bg-surface shadow-sm" aria-label="Breadcrumb">
    <div class="container">
        <ol
            x-data="initBreadcrumbsProduct()"
            class="items list-reset -mx-3 py-4 rounded flex flex-nowrap text-grey text-sm overflow-x-auto relative"
        >
            <li
                class="shrink-0 sticky inset-y-0 left-0 w-3 bg-gradient-to-r from-surface"
                aria-hidden="true"
            >&ZeroWidthSpace;</li>
            <template x-for="item in breadcrumbs">
                <li class="item inline-flex whitespace-nowrap">
                    <template x-if="item.name !== 'home'">
                        <span aria-hidden="true" class="separator text-fg-secondary px-2">/</span>
                    </template>
                    <template x-if="item.name === 'product'">
                        <a :href="item.link" class="text-fg-secondary" aria-current="page" x-text="item.label"></a>
                    </template>
                    <template x-if="item.name !== 'product'">
                        <a :href="item.link" :aria-label="item.title" x-text="item.label"></a>
                    </template>
                </li>
            </template>
            <li
                class="shrink-0 sticky inset-y-0 right-0 w-3 bg-gradient-to-l from-surface"
                aria-hidden="true"
            >&ZeroWidthSpace;</li>
        </ol>
    </div>
</nav>
<script>
    function initBreadcrumbsProduct() {

        const categories = <?= /** @noEscape */ json_encode($navigationViewModel->getCategories()) ?>;

        const breadcrumbs = [{
            name: 'home',
            label: '<?= $escaper->escapeJs(__('Home')) ?>',
            title: '<?= $escaper->escapeJs(__('Go to Home Page')) ?>',
            link: BASE_URL || ''
        }];

        function getProductCategoryUrl() {
            <?php if ($breadcrumbsViewModel->isCategoryUsedInProductUrl()): ?>
            const productUrl = window.location.href.split('?')[0];
            return productUrl.substring(0, productUrl.lastIndexOf('/')) + '<?= $escaper->escapeJs($categoryUrlSuffix) ?>';
            <?php else: ?>
            return document.referrer.split('?')[0]
            <?php endif; ?>
        }

        const categoryUrl = getProductCategoryUrl();

        const category = Object.values(categories).find(cat => cat.url === categoryUrl);

        if (category) {
            let parts = category.path.split('/');
            // remove root category
            parts.splice(0, 2)
            for (let i in parts) {
                breadcrumbs.push({
                    name: 'category',
                    label: categories['c' + parts[i]]['name'],
                    title: null,
                    link: categories['c' + parts[i]]['url']
                });
            }
        }

        // add current product to breadcrumbs
        <?php if ($product): ?>
        breadcrumbs.push({
            name: 'product',
            label: '<?= $escaper->escapeJs($product->getName()) ?>',
            title: null,
            link: BASE_URL + '<?= $escaper->escapeJs($product->getUrlKey()) ?>' + '<?= $escaper->escapeJs($productUrlSuffix) ?>'
        });
        <?php endif; ?>

        <?php if (! $skipLinkedDataJsonSchema): ?>
        function addJsonBreadcrumbsHead(breadcrumbs) {
            const script = document.createElement('script');
            script.type = 'application/ld+json';

            const itemListElement = breadcrumbs.map((crumb, i) => {
                return {
                    "@type": "ListItem",
                    "position": i + 1,
                    "name": crumb.label,
                    "item": crumb.link
                }
            });

            script.appendChild(document.createTextNode(JSON.stringify({
                "@context": "https://schema.org",
                "@type": "BreadcrumbList",
                "itemListElement": itemListElement
            })));

            document.head.appendChild(script);
        }

        addJsonBreadcrumbsHead(breadcrumbs);
        <?php endif; ?>

        return {breadcrumbs};
    }
</script>
