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

// phpcs:disable PSR2.ControlStructures.SwitchDeclaration
// phpcs:disable Generic.WhiteSpace.ScopeIndent

/** @var $block \Magento\Swatches\Block\LayeredNavigation\RenderLayered */
?>
<?php $swatchData = $block->getSwatchData(); ?>
<div class="swatch-attribute swatch-layered <?= $block->escapeHtmlAttr($swatchData['attribute_code']) ?>"
     data-attribute-code="<?= $block->escapeHtmlAttr($swatchData['attribute_code']) ?>"
     data-attribute-id="<?= $block->escapeHtmlAttr($swatchData['attribute_id']) ?>">
    <div class="swatch-attribute-options clearfix">
        <?php foreach ($swatchData['options'] as $option => $label): ?>
            <a href="<?= $block->escapeUrl($label['link']) ?>" rel="nofollow"
               aria-label="<?= $block->escapeHtmlAttr($label['label']) ?>"
               class="swatch-option-link-layered">
                <?php if (isset($swatchData['swatches'][$option]['type'])): ?>
                    <?php switch ($swatchData['swatches'][$option]['type']) {
                        case '3':
                            ?>
                            <div class="swatch-option <?= $block->escapeHtmlAttr($label['custom_style']) ?>"
                                 tabindex="-1"
                                 data-option-type="3"
                                 data-option-id="<?= $block->escapeHtmlAttr($option) ?>"
                                 data-option-label="<?= $block->escapeHtmlAttr($label['label']) ?>"
                                 data-option-tooltip-thumb=""
                                 data-option-tooltip-value=""
                                ></div>
                            <?php break;
                        case '2':
                            ?>
                            <?php $swatchThumbPath = $block->getSwatchPath(
                                'swatch_thumb',
                                $swatchData['swatches'][$option]['value']
                            ); ?>
                            <?php $swatchImagePath = $block->getSwatchPath(
                                'swatch_image',
                                $swatchData['swatches'][$option]['value']
                            );
                            $escapedUrl = $block->escapeUrl($swatchImagePath);
                            ?>
                            <div class="swatch-option image <?= $block->escapeHtmlAttr($label['custom_style']) ?>"
                                 tabindex="-1"
                                 data-option-type="2"
                                 data-option-id="<?= $block->escapeHtmlAttr($option) ?>"
                                 data-option-label="<?= $block->escapeHtmlAttr($label['label']) ?>"
                                 data-option-tooltip-thumb="<?= $block->escapeUrl($swatchThumbPath) ?>"
                                 data-option-tooltip-value="">
                            </div>
                            <?php
                            $element = 'swatchImageOption' .$block->escapeJs($option);
                            $script = 'var ' .$element
                                .' = document.querySelector(\'.swatch-layered div[data-option-id="' .$block->escapeJs($option)
                                .'"]\');' .PHP_EOL;
                            $script .= $element .'.style.background = "url(\''
                                .$escapedUrl .'\') no-repeat center";' .PHP_EOL;
                            $script .= $element .'.style.backgroundSize = "initial";';
                            echo '<script>'.$script.'</script>';
                            ?>
                            <?php break;
                        case '1':
                            ?>
                            <div class="swatch-option color <?= $block->escapeHtmlAttr($label['custom_style']) ?>"
                                 tabindex="-1"
                                 data-option-type="1"
                                 data-option-id="<?= $block->escapeHtmlAttr($option) ?>"
                                 data-option-label="<?= $block->escapeHtmlAttr($label['label']) ?>"
                                 data-option-tooltip-thumb=""
                                 data-option-tooltip-value="<?= $block->escapeHtmlAttr(
                                     $swatchData['swatches'][$option]['value']
                                 ) ?>">
                            </div>
                            <?php
                            $element = 'swatchImageOption' .$block->escapeJs($option);
                            $backgroundValue = $block->escapeJs(
                                str_replace('\'', '\\\'', $swatchData['swatches'][$option]['value'])
                            );
                            $script = 'var ' .$element
                                .' = document.querySelector(\'.swatch-layered div[data-option-id="' .$block->escapeJs($option)
                                .'"]\');' .PHP_EOL;
                            $script .= $element .'.style.background = "' .$backgroundValue
                                .' no-repeat center";' .PHP_EOL;
                            $script .= $element .'.style.backgroundSize = "initial";';
                            echo '<script>'.$script.'</script>';
                            ?>
                            <?php break;
                        case '0':
                        default:
                            ?>
                            <div class="swatch-option text <?= $block->escapeHtmlAttr($label['custom_style']) ?>"
                                 tabindex="-1"
                                 data-option-type="0"
                                 data-option-id="<?= $block->escapeHtmlAttr($option) ?>"
                                 data-option-label="<?= $block->escapeHtmlAttr($label['label']) ?>"
                                 data-option-tooltip-thumb=""
                                 data-option-tooltip-value=""
                                ><?= $block->escapeHtml($swatchData['swatches'][$option]['value']) ?></div>
                        <?php break;
                    } ?>
                <?php endif; ?>
            </a>
        <?php endforeach; ?>
    </div>
</div>
<?php $scriptString = <<<script

    require(["jquery", "Magento_Swatches/js/swatch-renderer"], function ($) {
        $('.swatch-layered.{$block->escapeJs($swatchData['attribute_code'])}')
            .find('[data-option-type="1"], [data-option-type="2"], [data-option-type="0"], [data-option-type="3"]')
            .SwatchRendererTooltip();
    });

script;
?>
<?= /* @noEscape */ '<script>' . $scriptString . '</script>'; ?>
