import { vi, describe, it, expect, beforeEach } from 'vitest';
import { createWrapper, axios } from 'app/test/vitest/helper';

import VnLocation from 'src/components/common/VnLocation.vue'; // Ajusta la ruta según tu estructura de proyecto

describe('VnLocation', () => {
    let wrapper, vm;

    beforeEach(() => {
        vi.spyOn(axios, 'get').mockResolvedValue({
            data: [
                {
                    townFk: 1,
                    provinceFk: 1,
                    countryFk: 1,
                    code: '46000',
                    town: 'Valencia',
                    province: 'Province one',
                    country: 'España',
                },
                {
                    townFk: 1,
                    provinceFk: 1,
                    countryFk: 1,
                    code: '46600',
                    town: 'Valencia',
                    province: 'Province one',
                    country: 'España',
                },
                {
                    townFk: 2,
                    provinceFk: 1,
                    countryFk: 1,
                    code: '46460',
                    town: 'Gotham',
                    province: 'Province one',
                    country: 'España',
                },
                {
                    townFk: 3,
                    provinceFk: 1,
                    countryFk: 1,
                    code: '46680',
                    town: 'Algemesi',
                    province: 'Province one',
                    country: 'España',
                },
                {
                    townFk: 4,
                    provinceFk: 1,
                    countryFk: 1,
                    code: '46600',
                    town: 'Alzira',
                    province: 'Province one',
                    country: 'España',
                },
                {
                    townFk: 5,
                    provinceFk: 5,
                    countryFk: 13,
                    code: 'EC170150',
                    town: 'Quito',
                    province: 'Province five',
                    country: 'Ecuador',
                },
            ],
        });
        const cmp = createWrapper(VnLocation, {
            global: {
                stubs: [
                    'vnPaginate',
                    'useState',
                    'arrayData',
                    'useStateStore',
                    'vue-i18n',
                ],
            },
        });
        wrapper = cmp.wrapper;
        vm = cmp.vm;
    });

    it.only('should handle click on input', async () => {
        // Simula el clic en el input de ubicación
        await wrapper.get('input[aria-label="Location"]').trigger('click');
        const labelFormatted = vm.showLabel({
            townFk: 5,
            provinceFk: 5,
            countryFk: 13,
            code: 'EC170150',
            town: 'Quito',
            province: 'Province five',
            country: 'Ecuador',
        });
        expect(labelFormatted).toBe('EC170150, Quito(Province five), Ecuador');
        // Verifica que los datos se hayan cargado correctamente
        await wrapper.vm.$nextTick(); // Espera a que se actualice el DOM
        const options = wrapper.findAll('select[name="town"] option');
        expect(options).toHaveLength(6); // Verifica que las opciones se hayan cargado
    });
    it('should filter provinces based on selected country', async () => {
        // Simula la selección de un país
        const element = await wrapper.get('input[aria-label="Location"]');
        element.setValue('Ecuador');
        await vm.$nextTick();

        // Verifica que las provincias se filtren
        const provinces = wrapper.findAll('select[name="province"] option');
        expect(provinces).toHaveLength(1);
    });

    it('should filter towns based on selected province', async () => {
        // Simula la selección de una provincia
        await wrapper.find('select[name="province"]').setValue('Ecuador');

        // Verifica que los pueblos se filtren
        const towns = wrapper.findAll('select[name="town"] option');
        expect(towns).toHaveLength(1);
    });

    it('should pass selected country', async () => {
        const country = 'Ecuador';
        const province = 'Province five';

        // Simula la selección de un país y una provincia
        await wrapper.find('select[name="country"]').setValue(country);
        await wrapper.find('select[name="province"]').setValue(province);

        // Verifica que el valor seleccionado se pase correctamente
        expect(wrapper.find('select[name="province"]').element.value).toBe(province);
    });
});