import { describe, it, expect, vi } from 'vitest';
import { render, fireEvent } from '@testing-library/svelte';
import Pincode from './Pincode.svelte';
describe('m-pincode component', () => {
    const baseProps = {
        id: 'test-pincode',
        length: 4,
    };
    it('renders correct number of inputs', () => {
        const { container } = render(Pincode, { props: baseProps });
        const inputs = container.querySelectorAll('input');
        expect(inputs.length).toBe(4);
    });
    it('displays initial value correctly', () => {
        const value = '1234';
        const { container } = render(Pincode, { props: { ...baseProps, value } });
        const inputs = container.querySelectorAll('input');
        inputs.forEach((input, i) => {
            expect(input.value).toBe(value[i]);
        });
    });
    it('focuses next input on input', async () => {
        const { container } = render(Pincode, { props: baseProps });
        const inputs = container.querySelectorAll('input');
        await fireEvent.input(inputs[0], { target: { value: '5' } });
        expect(document.activeElement).toBe(inputs[1]);
    });
    it('applies disabled and readonly props', () => {
        const { container } = render(Pincode, {
            props: { ...baseProps, disabled: true, readonly: true },
        });
        const inputs = container.querySelectorAll('input');
        inputs.forEach((input) => {
            expect(input).toBeDisabled();
            expect(input).toHaveAttribute('readonly');
        });
    });
    it('applies invalid class when isinvalid is true', () => {
        const { container } = render(Pincode, {
            props: { ...baseProps, isinvalid: true },
        });
        const wrapper = container.querySelector('.mc-pincode-input');
        expect(wrapper.classList.contains('is-invalid')).toBe(true);
    });
    it('emits input event with concatenated value on input', async () => {
        const { container } = render(Pincode, { props: baseProps });
        const root = container.querySelector('.mc-pincode-input');
        const inputHandler = vi.fn();
        root.addEventListener('input', inputHandler);
        const inputs = container.querySelectorAll('input');
        await fireEvent.input(inputs[0], { target: { value: '1' } });
        await fireEvent.input(inputs[1], { target: { value: '2' } });
        expect(inputHandler).toHaveBeenCalled();
        const lastEvent = inputHandler.mock.calls[inputHandler.mock.calls.length - 1][0];
        expect(lastEvent.detail.value).toBe('12');
    });
    it('handles backspace key to clear previous input and focus', async () => {
        const { container } = render(Pincode, { props: baseProps });
        const inputs = container.querySelectorAll('input');
        await fireEvent.input(inputs[0], { target: { value: '1' } });
        await fireEvent.input(inputs[1], { target: { value: '' } });
        await fireEvent.keyDown(inputs[1], { key: 'Backspace' });
        expect(inputs[0].value).toBe('');
        expect(document.activeElement).toBe(inputs[0]);
    });
    it('handles arrow navigation keys', async () => {
        const { container } = render(Pincode, { props: baseProps });
        const inputs = container.querySelectorAll('input');
        inputs[1].focus();
        await fireEvent.keyDown(inputs[1], { key: 'ArrowLeft' });
        expect(document.activeElement).toBe(inputs[0]);
        inputs[0].focus();
        await fireEvent.keyDown(inputs[0], { key: 'ArrowRight' });
        expect(document.activeElement).toBe(inputs[1]);
    });
    it('handles paste event correctly', async () => {
        const { container } = render(Pincode, { props: baseProps });
        const root = container.querySelector('.mc-pincode-input');
        const inputHandler = vi.fn();
        root.addEventListener('input', inputHandler);
        const pasteEvent = new Event('paste', {
            bubbles: true,
            cancelable: true,
        });
        Object.defineProperty(pasteEvent, 'clipboardData', {
            value: {
                getData: () => '9876',
            },
        });
        await root.dispatchEvent(pasteEvent);
        expect(inputHandler).toHaveBeenCalled();
        const inputs = container.querySelectorAll('input');
        inputs.forEach((input, i) => {
            expect(input.value).toBe('9876'[i]);
        });
    });
});
