function essbRegisterPinProBarPreview() {
    let elementIds = [
        'essb_options_pinpro_bar_template',
        'essb_options_pinpro_bar_template_bg',
        'essb_options_pinpro_bar_template_text',
        'essb_options_pinpro_bar_template_hover_bg',
        'essb_options_pinpro_bar_template_hover_text',
        'essb_options_pinpro_bar_user',
        'essb_options_pinpro_bar_text'
    ];

    for (let elId of elementIds) {
        let el = document.querySelector('#' + elId);
        if (!el) continue;

        el.addEventListener('change', function (e) {
            setTimeout(essbPinterestProBarPreviewUpdate, 10);
        });
    }
}

function essbPinterestProBarPreviewUpdate() {
    let template = document.querySelector('#essb_options_pinpro_bar_template').value,
        username = document.querySelector('#essb_options_pinpro_bar_user').value,
        displayText = document.querySelector('#essb_options_pinpro_bar_text').value,
        output = [];

    if (!displayText) displayText = document.querySelector('#essb_options_pinpro_bar_text').getAttribute('placeholder') || '';

    displayText = displayText.replace('{username}', username);

    if (template == 'custom') {
        let colorBg = document.querySelector('#essb_options_pinpro_bar_template_bg').value,
            colorText = document.querySelector('#essb_options_pinpro_bar_template_text').value,
            hoverBg = document.querySelector('#essb_options_pinpro_bar_template_hover_bg').value,
            hoverText = document.querySelector('#essb_options_pinpro_bar_template_hover_text').value;

        output.push('<style>');
        output.push('.pinterest-bar-custom { ');
        if (colorBg) output.push('--pinterest-bar-user-bg: ' + colorBg + ';');
        if (colorText) output.push('--pinterest-bar-user-text: ' + colorText + ';');
        if (hoverBg) output.push('--pinterest-bar-user-hover-bg: ' + hoverBg + ';');
        if (hoverText) output.push('--pinterest-bar-user-hover-text: ' + hoverText + ';');
        output.push('}');
        output.push('</style>');
    }

    output.push('<div style="display: flex; align-items: center; justify-content: space-between; ' + (template == 'custom' ? '' : 'margin-bottom: 1em;') + '">');
    output.push('<label class="essb-title">Preview</label>');

    if (template == 'custom') {
        output.push('<button class="essb-ui-btn essb-ui-btn-dark essb-ui-btn-outline essb-ui-btn-xs" href="#" id="essb-pinpro-bar-update">Update</button>');
    }

    output.push('</div>');

    if (template == 'custom') {
        output.push('<div style="display: flex; align-items: center; margin-bottom: 1em;">');
        output.push('<span class="description">When adjusting colors, press the Update button to instantly view the change in the preview.</span>');
        output.push('</div>');
    }

    output.push('<div class="pinterest-follow-bar pinterest-bar-' + template + '">');
    output.push('<a href="#" target="_blank" rel="noopener">');
    output.push('<svg class="pin-icon" viewBox="0 0 24 24" fill="currentColor">');
    output.push('<path d="M12 0C5.373 0 0 5.373 0 12c0 5.084 3.163 9.426 7.627 11.174-.105-.949-.2-2.405.041-3.441.218-.937 1.407-5.965 1.407-5.965s-.359-.719-.359-1.782c0-1.668.967-2.914 2.171-2.914 1.023 0 1.518.769 1.518 1.69 0 1.029-.653 2.567-.992 3.992-.285 1.193.6 2.165 1.775 2.165 2.128 0 3.768-2.245 3.768-5.487 0-2.861-2.055-4.718-4.988-4.718-3.395 0-5.39 2.544-5.39 5.178 0 1.025.395 2.127.889 2.726.096.118.11.22.083.343-.086.378-.279 1.199-.316 1.367-.046.217-.156.264-.36.159-1.333-.689-2.166-2.847-2.166-4.585 0-3.735 2.714-7.168 7.822-7.168 4.108 0 7.303 2.923 7.303 6.827 0 4.073-2.568 7.351-6.123 7.351-1.194 0-2.319-.621-2.703-1.355 0 0-.59 2.249-0.734 2.801-.268.995-1.004 2.245-1.504 3.005 1.128.343 2.32.531 3.556.531 6.627 0 12-5.373 12-12 0-6.627-5.373-12-12-12z"/>');
    output.push('</svg>');
    output.push('<span>' + displayText + '</span>');
    output.push('</a>');
    output.push('</div>');

    document.querySelector('.essb-pinpro-bar-preview').innerHTML = output.join('');

    setTimeout(function() {
        if (document.querySelector('#essb-pinpro-bar-update')) {
            document.querySelector('#essb-pinpro-bar-update').onclick = function(e) {
                e.preventDefault();
                essbPinterestProBarPreviewUpdate();
            }
        }
    }, 100);
}


(function () {

    // Register Pinterest Pro Bar Live Preview
    if (document.querySelector('.essb-pinpro-bar-preview')) {
        document.querySelector('.essb-pinpro-bar-preview').style.maxWidth = '800px';
        document.querySelector('.essb-pinpro-bar-preview').style.margin = '0 auto';
        essbRegisterPinProBarPreview();
        essbPinterestProBarPreviewUpdate();
    }

})();