import { render, screen } from '@testing-library/svelte';
import { describe, it, expect } from 'vitest';
import StepperStacked from './StepperStacked.svelte';
const defaultSteps = [
    { label: 'Step 1', additionalinfo: 'Info 1' },
    { label: 'Step 2', additionalinfo: 'Info 2' },
    { label: 'Step 3' },
];
describe('StepperStacked', () => {
    it('renders the correct number of list items', () => {
        render(StepperStacked, { props: { steps: defaultSteps, step: 1 } });
        const items = screen.getAllByRole('listitem');
        expect(items).toHaveLength(defaultSteps.length);
    });
    it('renders step labels', () => {
        render(StepperStacked, { props: { steps: defaultSteps, step: 1 } });
        defaultSteps.forEach(({ label }) => {
            expect(screen.getByText(label)).toBeTruthy();
        });
    });
    it('renders additionalinfo when provided', () => {
        render(StepperStacked, { props: { steps: defaultSteps, step: 1 } });
        expect(screen.getByText('Info 1')).toBeTruthy();
        expect(screen.getByText('Info 2')).toBeTruthy();
    });
    it('adds has-additional class on items with additionalinfo', () => {
        const { container } = render(StepperStacked, { props: { steps: defaultSteps, step: 1 } });
        const items = container.querySelectorAll('li.mc-stepper-stacked__item');
        expect(items[0].classList.contains('has-additional')).toBe(true);
        expect(items[1].classList.contains('has-additional')).toBe(true);
        expect(items[2].classList.contains('has-additional')).toBe(false);
    });
    it('renders nothing when steps is empty', () => {
        const { container } = render(StepperStacked, { props: { steps: [], step: 1 } });
        const items = container.querySelectorAll('li');
        expect(items).toHaveLength(0);
    });
    describe('active step as number - 1 based', () => {
        it('marks the current step circle with is-current class', () => {
            const { container } = render(StepperStacked, { props: { steps: defaultSteps, step: 2 } });
            const currentCircles = container.querySelectorAll('.mc-stepper-stacked__circle.is-current');
            expect(currentCircles).toHaveLength(1);
            expect(currentCircles[0].textContent?.trim()).toBe('2');
        });
        it('marks the current step label with is-current class', () => {
            const { container } = render(StepperStacked, { props: { steps: defaultSteps, step: 2 } });
            const currentLabels = container.querySelectorAll('.mc-stepper-stacked__label.is-current');
            expect(currentLabels).toHaveLength(1);
            expect(currentLabels[0].textContent?.trim()).toBe('Step 2');
        });
        it('renders check icon for completed steps', () => {
            const { container } = render(StepperStacked, { props: { steps: defaultSteps, step: 3 } });
            const checkIcons = container.querySelectorAll('.mc-stepper-stacked__icon--check');
            expect(checkIcons).toHaveLength(2);
        });
        it('renders no check icon when on step 1', () => {
            const { container } = render(StepperStacked, { props: { steps: defaultSteps, step: 1 } });
            const checkIcons = container.querySelectorAll('.mc-stepper-stacked__icon--check');
            expect(checkIcons).toHaveLength(0);
        });
        it('renders circles (not checks) for incomplete and upcoming steps', () => {
            const { container } = render(StepperStacked, { props: { steps: defaultSteps, step: 2 } });
            const circles = container.querySelectorAll('.mc-stepper-stacked__circle');
            expect(circles).toHaveLength(2);
        });
        it('circle text reflects 1-based step index', () => {
            const { container } = render(StepperStacked, { props: { steps: defaultSteps, step: 1 } });
            const circles = container.querySelectorAll('.mc-stepper-stacked__circle');
            expect(circles[0].textContent?.trim()).toBe('1');
            expect(circles[1].textContent?.trim()).toBe('2');
            expect(circles[2].textContent?.trim()).toBe('3');
        });
        it('clamps step below 1 to 1', () => {
            const { container } = render(StepperStacked, { props: { steps: defaultSteps, step: 0 } });
            const currentCircles = container.querySelectorAll('.mc-stepper-stacked__circle.is-current');
            expect(currentCircles[0].textContent?.trim()).toBe('1');
        });
        it('clamps step above steps.length to last step', () => {
            const { container } = render(StepperStacked, {
                props: { steps: defaultSteps, step: 99 },
            });
            const currentLabels = container.querySelectorAll('.mc-stepper-stacked__label.is-current');
            expect(currentLabels[0].textContent?.trim()).toBe('Step 3');
            const checkIcons = container.querySelectorAll('.mc-stepper-stacked__icon--check');
            expect(checkIcons).toHaveLength(defaultSteps.length - 1);
        });
        it('defaults to step=1 and empty steps without props', () => {
            const { container } = render(StepperStacked, { props: {} });
            expect(container.querySelectorAll('li')).toHaveLength(0);
        });
        it('handles a single step correctly', () => {
            const { container } = render(StepperStacked, {
                props: { steps: [{ label: 'Only step' }], step: 1 },
            });
            const items = container.querySelectorAll('li');
            expect(items).toHaveLength(1);
            const currentCircles = container.querySelectorAll('.mc-stepper-stacked__circle.is-current');
            expect(currentCircles).toHaveLength(1);
        });
    });
    describe('Active step as string (id-based)', () => {
        const stepsWithIds = [
            { id: 'first', label: 'Step 1', additionalinfo: 'Info 1' },
            { id: 'second', label: 'Step 2' },
            { id: 'third', label: 'Step 3' },
        ];
        it('marks the correct step as current when step matches an id', () => {
            const { container } = render(StepperStacked, {
                props: { steps: stepsWithIds, step: 'second' },
            });
            const currentLabels = container.querySelectorAll('.mc-stepper-stacked__label.is-current');
            expect(currentLabels).toHaveLength(1);
            expect(currentLabels[0].textContent?.trim()).toBe('Step 2');
        });
        it('marks previous steps as completed when step is identified by id', () => {
            const { container } = render(StepperStacked, {
                props: { steps: stepsWithIds, step: 'third' },
            });
            const checkIcons = container.querySelectorAll('.mc-stepper-stacked__icon--check');
            expect(checkIcons).toHaveLength(2);
        });
        it('falls back to the first step when the string id does not match any step', () => {
            const { container } = render(StepperStacked, {
                props: { steps: stepsWithIds, step: 'unknown-id' },
            });
            const currentCircles = container.querySelectorAll('.mc-stepper-stacked__circle.is-current');
            expect(currentCircles).toHaveLength(1);
            expect(currentCircles[0].textContent?.trim()).toBe('1');
        });
        it('renders no completed steps when the first step is active via id', () => {
            const { container } = render(StepperStacked, {
                props: { steps: stepsWithIds, step: 'first' },
            });
            const checkIcons = container.querySelectorAll('.mc-stepper-stacked__icon--check');
            expect(checkIcons).toHaveLength(0);
        });
    });
});
