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

// phpcs:disable PHPCompatibility.Miscellaneous.RemovedAlternativePHPTags.MaybeASPOpenTagFound
/** @var $block \Magento\Theme\Block\Adminhtml\Wysiwyg\Files\Content\Uploader */
/** @var \Magento\Framework\View\Helper\SecureHtmlRenderer $secureRenderer */
?>

<div id="<?= $block->getHtmlId() ?>" class="uploader">
    <span class="fileinput-button form-buttons">
        <span><?= $block->escapeHtml(__('Browse Files')) ?></span>
        <input id="fileupload" type="file" name="<?= $block->escapeHtmlAttr($block->getConfig()->getFileField()) ?>"
            data-url="<?= $block->escapeUrl($block->getConfig()->getUrl()) ?>" multiple>
    </span>
    <div class="clear"></div>
    <script id="<?= $block->getHtmlId() ?>-template" type="text/x-magento-template">
        <div id="<%- data.id %>" class="file-row">
            <span class="file-info"><%- data.name %> (<%- data.size %>)</span>
            <div class="progressbar-container">
                <div class="progressbar upload-progress"></div>
            </div>
            <?= /* @noEscape */ $secureRenderer->renderStyleAsTag(
                "width: 0%;",
                "div.progressbar-container div.progressbar.upload-progress"
            ) ?>
            <div class="clear"></div>
        </div>
    </script>
</div>
<?php $scriptString= <<<script

require([
    'jquery',
    'mage/template',
    'jquery/file-uploader',
    'domReady!',
    'mage/translate'
], function ($, mageTemplate) {

    $('#fileupload').fileupload({
        dataType: 'json',
        formData: {
            isAjax: 'true',
            form_key: FORM_KEY
        },
        sequentialUploads: true,
        maxFileSize: {$block->escapeJs($block->getFileSizeService()->getMaxFileSize())} ,
        add: function (e, data) {
            var progressTmpl = mageTemplate('#{$block->getHtmlId()}-template'),
                fileSize,
                tmpl;

            $.each(data.files, function (index, file) {
                fileSize = typeof file.size == "undefined" ?
                    $.mage.__('We could not detect a size.') :
                    byteConvert(file.size);

                data.fileId = Math.random().toString(36).substr(2, 9);

                tmpl = progressTmpl({
                    data: {
                        name: file.name,
                        size: fileSize,
                        id: data.fileId
                    }
                });

                $(tmpl).appendTo('#{$block->getHtmlId()}');
            });

            $(this).fileupload('process', data).done(function () {
                data.submit();
            });
        },
        done: function (e, data) {
            var progressSelector = '#' + data.fileId + ' .progressbar-container .progressbar';
            $(progressSelector).css('width', '100%');
            if (data.result && !data.result.hasOwnProperty('errorcode')) {
                $(progressSelector).removeClass('upload-progress').addClass('upload-success');
                MediabrowserInstance.handleUploadComplete();
            } else {
                $(progressSelector).removeClass('upload-progress').addClass('upload-failure');
            }
        },
        progress: function (e, data) {
            var progress = parseInt(data.loaded / data.total * 100, 10);
            var progressSelector = '#' + data.fileId + ' .progressbar-container .progressbar';
            $(progressSelector).css('width', progress + '%');
        },
        fail: function (e, data) {
            var progressSelector = '#' + data.fileId + ' .progressbar-container .progressbar';
            $(progressSelector).removeClass('upload-progress').addClass('upload-failure');
        }
    });

});

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