import { render, fireEvent } from '@testing-library/svelte';
import { describe, it, expect } from 'vitest';
import StarRating from './StarRating.svelte';
function getStars(container) {
    return Array.from(container.querySelectorAll('.mc-star-rating__icon'));
}
function getValue(container) {
    const wrapper = container.querySelector('.mc-star-rating__wrapper');
    const value = wrapper?.getAttribute('aria-valuenow');
    return Number(value);
}
describe('StarRating', () => {
    it('renders 5 stars by default', () => {
        const { container } = render(StarRating, { rating: 0 });
        expect(getStars(container).length).toBe(5);
    });
    it('renders 1 star when compact mode is enabled', () => {
        const { container } = render(StarRating, { rating: 0, compact: true });
        expect(getStars(container).length).toBe(1);
    });
    it('does not allow x.5 value on input mode', async () => {
        const { container } = render(StarRating, { rating: 3, readonly: false });
        const wrapper = container.querySelector('.mc-star-rating__wrapper');
        await fireEvent.keyDown(wrapper, { key: 'ArrowRight' });
        const value = getValue(container);
        expect(value).toBe(4);
    });
    it('allows x.5 values on readonly mode', () => {
        const { container } = render(StarRating, { rating: 1.5, readonly: true });
        const wrapper = container.querySelector('.mc-star-rating__wrapper');
        const label = wrapper?.getAttribute('aria-label');
        expect(label).toBe('Note 1.5 sur 5');
    });
    it('updates rating when clicking a star', async () => {
        const { container } = render(StarRating, { rating: 2, readonly: false });
        const stars = container.querySelectorAll('.mc-star-rating__icon');
        await fireEvent.click(stars[0]);
        const value = getValue(container);
        expect(value).toBe(1);
    });
    it('updates rating when pressing ArrowRight', async () => {
        const { container } = render(StarRating, { rating: 2, readonly: false });
        const wrapper = container.querySelector('.mc-star-rating__wrapper');
        await fireEvent.keyDown(wrapper, { key: 'ArrowRight' });
        const value = getValue(container);
        expect(value).toBe(3);
    });
    it('updates rating when pressing ArrowLeft', async () => {
        const { container } = render(StarRating, { rating: 2, readonly: false });
        const wrapper = container.querySelector('.mc-star-rating__wrapper');
        await fireEvent.keyDown(wrapper, { key: 'ArrowLeft' });
        const value = getValue(container);
        expect(value).toBe(1);
    });
    it('does not update rating when other keys pressed', async () => {
        const { container } = render(StarRating, { rating: 2, readonly: false });
        const wrapper = container.querySelector('.mc-star-rating__wrapper');
        await fireEvent.keyDown(wrapper, { key: 'ArrowUp' });
        const value = getValue(container);
        expect(value).toBe(2);
    });
    it('clears hover on mouseleave', async () => {
        const { container } = render(StarRating, { rating: 2, readonly: false });
        const wrapper = container.querySelector('.mc-star-rating__wrapper');
        const stars = getStars(container);
        await fireEvent.mouseMove(stars[0]);
        expect(wrapper.getAttribute('aria-label')).toContain('1');
        await fireEvent.mouseLeave(wrapper);
        expect(wrapper.getAttribute('aria-label')).toContain('2');
    });
    it('clears hover on blur', async () => {
        const { container } = render(StarRating, { rating: 3, readonly: false });
        const wrapper = container.querySelector('.mc-star-rating__wrapper');
        const stars = getStars(container);
        await fireEvent.focus(wrapper);
        await fireEvent.mouseMove(stars[1]);
        expect(wrapper.getAttribute('aria-label')).toContain('2');
        await fireEvent.blur(wrapper);
        expect(wrapper.getAttribute('aria-label')).toContain('3');
    });
    it('renders info text when text is provided', () => {
        const { container } = render(StarRating, {
            rating: 3,
            text: 'Note publique',
        });
        const info = container.querySelector('.mc-star-rating__info');
        expect(info).not.toBeNull();
        expect(info?.textContent).toBe('Note publique');
    });
    it('renders href text when provided and no text', () => {
        const { container } = render(StarRating, { rating: 2, href: '/voir' });
        const info = container.querySelector('.mc-star-rating__info');
        expect(info).not.toBeNull();
        expect(info?.textContent).toBe('/voir');
    });
    it('does not render info span when neither text nor href provided', () => {
        const { container } = render(StarRating, { rating: 1 });
        expect(container.querySelector('.mc-star-rating__info')).toBeNull();
    });
    it('renders <a> when href provided', () => {
        const { container } = render(StarRating, { rating: 1, href: '#' });
        expect(container.querySelector('a')).toBeTruthy();
    });
    it('renders <div> when no href provided', () => {
        const { container } = render(StarRating, { rating: 1 });
        expect(container.querySelector('div.mc-star-rating')).toBeTruthy();
    });
});
