import { describe, it, expect, beforeEach } from 'vitest';
import { mount } from '@vue/test-utils';
import DensityToggle from '../../resources/js/components/ui/DensityToggle.vue';
import { DENSITY_KEY } from '../../resources/js/composables/useDensity';

describe('DensityToggle', () => {
    beforeEach(() => {
        localStorage.clear();
    });

    it('renders two buttons: Компакт + Комфорт', () => {
        const w = mount(DensityToggle);
        const buttons = w.findAll('button');
        expect(buttons).toHaveLength(2);
        expect(buttons[0].text()).toMatch(/Компакт/);
        expect(buttons[1].text()).toMatch(/Комфорт/);
    });

    it('marks Comfortable as active by default', () => {
        const w = mount(DensityToggle);
        const comfortBtn = w.findAll('button')[1];
        expect(comfortBtn.classes()).toContain('ld-density-toggle__btn--active');
    });

    it('clicking Компакт switches to compact and persists to localStorage', async () => {
        const w = mount(DensityToggle);
        const compactBtn = w.findAll('button')[0];
        await compactBtn.trigger('click');
        expect(compactBtn.classes()).toContain('ld-density-toggle__btn--active');
        expect(localStorage.getItem(DENSITY_KEY)).toBe('compact');
    });

    it('emits change with new density value', async () => {
        const w = mount(DensityToggle);
        await w.findAll('button')[0].trigger('click');
        expect(w.emitted('change')).toBeTruthy();
        expect(w.emitted('change')?.[0]).toEqual(['compact']);
    });
});