<?php
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */

use Magento\Catalog\Model\Product;
use Magento\Swatches\Block\Product\Renderer\Listing\Configurable;
use Magento\Swatches\ViewModel\Product\Renderer\Configurable as ConfigurableViewModel;

/** @var Configurable $block */
/** @var Product $product */
$product = $block->getProduct();
$helper = $this->helper(\Codazon\ThemeLayoutPro\Helper\Data::class);
$width = $helper->getProductImageSize('width');
$height = $helper->getProductImageSize('height');
?>
<?php if ($product && $product->isAvailable()): ?>
    <?php $productId = $product->getId() ?>
    <?php /** @var ConfigurableViewModel $configurableViewModel */ ?>
    <?php $configurableViewModel = $block->getConfigurableViewModel() ?>
    <div class="swatch-opt-<?= $block->escapeHtmlAttr($productId) ?>"
         data-role="swatch-option-<?= $block->escapeHtmlAttr($productId) ?>"></div>
    <script type="text/x-magento-init">
        {
            "[data-role=swatch-option-<?= $block->escapeJs($productId) ?>]": {
                "Magento_Swatches/js/swatch-renderer": {
                    "selectorProduct": ".product-item-details",
                    "onlySwatches": true,
                    "enableControlLabel": false,
                    "numberToShow": <?=  $block->escapeJs($block->getNumberSwatchesPerProduct()) ?>,
                    "jsonConfig": <?= $block->getJsonConfig() ?>,
                    "jsonSwatchConfig": <?= $block->getJsonSwatchConfig() ?>,
                    "mediaCallback": "<?= $block->escapeJs($block->escapeUrl($block->getMediaCallback())) . "?cdz_custom_width={$width}&cdz_custom_height={$height}" ?>",
                    "jsonSwatchImageSizeConfig": <?= json_encode($helper->getSwatchImageSizeData($block)) ?>,
                    "showTooltip": <?= $block->escapeJs($configurableViewModel->getShowSwatchTooltip()) ?>
                }
            }
        }
    </script>

    <script type="text/x-magento-init">
        {
            "[data-role=priceBox][data-price-box=product-id-<?= $block->escapeJs($productId) ?>]": {
                "priceBox": {
                    "priceConfig": {
                        "priceFormat": <?= $block->getPriceFormatJson() ?>,
                        "prices": <?= $block->getPricesJson() ?>
                    }
                }
            }
        }
    </script>
<?php endif; ?>
