import { setBasePath, registerIconLibrary } from '../../webawesome/dist-cdn/webawesome.js';
import '../../webawesome/dist-cdn/components/button/button.js';
import '../../webawesome/dist-cdn/components/button-group/button-group.js';
import '../../webawesome/dist-cdn/components/details/details.js';
import '../../webawesome/dist-cdn/components/dropdown/dropdown.js';
import '../../webawesome/dist-cdn/components/divider/divider.js';
import '../../webawesome/dist-cdn/components/icon/icon.js';
import '../../webawesome/dist-cdn/components/input/input.js';
import '../../webawesome/dist-cdn/components/relative-time/relative-time.js';
import '../../webawesome/dist-cdn/components/tooltip/tooltip.js';
import '../../webawesome/dist-cdn/components/popover/popover.js';
import '../../webawesome/dist-cdn/components/split-panel/split-panel.js';
import '../../webawesome/dist-cdn/components/tree/tree.js';


setBasePath('/static/webawesome/dist-cdn');

registerIconLibrary('tabler', {
    resolver: name => `https://cdn.jsdelivr.net/npm/@tabler/icons@3.35.0/icons/outline/${name}.svg`,
    mutator: svg => {
        svg.style.fill = 'none';
        svg.setAttribute('stroke', 'currentColor');
    }
});
registerIconLibrary('codicon', {
    resolver: (name, family) => {
        return `/static/clients/codicon@0.0.40/icons/${name}.svg`
    },
    mutator: svg => {
        svg.style.fill = 'none';
        svg.setAttribute('stroke', 'currentColor');
    }
});

// @TODO color scheme https://github.com/shoelace-style/webawesome/issues/1304
// Set the initial color scheme before the page renders to prevent flashing
const value = localStorage.getItem('color-scheme') || 'auto';
const isDark = value === 'dark' || (value === 'auto' && matchMedia('(prefers-color-scheme: dark)').matches);
document.documentElement.classList.toggle('wa-dark', isDark);

const colorScheme = "light"
const systemDark = window.matchMedia('(prefers-color-scheme: dark)');
const applyDark = function (event = systemDark) {
    const isDark = colorScheme === 'auto' ? event.matches : colorScheme === 'dark';
    document.documentElement.classList.toggle('wa-dark', isDark);
};
systemDark.addEventListener('change', applyDark);
applyDark();