jQuery(document).ready(function (e) {
    jQuery('#js-templates-select').on('change', function (e) {
        var templateId = jQuery(this).val();
        window.location = a4bjs.adminUrl+'admin.php?page=wpbcu-barcode-templates-edit&id=' + templateId;
    });

    // Editable template textarea
    var myTextarea = jQuery('#js-template-tpl').not('[disabled]')[0];
    var templateWrapper;
    // If found editable textarea init codemirror
    if (myTextarea) {
        var editor = CodeMirror.fromTextArea(myTextarea, {
            mode: "htmlmixed",
        });
        editor.setSize(null, 390);

        editor.on('change', function (cm, change) {
            templateWrapper.html(doReplacements(cm.getValue()));
        });
    }

    // Set template preview iframe content
    var templateIframe = jQuery('#js-template-preview-iframe');
    var template = templateIframe.attr('data-template');
    var templateWrapHtml = templateIframe.attr('data-template-wrapper');
    var templateBody = templateIframe.contents().find('body');

    templateBody.html(templateWrapHtml);
    templateWrapper = templateIframe.contents().find('.template-container');
    templateWrapper.html(template);

    /**
     * Replace placeholders to values
     *
     * @param template
     * @returns {*}
     */
    function doReplacements(template) {
        return template.replace(/\[barcode_img_url]/g, a4bjs.pluginUrl + 'assets/img/example_barcode1d.svg')
            .replace(/\[2dcode_img_url]/g, a4bjs.pluginUrl + 'assets/img/example_barcode2d.svg')
            .replace(/\[code]/g, '190198457325')
            .replace(/\[name]/g, 'Apple iPhone X 64Gb')
            .replace(/\[text1]/g, '799.99 USD')
            .replace(/\[text2]/g, 'Computers & Electronics');
    }

    // Change preview iframe size --------------------
    var $tsWidth = jQuery('input[name="width"]');
    var $tsHeight = jQuery('input[name="height"]');
    var $tsUol = jQuery('select[name="uol"]');
    var $iframe = jQuery('#js-template-preview-iframe');
    jQuery('.js-template-size').on('change', function (e) {
        changeIframeSizes($tsWidth.val(), $tsHeight.val(), $tsUol.val());
    });

    /**
     * Change iframe and template size dynamically.
     *
     * @param width
     * @param height
     * @param uol
     */
    function changeIframeSizes(width, height, uol) {
        $iframe.css('width', width + uol).css('height', height + uol);
    }

    changeIframeSizes($tsWidth.val(), $tsHeight.val(), $tsUol.val());
    // Change preview iframe size END-----------------
});