import { describe, it, expect } from 'vitest';
import { render, fireEvent } from '@testing-library/svelte';
import Datepicker from './Datepicker.svelte';
describe('m-datepicker component', () => {
    const id = 'my-datepicker';
    it('renders input with default size "m"', () => {
        const { container } = render(Datepicker, {
            props: { id },
        });
        const wrapper = container.querySelector('.mc-datepicker');
        expect(wrapper).toBeTruthy();
        expect(wrapper?.classList.contains('mc-text-input--m')).toBe(true);
        const input = container.querySelector('input[type="date"]');
        expect(input).toBeTruthy();
        expect(input.id).toBe(id);
    });
    it('renders with custom size "s"', () => {
        const { container } = render(Datepicker, {
            props: { id, size: 's' },
        });
        const wrapper = container.querySelector('.mc-datepicker');
        expect(wrapper?.classList.contains('mc-text-input--s')).toBe(true);
        expect(wrapper?.classList.contains('mc-datepicker--s')).toBe(true);
    });
    it('renders with pre-filled value', () => {
        const { container } = render(Datepicker, {
            props: { id, value: '2025-10-15' },
        });
        const input = container.querySelector('input[type="date"]');
        expect(input.value).toBe('2025-10-15');
    });
    it('updates the bound value on user input', async () => {
        const { container } = render(Datepicker, {
            props: { id, value: '2025-10-15' },
        });
        const input = container.querySelector('input[type="date"]');
        await fireEvent.input(input, { target: { value: '2025-12-01' } });
        expect(input.value).toBe('2025-12-01');
    });
    it('renders disabled and readonly states correctly', () => {
        const { container } = render(Datepicker, {
            props: { id, disabled: true, readonly: true },
        });
        const input = container.querySelector('input');
        expect(input.disabled).toBe(true);
        expect(input.readOnly).toBe(true);
    });
    it('applies invalid state with aria-invalid', () => {
        const { container } = render(Datepicker, {
            props: { id, isinvalid: true },
        });
        const input = container.querySelector('input');
        expect(input).toHaveAttribute('aria-invalid', 'true');
        const wrapper = container.querySelector('.mc-datepicker');
        expect(wrapper.classList.contains('is-invalid')).toBe(true);
    });
    it('shows clear button when isclearable is true and value is set', () => {
        const { getByRole, getByText } = render(Datepicker, {
            props: {
                id,
                value: '2025-10-10',
                isclearable: true,
                clearlabel: 'Clear date',
            },
        });
        const clearButton = getByRole('button');
        expect(clearButton).toBeTruthy();
        expect(getByText('Clear date')).toBeTruthy();
    });
    it('clears value when clear button is clicked', async () => {
        const { container, getByRole } = render(Datepicker, {
            props: {
                id,
                value: '2025-10-10',
                isclearable: true,
            },
        });
        const input = container.querySelector('input');
        expect(input.value).toBe('2025-10-10');
        const button = getByRole('button');
        await fireEvent.click(button);
        expect(input.value).toBe('');
    });
    it('does not render clear button if value is not set', () => {
        const { container } = render(Datepicker, {
            props: {
                id,
                isclearable: true,
                value: '',
            },
        });
        const button = container.querySelector('button');
        expect(button).toBeNull();
    });
});
