import { createWrapper } from 'app/test/vitest/helper.js';
import { describe, it, expect, beforeAll } from 'vitest';
import VnInputDateTime from 'components/common/VnInputDateTime.vue';
import vnDateBoot from 'src/boot/vnDate';

let vm;
let wrapper;

beforeAll(() => {
    // Initialize the vnDate boot
    vnDateBoot();
});
function generateWrapper(date, outlined, showEvent) {
    wrapper = createWrapper(VnInputDateTime, {
        props: {
            modelValue: date,
            isOutlined: outlined,
            showEvent: showEvent,
        },
    });
    wrapper = wrapper.wrapper;
    vm = wrapper.vm;
}

describe('VnInputDateTime', () => {
    describe('selectedDate', () => {
        it('formats a valid datetime correctly', async () => {
            generateWrapper('2023-12-25T10:30:00', false, true);
            await vm.$nextTick();
            expect(vm.selectedDate).toBe('25-12-2023 10:30');
        });

        it('handles null date value', async () => {
            generateWrapper(null, false, true);
            await vm.$nextTick();
            expect(vm.selectedDate).not.toBe(null);
        });

        it('updates the model value when a new datetime is set', async () => {
            vm.selectedDate = '31-12-2023 15:45';
            await vm.$nextTick();
            expect(wrapper.emitted()['update:modelValue']).toBeTruthy();
        });
    });

    describe('styleAttrs', () => {
        it('should return empty styleAttrs when isOutlined is false', async () => {
            generateWrapper('2023-12-25T10:30:00', false, true);
            await vm.$nextTick();
            expect(vm.styleAttrs).toEqual({});
        });

        it('should set styleAttrs when isOutlined is true', async () => {
            generateWrapper('2023-12-25T10:30:00', true, true);
            await vm.$nextTick();
            expect(vm.styleAttrs).toEqual({
                dense: true,
                outlined: true,
                rounded: true,
            });
        });
    });

    describe('component rendering', () => {
        it('should render date and time icons', async () => {
            generateWrapper('2023-12-25T10:30:00', false, true);
            await vm.$nextTick();
            const icons = wrapper.findAllComponents({ name: 'QIcon' });
            expect(icons.length).toBe(2);
            expect(icons[0].props('name')).toBe('today');
            expect(icons[1].props('name')).toBe('access_time');
        });

        it('should render popup proxies for date and time', async () => {
            generateWrapper('2023-12-25T10:30:00', false, true);
            await vm.$nextTick();
            const popups = wrapper.findAllComponents({ name: 'QPopupProxy' });
            expect(popups.length).toBe(2);
        });
    });
});