<?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);
?>

<script>
function compareSidebarFetchHandler(postUrl, postHeaders, isSingleItem = true) {
    const messages = {
        "success": isSingleItem
            ? "<?= $escaper->escapeHtml(__("You removed product %1 from the comparison list", __("Product"))) ?>"
            : "<?= $escaper->escapeHtml(__("You removed all products from the comparison list")) ?>",
        "warning": isSingleItem
            ? "<?= $escaper->escapeHtml(__('Could not remove item from compare.')) ?>"
            : "<?= $escaper->escapeHtml(__('Could not remove all item from compare.')) ?>",
    }

    return fetch(postUrl, postHeaders).then(function (response) {
        if (response.redirected) {
            window.location.href = response.url;
        } else if (response.ok) {
            return response.json();
        } else {
            typeof window.dispatchMessages !== "undefined" && window.dispatchMessages(
                [{ type: "warning", text: messages.warning }], 5000
            );
        }
    }).then(function (response) {
        if (!response) return;
        typeof window.dispatchMessages !== "undefined" && window.dispatchMessages(
            [{
                type: (response.success) ? "success" : "error",
                text: (response.success) ? messages.success : response.error_message
            }], 5000
        );
        let reloadCustomerDataEvent = new CustomEvent("reload-customer-section-data");
        window.dispatchEvent(reloadCustomerDataEvent);
    }).catch(function (error) {
        typeof window.dispatchMessages !== "undefined" && window.dispatchMessages(
            [{ type: "error", text: error }], 5000
        );
    });
}

function initCompareOnCompareSidebar() {
    return {
        compareProducts: null,
        itemCount: 0,
        compareItems: {},
        receiveCompareData: function (data) {
            if (data['compare-products']) {
                this.compareProducts = data['compare-products'];
                this.itemCount = this.compareProducts.count;
                this.compareItems = this.compareProducts.items;
            }
        },
        removeFromCompare: function(productId) {
            const formKey = hyva.getFormKey();
            const postUrl = BASE_URL + 'catalog/product_compare/remove/';
            const confirmMessage = "<?= $escaper
                ->escapeHtml(__('Are you sure you want to remove this item from your Compare Products list?')) ?>";
            if (!window.confirm(confirmMessage)) return;
            const postHeaders = {
                "headers": {
                    "content-type": "application/x-www-form-urlencoded; charset=UTF-8",
                },
                "body": "form_key=" + formKey + "&product=" + productId + "&uenc=" + hyva.getUenc(),
                "method": "POST",
                "mode": "cors",
                "credentials": "include"
            };

            compareSidebarFetchHandler(postUrl, postHeaders);
        }
    }
}

function initCompareSidebarClear() {
    return {
        clearCompare: function() {
            const formKey = hyva.getFormKey();
            const postUrl = BASE_URL + 'catalog/product_compare/clear/';
            const confirmMessage = "<?= $escaper
                ->escapeHtml(__('Are you sure you want to remove all items from your Compare Products list?')) ?>";
            if (!window.confirm(confirmMessage)) return;
            const postHeaders = {
                "headers": {
                    "content-type": "application/x-www-form-urlencoded; charset=UTF-8",
                },
                "body": "form_key=" + formKey + "&uenc=" + hyva.getUenc(),
                "method": "POST",
                "mode": "cors",
                "credentials": "include"
            };

            compareSidebarFetchHandler(postUrl, postHeaders, isSingleItem = false);
        }
    }
}
</script>

<div x-data="initCompareOnCompareSidebar()"
     @private-content-loaded.window="receiveCompareData($event.detail.data)"
     class="compare-widget"
>
    <template x-if="itemCount">
        <div class="mt-8">
            <h2 class="border-t border-gray-300 mb-6 pt-5 font-semibold text-lg"
                id="compare-sidebar"
            >
                <?= $escaper->escapeHtml(__('Compare Products')) ?>
            </h2>
            <ul role="list" class="my-4" aria-labelledby="compare-sidebar">
                <template x-for="product in compareItems">
                    <li class="flex items-start mb-4">
                        <a
                            :href="product.product_url"
                            class="block mb-3 w-10 h-10 shrink-0 mr-4"
                            aria-hidden="true"
                            tabindex="-1"
                        >
                            <img
                                :src="product.image"
                                alt=""
                                loading="lazy"
                            >
                        </a>
                        <strong class="mr-2 text-sm leading-6 font-normal">
                            <a :href="product.product_url" :title="product.name" x-html="product.name"></a>
                        </strong>
                        <button
                            type="button"
                            @click.prevent="removeFromCompare(product.id)"
                            :aria-label="hyva.str('<?= $escaper->escapeJs(__('Remove product "%1" from the comparison')) ?>', product.name)"
                            class="p-1 inline-flex shrink-0 items-center justify-center text-slate-400
                                   hover:text-slate-800 ml-auto"
                        >
                            <?= $heroicons->xHtml('', 24, 24, ['aria-hidden' => 'true']); ?>
                        </button>
                    </li>
                </template>
            </ul>
            <div class="flex flex-wrap items-center md:mt-5 gap-2 text-sm">
                <a href="<?= $escaper->escapeUrl($block->getUrl('catalog/product_compare/index')) ?>"
                    title="<?= $escaper->escapeHtmlAttr(__('Compare Products')); ?>"
                    class="btn btn-secondary text-sm">
                    <span><?= $escaper->escapeHtml(__('Compare')); ?></span>
                </a>
                <button x-data="initCompareSidebarClear()"
                    @click.prevent="clearCompare()"
                    aria-label="<?= $escaper->escapeHtmlAttr(__('Remove all Products')) ?>"
                    class="btn text-sm shadow-none bg-transparent text-inherit">
                    <span><?= $escaper->escapeHtml(__('Remove All')); ?></span>
                </button>
            </div>
        </div>
    </template>
</div>
