import { vi, describe, expect, it, beforeEach, beforeAll, afterEach } from 'vitest';
import { createWrapper } from 'app/test/vitest/helper';
import UserPanel from 'src/components/UserPanel.vue';
import axios from 'axios';
import { useState } from 'src/composables/useState';

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

    beforeEach(() => {
        wrapper = createWrapper(UserPanel, {});
        state = useState();
        state.setUser({
            id: 115,
            name: 'itmanagement',
            nickname: 'itManagementNick',
            lang: 'en',
            darkMode: false,
            companyFk: 442,
            warehouseFk: 1,
        });
        wrapper = wrapper.wrapper;
        vm = wrapper.vm;
    });

    afterEach(() => {
        vi.clearAllMocks();
    });

    it('should fetch warehouses data on mounted', async () => {
        const fetchData = wrapper.findComponent({ name: 'FetchData' });
        expect(fetchData.props('url')).toBe('Warehouses');
        expect(fetchData.props('autoLoad')).toBe(true);
    });

    it('should toggle dark mode correctly and update preferences', async () => {
        await vm.saveDarkMode(true);
        expect(axios.patch).toHaveBeenCalledWith('/UserConfigs/115', { darkMode: true });
        expect(vm.user.darkMode).toBe(true);
        vm.updatePreferences();
        expect(vm.darkMode).toBe(true);
    });

    it('should change user language and update preferences', async () => {
        const userLanguage = 'es';
        await vm.saveLanguage(userLanguage);
        expect(axios.patch).toHaveBeenCalledWith('/VnUsers/115', { lang: userLanguage });
        expect(vm.user.lang).toBe(userLanguage);
        vm.updatePreferences();
        expect(vm.locale).toBe(userLanguage);
    });

    it('should update user data', async () => {
        const key = 'name';
        const value = 'itboss';
        await vm.saveUserData(key, value);
        expect(axios.post).toHaveBeenCalledWith('UserConfigs/setUserConfig', {
            [key]: value,
        });
    });
});