<?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   Hyva_BssAjaxCart
 * @author    Extension Team
 * @copyright Copyright (c) 2022 BSS Commerce Co. ( http://bsscommerce.com )
 * @license   http://bsscommerce.com/Bss-Commerce-License.txt
 */

use Bss\AjaxCart\Block\Ajax\Template;
use Magento\Framework\Escaper;

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

$helper = $block->getAjaxHelper();
$routeName = $block->getRequest()->getRouteName();
$popupAnimation = $helper->getConfigAnimation();
$addUrl = $block->getUrl('ajaxcart');
$quickView = false;
$isProductView = false;

if ($block->getRequest()->getModuleName() == 'ajaxcart') {
    $quickView = true;
    $isProductView = true;
}

if ($block->getRequest()->getFullActionName() == 'catalog_product_view') {
    $isProductView = true;
}

$isEnable = $helper->isEnabled();

if ($isProductView && !$helper->isEnabledProductView()) {
    $isEnable = false;
}

if ($block->getRequest()->getFullActionName() == 'checkout_cart_configure') {
    $isEnable = false;
}

switch ($popupAnimation) {
    case 'mfp-zoom-out':
        $popupAnimation = '
        x-transition:enter="transition ease-out duration-500"
        x-transition:enter-start="opacity-0 scale-150"
        x-transition:enter-end="opacity-100 scale-100"
        x-transition:leave="transition ease-in duration-500"
        x-transition:leave-start="opacity-100 scale-100"
        x-transition:leave-end="opacity-0 scale-90"';
        break;
    case 'mfp-move-horizontal':
        $popupAnimation = '
        x-transition:enter="transform transition ease-in-out duration-500 sm:duration-700"
        x-transition:enter-start="-translate-x-full"
        x-transition:enter-end="-translate-x-0"
        x-transition:leave="transform transition ease-in-out duration-500 sm:duration-700"
        x-transition:leave-start="translate-x-0"
        x-transition:leave-end="translate-x-full"';
        break;
    case 'mfp-move-from-top':
        $popupAnimation = '
        x-transition:enter="transition origin-top ease-out duration-500"
        x-transition:enter-start="transform -translate-y-full opacity-0"
        x-transition:enter-end="transform translate-y-0 opacity-100"
        x-transition:leave="transition origin-top ease-out duration-300"
        x-transition:leave-start="opacity-100 transform translate-y-0"
        x-transition:leave-end="opacity-0 transform -translate-y-full"';
        break;
    case 'mfp-3d-unfold':
        $popupAnimation = '
        x-transition:enter="transition duration-500"
        x-transition:enter-start="opacity-0 rotate-y-60"
        x-transition:enter-end="opacity-100 rotate-0"
        x-transition:leave="transition duration-500"
        x-transition:leave-start="opacity-100 rotate-0"
        x-transition:leave-end="opacity-0 rotate-y-90"';
        break;
    case 'mfp-zoom-in':
        $popupAnimation ='
        x-transition:enter="transition ease-out duration-500"
        x-transition:enter-start="opacity-0 scale-90"
        x-transition:enter-end="opacity-100 scale-100"
        x-transition:leave="transition ease-in duration-500"
        x-transition:leave-start="opacity-100 scale-100"
        x-transition:leave-end="opacity-0 scale-90"';
        break;
}

?>

<?php if ($block->getRequest()->getFullActionName() != 'ajaxcart_index_view' && $isEnable) : ?>
    <script>
        window.addEventListener('message', function (event) {
            if (event.data === 'ajax-cart-message') {
                window.dispatchEvent(new CustomEvent("ajax-cart-popup"));
                window.dispatchEvent(new CustomEvent("ajax-cart-popup-close-iframe"));
                window.dispatchEvent(new CustomEvent("reload-customer-section-data"));
            }
            if (event.data === 'ajax-cart-popup-close') {
                window.dispatchEvent(new CustomEvent("ajax-cart-popup-close"));
            }

        }, false);
    </script>
    <div x-data="{ show: false }" x-show="show" x-cloak
         @ajax-cart-popup.window="show = true"
         @ajax-cart-popup-close.window="show = false"
    >
        <div class="fixed inset-0 flex items-center justify-center text-left bg-black bg-opacity-50 z-30">
            <div class="inline-block hg max-h-[80vh] lg:max-h-[100%] overflow-auto bg-white shadow-xl
            rounded-lg text-gray-700 m-2.5 relative"
                 @click.away="show = false" x-show="show" <?= $popupAnimation ?> >
                <button @click="show=false"
                        class="p-1 mt-2 text-white bg-primary rounded-md float-right absolute top-2 right-2">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"
                         width="24" height="24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                              d="M6 18L18 6M6 6l12 12"></path>
                    </svg>
                </button>
                <div id="bss_ajaxcart_popup">
                    <div id="popup-content"></div>
                </div>
            </div>
        </div
    </div>
</div>
<div x-data="{open: false,url:''}" x-show="open" x-cloak
     @ajax-cart-popup-close-iframe.window="open = false"
     @ajax-cart-popup-iframe.window="open = $event.detail.open,url = $event.detail.url">
    <div class="fixed inset-0 flex items-center justify-center text-left bg-black bg-opacity-50 z-30">
        <div class="inline-block max-h-[80vh] lg:max-h-[100%] overflow-auto bg-white shadow-xl
        text-gray-700 m-2.5 max-w-[1000px]"
             @click.away="open = false" x-show="open" <?= $popupAnimation ?> >
            <button @click="open=false" class="p-2 text-gray-300 hover:text-black float-right">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"
                     width="24" height="24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                          d="M6 18L18 6M6 6l12 12"></path>
                </svg>
            </button>
            <div class="lg:p-6 p-2" id="bss_ajaxcart_popup-iframe">
                <div class="lg:w-full w-auto h-full">
                    <iframe id="popup-content-iframe" class="w-auto lg:w-[900px] w-[360px] h-[500px]"
                            allowfullscreen frameborder="0" allow="autoplay" :src="url">
                    </iframe>
                </div>
            </div>
        </div>
    </div
</div>
<?php endif; ?>
