(function (window, document) {
    'use strict';

    var labels = { light: 'Açık', dark: 'Karanlık', system: 'Sistem' };
    var icons = { light: '☀', dark: '☾', system: '◐' };

    function updateThemeControls(event) {
        var state = event && event.detail ? event.detail : {
            preference: window.ThemeManager.getPreference(),
            resolved: window.ThemeManager.getResolvedTheme()
        };

        document.querySelectorAll('[data-theme-value]').forEach(function (button) {
            var active = button.dataset.themeValue === state.preference;
            button.classList.toggle('active', active);
            button.setAttribute('aria-pressed', String(active));
        });
        document.querySelectorAll('[data-theme-current-label]').forEach(function (node) {
            node.textContent = labels[state.preference];
        });
        document.querySelectorAll('[data-theme-current-icon]').forEach(function (node) {
            node.textContent = icons[state.preference];
        });
        document.querySelectorAll('[data-theme-preference]').forEach(function (node) {
            node.textContent = labels[state.preference];
        });
        document.querySelectorAll('[data-theme-resolved]').forEach(function (node) {
            node.textContent = labels[state.resolved];
        });
    }

    document.addEventListener('click', function (event) {
        var button = event.target.closest('[data-theme-value]');
        if (button) {
            window.ThemeManager.setPreference(button.dataset.themeValue);
        }
    });

    window.addEventListener('trafficpumper:theme-change', updateThemeControls);
    updateThemeControls();
}(window, document));