// @vitest-environment jsdom
import {afterEach, describe, expect, it} from 'vitest';
import {
    applyAppearance,
    cacheAppearance,
    DEFAULT_APPEARANCE,
    normalizeAppearance,
    readCachedAppearance,
} from './appearance.js';

describe('normalizeAppearance', () => {
    it('keeps known values', () => {
        const appearance = {accent: 'blue', corners: 'round', wideLayout: true, backgroundAppid: 620, bannerAppid: 1086940, showBanner: false};

        expect(normalizeAppearance(appearance)).toEqual(appearance);
    });

    it('replaces unknown or missing values with the defaults', () => {
        expect(normalizeAppearance({accent: 'red;x', corners: 'pointy', wideLayout: 'yes', backgroundAppid: -1, bannerAppid: '620', showBanner: 'no'}))
            .toEqual(DEFAULT_APPEARANCE);
        expect(normalizeAppearance(null)).toEqual(DEFAULT_APPEARANCE);
        expect(normalizeAppearance({backgroundAppid: 1.5})).toEqual(DEFAULT_APPEARANCE);
    });
});

describe('appearance cache', () => {
    afterEach(() => localStorage.clear());

    it('reads back what was cached', () => {
        cacheAppearance({accent: 'green', corners: 'sharp', wideLayout: false, backgroundAppid: null, bannerAppid: 620, showBanner: true});

        expect(readCachedAppearance()).toEqual({accent: 'green', corners: 'sharp', wideLayout: false, backgroundAppid: null, bannerAppid: 620, showBanner: true});
    });

    it('falls back to the defaults for a broken or empty cache', () => {
        expect(readCachedAppearance()).toEqual(DEFAULT_APPEARANCE);

        localStorage.setItem('tbp_appearance', '{broken');
        expect(readCachedAppearance()).toEqual(DEFAULT_APPEARANCE);
    });
});

describe('applyAppearance', () => {
    it('sets the presets as data attributes for the CSS', () => {
        const root = document.createElement('html');

        applyAppearance({accent: 'orange', corners: 'round', wideLayout: true, backgroundAppid: 620}, root);

        expect(root.dataset.accent).toBe('orange');
        expect(root.dataset.corners).toBe('round');
    });
});