var headerTextColorControl = parent.wp.customize.control('header_text_color');
var layout = document.querySelector('.mdl-layout');
var header = document.querySelector('.mdl-layout__header');

window.onload = function () {
    setTimeout(function () {
        if (wp.customize.value('header_transparency')()) {
            headerTextColorControl.activate();
        } else {
            headerTextColorControl.deactivate();
        }
    }, 1000);
};

// Update the site header transparency in real time
wp.customize('header_transparency', function (value) {
    value.bind(function (val) {
        if (val) {
            header.classList.add('mdl-layout__header--transparent');
            headerTextColorControl.activate();
            layout.style = 'color: ' + wp.customize.value('header_text_color')();
        } else {
            header.classList.remove('mdl-layout__header--transparent');
            headerTextColorControl.deactivate();
            layout.style = '';
        }
    });
});

// Update the site header text color in real time
wp.customize('header_text_color', function (value) {
    value.bind(function (val) {
        if (val && wp.customize.value('header_transparency')()) {
            layout.style = 'color: ' + val;
        } else {
            layout.style = '';
        }
    });
});

// Update the site primary color in real time
wp.customize('color_scheme', function (value) {
    var hidden = parent.document.querySelector('.customize-control-color_scheme input[type="hidden"]');
    var select = parent.document.querySelectorAll('.customize-control-color_scheme select');

    select[0].addEventListener('change', colorChange);
    select[1].addEventListener('change', colorChange);
    function colorChange() {
        hidden.value = select[0].value.replace(' ', '_') + '-' + select[1].value.replace(' ', '_');
        hidden.dispatchEvent(new Event('change'));
    }

    value.bind(function (colors) {
        colors = colors.toLowerCase().split('-');
        var primary = colors[0];
        var accent = colors[1];

        var code = 'color_scheme:same_colors';
        var notifications = parent.wp.customize.control('color_scheme').notifications;
        if (primary === accent) {
            var notification = new wp.customize.Notification(code, {message: 'Colors cannot be the same.'});
            notifications.add(code, notification);
        } else {
            notifications.remove(code);
            changeMDLStyle(primary, accent);
        }
    });
});

function changeMDLStyle(primary, accent) {
    primary = primary.toLowerCase().replace(' ', '_');
    accent = accent.toLowerCase().replace(' ', '_');
    document.getElementById('blog-material-mdl-style-css').href = "https://code.getmdl.io/1.2.1/material." +
        primary + "-" + accent + ".min.css";
}

// Update the site footer copyright text in real time
wp.customize('footer_copy', function (value) {
    value.bind(function (val) {
        document.querySelector('.mdl-mini-footer--right-section').innerHTML = val;
    });
});