import { describe, it, expect, beforeEach } from 'vitest';
import { ThemeToggle } from '../../../../assets/core/components/ThemeToggle';

function buildDom(): void {
    document.body.innerHTML = `
        <button class="theme-toggle__btn" data-theme="light"></button>
        <button class="theme-toggle__btn" data-theme="dark"></button>
        <img id="themed" src="/summer.jpg" data-src-light="/summer.jpg" data-src-dark="/winter.jpg">
        <img id="plain" src="/same.jpg">
    `;
}

describe('ThemeToggle - themed images', () => {
    beforeEach(() => {
        delete document.documentElement.dataset.theme;
        document.cookie = 'theme=; path=/; max-age=0';
        buildDom();
    });

    it('swaps themed images and writes the theme cookie on click', () => {
        new ThemeToggle();

        document.querySelector<HTMLElement>('[data-theme="dark"]')!.click();
        expect(document.getElementById('themed')!.getAttribute('src')).toBe('/winter.jpg');
        expect(document.getElementById('plain')!.getAttribute('src')).toBe('/same.jpg');
        expect(document.cookie).toContain('theme=dark');

        document.querySelector<HTMLElement>('[data-theme="light"]')!.click();
        expect(document.getElementById('themed')!.getAttribute('src')).toBe('/summer.jpg');
        expect(document.cookie).toContain('theme=light');
    });

    it('catches up on init when the page was rendered in Été but the stored theme is Hiver', () => {
        document.documentElement.dataset.theme = 'dark';

        new ThemeToggle();

        expect(document.getElementById('themed')!.getAttribute('src')).toBe('/winter.jpg');
    });
});