import { shallowMount } from '@vue/test-utils';
import { nextTick } from 'vue';
import { beforeEach, describe, expect, it, vi } from 'vitest';
import { KviewMultiSelect } from '@kview/ui-core/vue';

const routerGet = vi.hoisted(() => vi.fn());

vi.mock('@inertiajs/vue3', () => ({
    router: {
        get: routerGet,
    },
}));

import DashboardFilterBar from '@/components/dashboard/DashboardFilterBar.vue';
import type { DashboardFilterOptions, DashboardFilters } from '@/types/dashboard';

const filters: DashboardFilters = {
    gp_id: [],
    fund_id: [],
    investor_id: [],
    as_of_date: '2026-09-04',
    include_fees_in_multiples: false,
    amount_scaling: 'million',
    overview_period: 'ytd',
    dashboard_view: 'overview',
};

const filterOptions: DashboardFilterOptions = {
    gps: [
        { value: 'gp-1', label: 'Atlas General Partner' },
        { value: 'gp-2', label: 'Northstar Capital' },
    ],
    funds: [{ value: 'fund-1', label: 'Atlas Fund I' }],
    investors: [{ value: 'investor-1', label: 'Example Investor' }],
    amountScaling: [{ value: 'million', label: 'Millions' }],
};

beforeEach(() => {
    routerGet.mockReset();
});

describe('DashboardFilterBar', () => {
    it('renders the GP multiselect and submits all selected GP values', async () => {
        const wrapper = shallowMount(DashboardFilterBar, {
            props: {
                filters,
                filterOptions,
                indexUrl: '/dashboard',
                activeTab: 'commitment',
            },
        });
        const multiselects = wrapper.findAllComponents(KviewMultiSelect);
        const gpFilter = multiselects.find((multiselect) => multiselect.props('name') === 'gp_id');

        expect(gpFilter).toBeDefined();
        expect(gpFilter?.props()).toMatchObject({
            label: 'GP',
            options: filterOptions.gps,
            placeholder: 'All GPs',
            searchable: true,
        });

        gpFilter?.vm.$emit('update:modelValue', ['gp-1', 'gp-2']);
        await nextTick();
        await wrapper.get('form').trigger('submit');

        expect(routerGet).toHaveBeenCalledWith('/dashboard', {
            gp_id: ['gp-1', 'gp-2'],
            fund_id: null,
            investor_id: null,
            as_of_date: '2026-09-04',
            amount_scaling: 'million',
            include_fees_in_multiples: null,
            overview_period: 'ytd',
            dashboard_view: 'commitment',
        }, {
            preserveState: true,
            preserveScroll: true,
        });
    });
});