<?php
/**
 * BSS Commerce Co.
 *
 * NOTICE OF LICENSE
 *
 * This source file is subject to the EULA
 * that is bundled with this package in the file LICENSE.txt.
 * It is also available through the world-wide-web at this URL:
 * http://bsscommerce.com/Bss-Commerce-License.txt
 *
 * @category  BSS
 * @package   Bss_AjaxCart
 * @author    Extension Team
 * @copyright Copyright (c) 2022 BSS Commerce Co. ( http://bsscommerce.com )
 * @license   http://bsscommerce.com/Bss-Commerce-License.txt
 */

use Hyva\Theme\Model\ViewModelRegistry;
use Magento\Framework\Escaper;
use Magento\Wishlist\Block\Customer\Wishlist\Item\Column\Cart;
use Magento\Wishlist\Model\Item;
use Magento\Wishlist\ViewModel\AllowedQuantity;
use Hyva\BssAjaxCart\ViewModels\Helper as ModuleViewModel;
use Hyva\Theme\ViewModel\HeroiconsOutline;
use Hyva\Theme\ViewModel\SvgIcons;

/** @var SvgIcons $hyvaicons */
/** @var Cart $block */
/** @var Escaper $escaper */
/** @var ViewModelRegistry $viewModels */
/** @var HeroiconsOutline $heroicons */

/** @var Item $item */
$item = $block->getItem();
$product = $item->getProduct();
/** @var AllowedQuantity $viewModel */
$viewModel = $viewModels->require(AllowedQuantity::class);
$allowedQty = $viewModel->setItem($item)->getMinMaxQty();
$moduleViewModel = $viewModels->require(ModuleViewModel::class);
$helperAjaxCart = $moduleViewModel->getHelper();
$heroicons = $viewModels->require(HeroiconsOutline::class);
$hyvaicons = $viewModels->require(SvgIcons::class);
$uniqueId = "_" . uniqid();
?>
<?php foreach ($block->getChildNames() as $childName): ?>
    <?= /* @noEscape */ $block->getLayout()->renderElement($childName, false) ?>
<?php endforeach;?>
<div class="box-tocart">
    <fieldset class="fieldset">
        <?php if ($item->canHaveQty() && $product->isVisibleInSiteVisibility()): ?>
            <div class="field qty">
                <label class="label"
                       for="qty[<?= $escaper->escapeHtmlAttr($item->getId()) ?>]">
                <span>
                    <?= $escaper->escapeHtml(__('Qty')) ?>
                </span>
                </label>
                <div class="control">
                    <input type="number"
                           x-ref="product-qty-<?= $escaper->escapeHtmlAttr($item->getId()) ?>"
                           data-role="qty"
                           id="qty[<?= $escaper->escapeHtmlAttr($item->getId()) ?>]"
                           class="form-input qty"
                           name="qty[<?= $escaper->escapeHtmlAttr($item->getId()) ?>]"
                           value="<?= /* @noEscape */ $block->getAddToCartQty($item) * 1 ?>"
                        <?= $product->isSaleable() ? '' : 'disabled="disabled"' ?>
                    >
                </div>
            </div>
        <?php endif; ?>
        <?php if ($product->isSaleable()): ?>
            <div class="product-item-actions">
                <div class="actions-primary">
                    <?php if ($helperAjaxCart->isEnabled()): ?>
                        <script>
                            'use strict';

                            function initAjaxCart<?= $escaper->escapeHtmlAttr($uniqueId) ?>() {
                                return {
                                    isLoading: false,
                                    flyToCart: <?= $moduleViewModel->getConfigFlyToCart()?>,
                                    action: "<?= $escaper->escapeJs($block->getUrl('ajaxcart')) ?>",
                                    productId: <?= $product->getId() ?>,
                                    getOffset(element) {
                                        if (!element.getClientRects().length) {
                                            return { top: 0, left: 0 };
                                        }
                                        var rect = element.getBoundingClientRect();
                                        var win = element.ownerDocument.defaultView;
                                        return ({
                                            top: rect.top + win.pageYOffset,
                                            left: rect.left + win.pageXOffset
                                        });
                                    },
                                    ajaxFlyToCart(element) {
                                        var speed = this.flyToCart.speed,
                                            transparent = this.flyToCart.transparent,
                                            miniCart = document.getElementById('menu-cart-icon'),
                                            imgElement = element.querySelector('.product-item-photo img');

                                        var imgclone = imgElement.cloneNode();
                                        imgclone.style.top = this.getOffset(imgElement).top + 'px';
                                        imgclone.style.left = this.getOffset(imgElement).left + 'px';
                                        imgclone.style.height = imgElement.offsetHeight + 'px';
                                        imgclone.style.width  = imgElement.offsetWidth + 'px';
                                        imgclone.className = 'clone-image';
                                        document.body.appendChild(imgclone);
                                        var translateX = this.getOffset(miniCart).left - this.getOffset(imgclone).left;
                                        var translateY = this.getOffset(miniCart).top - this.getOffset(imgclone).top;

                                        imgclone.style.height = "30px";
                                        imgclone.style.width = "30px";
                                        imgclone.style.transform = `translate(${translateX}px,${translateY}px)`;
                                        imgclone.style.transition = `all ${speed}s`;
                                        if (transparent) {
                                            imgclone.style.opacity = "0.5";
                                        }

                                        setTimeout(function () {
                                            imgclone.remove();
                                        }, (parseInt(speed) + 0.5)*1000);

                                    },
                                    addToCartSubmit() {
                                        var self = this;
                                        const form = this.$el.closest('.product-item-info');
                                        this.isLoading = true;

                                        if (this.flyToCart.enable == 1) {
                                            setTimeout(function () {
                                                self.isLoading = false;
                                                self.ajaxFlyToCart(form);
                                            }, 1000);
                                        }

                                        let postData = {};
                                        if (!postData?.form_key) {
                                            postData.form_key = hyva.getFormKey();
                                        }
                                        var qtyElement = form.querySelector('.form-input.qty');
                                        postData.qty = qtyElement.value;
                                        postData.id = this.productId;
                                        var requestConfigs = {
                                            method: "POST",
                                            headers: {
                                                'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
                                                'X-Requested-With': 'XMLHttpRequest'
                                            },
                                            mode: 'cors',
                                            credentials: 'include',
                                            dataType: 'json',
                                            body: new URLSearchParams(postData)
                                        };
                                        const addToCartRequesting = fetch(this.action, requestConfigs);
                                        addToCartRequesting
                                            .then(response => responseSerialize(response))
                                            .then(response => {
                                                if (response.backUrl) {
                                                    window.location.href = response.backUrl;
                                                } else if (response?.messages && !response.view) {
                                                    response.messages.map((msg) => {
                                                        if (msg.type !== 'error') {
                                                            return null;
                                                        }
                                                        window.dispatchMessages([
                                                            {
                                                                type: msg.type,
                                                                text: msg.text
                                                            }
                                                        ], 3000);
                                                    });
                                                } else if (response.error && response.view) {
                                                    this.isLoading = false;
                                                    window.dispatchEvent(
                                                        new CustomEvent(
                                                            "ajax-cart-popup-iframe",
                                                            {
                                                                detail: {
                                                                    open: true,
                                                                    url: response.url,
                                                                }
                                                            }
                                                        )
                                                    );
                                                } else if (response.popup) {
                                                    const popupContent = document.getElementById("popup-content");
                                                    popupContent.textContent ="";
                                                    popupContent.insertAdjacentHTML("beforeend", response.popup);
                                                    let scripts = popupContent.getElementsByTagName("script");
                                                    while (scripts.length) {
                                                        const script = scripts[0];
                                                        script.parentNode.removeChild(script);
                                                        const newScript = document.createElement("script");
                                                        newScript.setAttribute('type', 'text/javascript');

                                                        const scriptId = script.getAttribute('id');
                                                        if (scriptId) {
                                                            const existedSript = document.getElementById(scriptId);
                                                            if (existedSript) {
                                                                continue;
                                                            }
                                                            newScript.setAttribute('id', scriptId);
                                                        }
                                                        if (script.src) {
                                                            newScript.src = script.src;
                                                        } else if (script.textContent) {
                                                            newScript.textContent = script.textContent;
                                                        } else if (script.innerText) {
                                                            newScript.innerText = script.innerText;
                                                        }
                                                        document.body.appendChild(newScript);
                                                    }

                                                    this.isLoading = false;
                                                    window.dispatchEvent(new CustomEvent("ajax-cart-popup"));

                                                }
                                                window.dispatchEvent(new CustomEvent("reload-customer-section-data"));
                                            }).catch(err => {
                                            window.dispatchMessages([
                                                {
                                                    type: 'error',
                                                    text: err
                                                }
                                            ], 3000);
                                        });
                                        return false;
                                    }
                                }
                            }
                        </script>
                        <button
                            type="button" x-cloak
                            x-data="initAjaxCart<?= $escaper->escapeHtmlAttr($uniqueId) ?>()"
                            form="product_addtocart_form"
                            title="<?= $escaper->escapeHtmlAttr(__('Add to Cart')) ?>"
                            class="action tocart primary btn btn-primary"
                            @click.prevent="addToCartSubmit()"
                        >
                            <div class="flex flex-row justify-center items-center w-full h-full fixed select-none"
                                 style="left: 50%;top: 50%;transform: translateX(-50%) translateY(-50%);background: rgba(255,255,255,0.7);"
                                 x-show="isLoading"
                                 x-transition:enter="ease-out duration-200"
                                 x-transition:enter-start="opacity-0"
                                 x-transition:enter-end="opacity-100"
                                 x-transition:leave="ease-in duration-200"
                                 x-transition:leave-start="opacity-100"
                                 x-transition:leave-end="opacity-0">
                                <?= $hyvaicons->loaderHtml('text-primary', 57, 57); ?>
                                <div class="ml-10 text-primary text-xl">
                                    <?= $escaper->escapeHtml(__('Loading...')) ?>
                                </div>
                            </div>
                            <?= $heroicons->shoppingCartHtml('border-current'); ?>
                            <span><?= $escaper->escapeHtml(__('Add to Cart')) ?></span>
                        </button>
                    <?php else: ?>
                        <button type="button"
                                data-role="tocart"
                                @click.prevent='addToCart("<?= $escaper->escapeHtmlAttr($item->getId()) ?>",
                                <?= /* @noEscape */ $block->getItemAddToCartParams($item) ?>)'
                                title="<?= $escaper->escapeHtmlAttr(__('Add to Cart')) ?>"
                                class="action tocart primary btn btn-primary">
                            <span><?= $escaper->escapeHtml(__('Add to Cart')) ?></span>
                        </button>
                    <?php endif ?>
                </div>
            </div>
        <?php else: ?>
            <?php if ($product->getIsSalable()): ?>
                <p class="available stock" title="<?= $escaper->escapeHtmlAttr(__('Availability')) ?>">
                    <span><?= $escaper->escapeHtml(__('In stock')) ?></span>
                </p>
            <?php else: ?>
                <p class="unavailable stock" title="<?= $escaper->escapeHtmlAttr(__('Availability')) ?>">
                    <span><?= $escaper->escapeHtml(__('Out of stock')) ?></span>
                </p>
            <?php endif; ?>
        <?php endif; ?>
    </fieldset>
</div>
