/**
 * File customizer.js.
 *
 * Theme Customizer enhancements for a better user experience.
 *
 * Contains handlers to make Theme Customizer preview reload changes asynchronously.
 */

(($) => {
    const setText = (selector, text) => $(selector).text(text);

    const setVisibility = (isVisible, color) => {
        const titleDesc = $('.site-title, .site-description');
        const titleLink = $('.site-title a, .site-description');

        if (!isVisible) {
            titleDesc.css({
                clip: 'rect(1px, 1px, 1px, 1px)',
                position: 'absolute'
            });
        } else {
            titleDesc.css({
                clip: 'auto',
                position: 'relative'
            });
            titleLink.css('color', color);
        }
    };

    wp.customize('blogname', (value) => {
        value.bind((to) => setText('.site-title a', to));
    });

    wp.customize('blogdescription', (value) => {
        value.bind((to) => setText('.site-description', to));
    });

    wp.customize('header_textcolor', (value) => {
        value.bind((to) => setVisibility(to !== 'blank', to));
    });
})(jQuery);