import { describe, it, expect, beforeEach } from 'vitest';
import { PreviewToggle } from '../../../../assets/admin/editor/PreviewToggle';

function setup(): { button: HTMLElement; content: HTMLElement } {
    document.body.className = '';
    document.body.innerHTML = `
        <button id="preview-toggle-btn" aria-pressed="false" data-tooltip="Aperçu" aria-label="Aperçu">
            <span class="icon icon--monitor editor-toolbar__action-icon"></span>
        </button>
        <div class="editor-content"><div contenteditable="true" id="field">x</div></div>
    `;
    new PreviewToggle().initialize();
    return {
        button: document.getElementById('preview-toggle-btn')!,
        content: document.querySelector<HTMLElement>('.editor-content')!,
    };
}

describe('PreviewToggle', () => {
    let button: HTMLElement;
    let content: HTMLElement;

    beforeEach(() => {
        ({ button, content } = setup());
    });

    it('enters preview on click', () => {
        button.click();

        expect(document.body.classList.contains('is-previewing')).toBe(true);
        expect(content.hasAttribute('inert')).toBe(true);
        expect(button.getAttribute('aria-pressed')).toBe('true');
        expect(button.getAttribute('aria-label')).toBe("Retour à l'édition");
        expect(button.querySelector('.icon')!.classList.contains('icon--pencil')).toBe(true);
    });

    it('restores the editing state on a second click', () => {
        button.click();
        button.click();

        expect(document.body.classList.contains('is-previewing')).toBe(false);
        expect(content.hasAttribute('inert')).toBe(false);
        expect(button.getAttribute('aria-pressed')).toBe('false');
        expect(button.getAttribute('aria-label')).toBe('Aperçu');
        expect(button.querySelector('.icon')!.classList.contains('icon--monitor')).toBe(true);
    });

    it('leaves preview on Escape, and ignores Escape otherwise', () => {
        document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }));
        expect(document.body.classList.contains('is-previewing')).toBe(false);

        button.click();
        document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }));
        expect(document.body.classList.contains('is-previewing')).toBe(false);
        expect(content.hasAttribute('inert')).toBe(false);
    });

    it('does not throw when the toolbar button or content is missing', () => {
        document.body.innerHTML = '';
        expect(() => new PreviewToggle().initialize()).not.toThrow();
    });
});