import { render, fireEvent } from '@testing-library/svelte';
import { describe, it, expect } from 'vitest';
import AccordionListItem from './AccordionListItem.svelte';
import { accordion, update } from '../accordionlist/accordion-list.state.svelte';
describe('AccordionListItem (no slots, $state)', () => {
    it('renders title and content correctly', () => {
        const { getByText } = render(AccordionListItem, {
            title: 'My Title',
            content: 'My Content',
        });
        expect(getByText('My Title')).toBeTruthy();
        expect(getByText('My Content')).toBeTruthy();
    });
    it('renders subtitle if provided', () => {
        const { getByText } = render(AccordionListItem, {
            title: 'My Title',
            subtitle: 'My Subtitle',
            content: 'Content',
        });
        expect(getByText('My Subtitle')).toBeTruthy();
    });
    it('generates unique id if not provided', () => {
        const { container } = render(AccordionListItem, {
            title: 'Title',
            content: 'Content',
        });
        const button = container.querySelector('button.mc-accordion__trigger');
        const content = container.querySelector('.mc-accordion__content');
        expect(button.id).toMatch(/^accordion-/);
        expect(content.id).toMatch(/^content-/);
    });
    it('respects provided id', () => {
        const { container } = render(AccordionListItem, {
            id: 'custom-id',
            title: 'Title',
            content: 'Content',
        });
        const button = container.querySelector('button.mc-accordion__trigger');
        const content = container.querySelector('.mc-accordion__content');
        expect(button.id).toBe('accordion-custom-id');
        expect(content.id).toBe('content-custom-id');
    });
    it('emits update:open event when clicked', async () => {
        const { container } = render(AccordionListItem, {
            id: 'item1',
            title: 'Title',
            content: 'Content',
        });
        const button = container.querySelector('button.mc-accordion__trigger');
        let emittedDetail;
        container.addEventListener('update:open', (e) => {
            const customEvent = e;
            emittedDetail = customEvent.detail;
        });
        await fireEvent.click(button);
        expect(emittedDetail).toBeDefined();
        expect(emittedDetail.id).toBe('item1');
        expect(typeof emittedDetail.open).toBe('boolean');
    });
    it('updates the accordion store via update() function', async () => {
        const { container } = render(AccordionListItem, {
            id: 'item1',
            title: 'Title',
            content: 'Content',
        });
        // reset store
        update([]);
        const button = container.querySelector('button.mc-accordion__trigger');
        expect(accordion.openIds).not.toContain('item1');
        await fireEvent.click(button);
        // simulate store update manually (comme le ferait le parent)
        update(['item1']);
        expect(accordion.openIds).toContain('item1');
    });
});
