import { describe, it, expect } from 'vitest';
import { render, fireEvent } from '@testing-library/svelte';
import CheckboxGroup from './CheckboxGroup.svelte';
const baseOptions = [
    { id: 'cb1', label: 'Option 1', value: 'opt1' },
    { id: 'cb2', label: 'Option 2', value: 'opt2' },
    { id: 'cb3', label: 'Option 3', value: 'opt3' },
];
describe('m-checkbox-group component', () => {
    it('renders all checkbox options', () => {
        const { getByLabelText } = render(CheckboxGroup, {
            props: {
                name: 'choices',
                options: baseOptions,
                value: [],
            },
        });
        baseOptions.forEach((opt) => {
            const checkbox = getByLabelText(opt.label);
            expect(checkbox).toBeTruthy();
            expect(checkbox.name).toBe('choices');
            expect(checkbox.value).toBe(opt.value);
            expect(checkbox.checked).toBe(false);
        });
    });
    it('pre-selects values from the value prop', () => {
        const { getByLabelText } = render(CheckboxGroup, {
            props: {
                name: 'choices',
                options: baseOptions,
                value: ['opt2'],
            },
        });
        const cb1 = getByLabelText('Option 1');
        const cb2 = getByLabelText('Option 2');
        const cb3 = getByLabelText('Option 3');
        expect(cb1.checked).toBe(false);
        expect(cb2.checked).toBe(true);
        expect(cb3.checked).toBe(false);
    });
    it('updates value when user toggles checkboxes', async () => {
        const { getByLabelText } = render(CheckboxGroup, {
            props: {
                name: 'choices',
                options: baseOptions,
                value: [],
            },
        });
        const cb1 = getByLabelText('Option 1');
        const cb2 = getByLabelText('Option 2');
        await fireEvent.click(cb1);
        expect(cb1.checked).toBe(true);
        await fireEvent.click(cb2);
        expect(cb2.checked).toBe(true);
        await fireEvent.click(cb1);
        expect(cb1.checked).toBe(false);
    });
    it('applies invalid class and aria-invalid when isinvalid=true', () => {
        const { container, getByLabelText } = render(CheckboxGroup, {
            props: {
                name: 'choices',
                options: baseOptions,
                isinvalid: true,
            },
        });
        const inputs = container.querySelectorAll('input[type="checkbox"]');
        inputs.forEach((input) => {
            expect(input).toHaveClass('is-invalid');
            expect(input).toHaveAttribute('aria-invalid', 'true');
        });
        const cb1 = getByLabelText('Option 1');
        expect(cb1).toHaveClass('is-invalid');
    });
    it('applies inline layout when inline=true', () => {
        const { container } = render(CheckboxGroup, {
            props: {
                name: 'choices',
                options: baseOptions,
                inline: true,
            },
        });
        const wrapper = container.querySelector('.mc-field__content');
        expect(wrapper).toHaveClass('mc-field__content--inline');
    });
    it('renders disabled checkboxes properly', () => {
        const disabledOptions = [
            { id: 'cb1', label: 'Option 1', value: 'opt1', disabled: true },
            { id: 'cb2', label: 'Option 2', value: 'opt2' },
        ];
        const { getByLabelText } = render(CheckboxGroup, {
            props: {
                name: 'choices',
                options: disabledOptions,
            },
        });
        const cb1 = getByLabelText('Option 1');
        const cb2 = getByLabelText('Option 2');
        expect(cb1.disabled).toBe(true);
        expect(cb2.disabled).toBe(false);
    });
    it('sets indeterminate checkboxes', () => {
        const { container } = render(CheckboxGroup, {
            props: {
                name: 'choices',
                options: [{ id: 'cb1', label: 'Option 1', value: 'opt1', indeterminate: true }],
            },
        });
        const input = container.querySelector('input[type="checkbox"]');
        expect(input.indeterminate).toBe(true);
    });
});
