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

/* @var $block \Magento\Catalog\Block\Product\View\Options\Type\File */
/** @var \Magento\Framework\View\Helper\SecureHtmlRenderer $secureRenderer */
?>
<?php $_option = $block->getOption(); ?>
<?php $_fileInfo = $block->getFileInfo(); ?>
<?php $_fileExists = $_fileInfo->hasData() ? true : false; ?>
<?php $_fileName = 'options_' . (int)$_option->getId() . '_file'; ?>
<?php $_fieldNameAction = $_fileName . '_action'; ?>
<?php $_fieldValueAction = $_fileExists ? 'save_old' : 'save_new'; ?>
<?php $_fileNamed = $_fileName . '_name'; ?>
<?php $_rand = rand(); ?>

<?php
$rand = /* @noEscape */ $_rand;
$fileName = /* @noEscape */ $_fileName;
$fieldNameAction = /* @noEscape */ $_fieldNameAction;
$fileNamed = /* @noEscape */ $_fileNamed;
$scriptString = <<<script
require(['prototype'], function(){

//<![CDATA[
    opFile{$rand} = {
        initializeFile: function(inputBox) {
            this.inputFile = inputBox.select('input[name="{$fileName}"]')[0];
            this.inputFileAction = inputBox.select('input[name="{$fieldNameAction}"]')[0];
            this.fileNameBox = inputBox.up('div').select('.{$fileNamed}')[0];
        },

        toggleFileChange: function(inputBox) {
            this.initializeFile(inputBox);
            inputBox.toggle();
            this.fileChangeFlag = this.fileChangeFlag ? false : true;
            if (!this.fileDeleteFlag) {
                if (this.fileChangeFlag) {
                     this.inputFileAction.value = 'save_new';
                     this.inputFile.disabled = false;
                 } else {
                     this.inputFileAction.value = 'save_old';
                     this.inputFile.disabled = true;
                 }
            }
        },

        toggleFileDelete: function(fileDeleteFlag, inputBox) {
            this.initializeFile(inputBox);
            this.fileDeleteFlag = fileDeleteFlag.checked ? true : false;
            if (this.fileDeleteFlag) {
                this.inputFileAction.value = '';
                this.inputFile.disabled = true;
                this.fileNameBox.setStyle({'text-decoration': 'line-through'});
            } else {
                this.inputFileAction.value = this.fileChangeFlag ? 'save_new' : 'save_old';
                this.inputFile.disabled = (this.fileChangeFlag == 'save_old');
                this.fileNameBox.setStyle({'text-decoration': 'none'});
            }
        }
    };
//]]>

});
script;
?>
<?= /* @noEscape */ $secureRenderer->renderTag('script', [], $scriptString, false) ?>

<div class="admin__field <?= $_option->getIsRequire() ? ' required _required' : '' ?>">
    <label class="admin__field-label label">
        <?= $block->escapeHtml($_option->getTitle()) ?>
        <?= /* @noEscape */ $block->getFormattedPrice() ?>
    </label>
    <div class="admin__field-control control" id="<?= /* @noEscape */ $_fileName ?>">
        <?php if ($_fileExists):?>
            <span class="<?= /* @noEscape */ $_fileNamed ?>"><?= $block->escapeHtml($_fileInfo->getTitle()) ?></span>
            <a href="#" class="label">
                <?= $block->escapeHtml(__('Change')) ?>
            </a>&nbsp;
            <?= /* @noEscape */ $secureRenderer->renderEventListenerAsTag(
                'onclick',
                "event.preventDefault(); opFile" . /* @noEscape */ $_rand .
                ".toggleFileChange($(this).next('.input-box'))",
                '#' . /* @noEscape */ $_fileName . ' a'
            ); ?>
            <?php if (!$_option->getIsRequire()):?>
                <input type="checkbox"
                       price="<?= $block->escapeHtmlAttr($block->getCurrencyPrice($_option->getPrice(true))) ?>"/>
                <?= /* @noEscape */ $secureRenderer->renderEventListenerAsTag(
                    'onclick',
                    "opFile" . /* @noEscape */ $_rand . ".toggleFileDelete($(this), $(this).next('.input-box'))",
                    '#' . /* @noEscape */ $_fileName . ' input[type="checkbox"]'
                ) ?>
                <span class="label"><?= $block->escapeHtml(__('Delete')) ?></span>
            <?php endif; ?>
        <?php endif; ?>
        <div class="input-box" <?= $_fileExists ? 'style="display:none"' : '' ?>>
            <!-- ToDo UI: add appropriate file class when z-index issue in ui dialog will be resolved  -->
            <input type="file" name="<?= /* @noEscape */ $_fileName ?>"
                   class="product-custom-option<?= $_option->getIsRequire() ? ' required-entry' : '' ?>"
                   price="<?= $block->escapeHtmlAttr($block->getCurrencyPrice($_option->getPrice(true))) ?>"
                <?= $_fileExists ? 'disabled="disabled"' : '' ?>/>
            <input type="hidden" name="<?= /* @noEscape */ $_fieldNameAction ?>"
                   value="<?= /* @noEscape */ $_fieldValueAction ?>" />

            <?php if ($_option->getFileExtension()):?>
                <div class="admin__field-note">
                    <span><?= $block->escapeHtml(__('Compatible file extensions to upload')) ?>:
                        <strong><?= $block->escapeHtml($_option->getFileExtension()) ?></strong>
                    </span>
                </div>
            <?php endif; ?>

            <?php if ($_option->getImageSizeX() > 0):?>
                <div class="admin__field-note">
                    <span><?= $block->escapeHtml(__('Maximum image width')) ?>:
                        <strong><?= (int)$_option->getImageSizeX() ?> <?= $block->escapeHtml(__('px.')) ?></strong>
                    </span>
                </div>
            <?php endif; ?>

            <?php if ($_option->getImageSizeY() > 0):?>
                <div class="admin__field-note">
                    <span><?= $block->escapeHtml(__('Maximum image height')) ?>:
                        <strong><?= (int)$_option->getImageSizeY() ?> <?= $block->escapeHtml(__('px.')) ?></strong>
                    </span>
                </div>
            <?php endif; ?>
        </div>
    </div>
</div>
