import { describe, it, expect, vi } from 'vitest';
import { render, fireEvent } from '@testing-library/svelte';
import PhoneNumber from './PhoneNumber.svelte';
describe('m-phone-number component', () => {
    const baseProps = {
        id: 'phone-id',
        value: '',
        defaultcountry: 'FR',
    };
    it('renders component root and input', () => {
        const { container } = render(PhoneNumber, { props: baseProps });
        const root = container.querySelector('#mc-phone-number-input');
        const input = container.querySelector('input[type="tel"]');
        expect(root).toBeTruthy();
        expect(input).toBeTruthy();
        expect(input?.id).toBe('phone-id');
    });
    it('renders prefix when prefix=true', () => {
        const { container } = render(PhoneNumber, { props: { ...baseProps, prefix: true } });
        const prefix = container.querySelector('.mc-phone-number-input__country-code');
        expect(prefix).toBeTruthy();
    });
    it('hides prefix when prefix=false', () => {
        const { container } = render(PhoneNumber, { props: { ...baseProps, prefix: false } });
        const prefix = container.querySelector('.mc-phone-number-input__country-code');
        expect(prefix).toBeFalsy();
    });
    it('renders flag selector when flag=true', () => {
        const { container } = render(PhoneNumber, { props: { ...baseProps, flag: true } });
        const selectWrapper = container.querySelector('.mc-phone-number-input__select-wrapper');
        expect(selectWrapper).toBeTruthy();
        expect(selectWrapper?.classList.contains('mc-phone-number-input__select-wrapper--hidden')).toBe(false);
    });
    it('hides flag selector when flag=false', () => {
        const { container } = render(PhoneNumber, { props: { ...baseProps, flag: false } });
        const selectWrapper = container.querySelector('.mc-phone-number-input__select-wrapper');
        expect(selectWrapper?.classList.contains('mc-phone-number-input__select-wrapper--hidden')).toBe(true);
    });
    it('applies disabled and readonly props to input', () => {
        const { container } = render(PhoneNumber, {
            props: { ...baseProps, disabled: true, readonly: true },
        });
        const input = container.querySelector('input');
        expect(input.disabled).toBe(true);
        expect(input.readOnly).toBe(true);
    });
    it('updates internal value when typing', async () => {
        const { container } = render(PhoneNumber, { props: baseProps });
        const input = container.querySelector('input[type="tel"]');
        await fireEvent.input(input, { target: { value: '012345' } });
        expect(input.value).toBe('012345');
    });
    it('sanitizes invalid characters', async () => {
        const { container } = render(PhoneNumber, { props: baseProps });
        const input = container.querySelector('input[type="tel"]');
        await fireEvent.input(input, { target: { value: '12a3#4' } });
        expect(input.value).toBe('1234');
    });
    it('emits valid event with true when value becomes valid', async () => {
        const { container } = render(PhoneNumber, {
            props: { id: 'phone', defaultcountry: 'FR' },
        });
        const root = container.querySelector('#mc-phone-number-input');
        const input = container.querySelector('input[type="tel"]');
        const validHandler = vi.fn();
        root.addEventListener('valid', validHandler);
        await fireEvent.input(input, { target: { value: '0601020304' } });
        expect(validHandler).toHaveBeenCalledOnce();
        expect(validHandler.mock.calls[0][0].detail).toBe(true);
    });
    it('applies is-invalid class when isinvalid=true', () => {
        const { container } = render(PhoneNumber, {
            props: { ...baseProps, isinvalid: true },
        });
        const wrapper = container.querySelector('.mc-phone-number-input__input');
        expect(wrapper.classList.contains('is-invalid')).toBe(true);
    });
    it('renders dynamic placeholder when no placeholder is passed', () => {
        const { container } = render(PhoneNumber, {
            props: { ...baseProps, placeholder: '' },
        });
        const input = container.querySelector('input[type="tel"]');
        expect(input.placeholder.length).toBeGreaterThan(0);
    });
    it('renders provided placeholder over dynamic one', () => {
        const { container } = render(PhoneNumber, {
            props: { ...baseProps, placeholder: 'Enter your phone' },
        });
        const input = container.querySelector('input[type="tel"]');
        expect(input.placeholder).toBe('Enter your phone');
    });
    it('renders only allowed countries when countrycodes is provided', () => {
        const { container } = render(PhoneNumber, {
            props: { ...baseProps, countrycodes: ['FR', 'US'] },
        });
        const options = Array.from(container.querySelectorAll('select option'))
            .map((opt) => opt.getAttribute('value'))
            .filter(Boolean);
        expect(options).toContain('FR');
        expect(options).toContain('US');
        expect(options.length).toBe(2);
    });
});
