import { describe, it, expect, beforeEach } from 'vitest';
import { mount, type VueWrapper } from '@vue/test-utils';
import { createVuetify } from 'vuetify';
import { createPinia, setActivePinia } from 'pinia';
import RegionsBulkDialog from '../../resources/js/components/projects/RegionsBulkDialog.vue';

const vuetify = createVuetify();

const mountDialog = (count = 5) =>
    mount(RegionsBulkDialog, {
        props: { modelValue: true, count },
        global: {
            plugins: [vuetify, createPinia()],
            stubs: { VDialog: { template: '<div><slot /></div>' } },
        },
    });

interface DialogVm {
    addRegions: number[];
    removeRegions: number[];
}

describe('RegionsBulkDialog', () => {
    beforeEach(() => setActivePinia(createPinia()));

    it('renders subject-level Add and Remove selectors (not federal districts)', () => {
        const wrapper = mountDialog();
        expect(wrapper.find('[data-testid="region-add-select"]').exists()).toBe(true);
        expect(wrapper.find('[data-testid="region-remove-select"]').exists()).toBe(true);
    });

    it('shows count from prop', () => {
        const wrapper = mountDialog(7);
        expect(wrapper.text()).toContain('7');
    });

    it('emits apply with selected subject codes', async () => {
        const wrapper = mountDialog();
        (wrapper.vm as unknown as DialogVm).addRegions = [82, 83];
        (wrapper.vm as unknown as DialogVm).removeRegions = [56];
        await wrapper.vm.$nextTick();
        await wrapper.find('[data-testid="apply"]').trigger('click');

        expect(wrapper.emitted('apply')?.[0]).toEqual([{ add_regions: [82, 83], remove_regions: [56] }]);
    });

    it('apply button disabled when nothing selected', () => {
        const wrapper = mountDialog();
        expect(wrapper.find('[data-testid="apply"]').attributes('disabled')).toBeDefined();
    });

    it('apply button enabled once a subject is picked', async () => {
        const wrapper = mountDialog();
        (wrapper.vm as unknown as DialogVm).addRegions = [82];
        await wrapper.vm.$nextTick();
        expect(wrapper.find('[data-testid="apply"]').attributes('disabled')).toBeUndefined();
    });

    it('both region selectors have closable-chips so a single subject can be removed', () => {
        const wrapper = mountDialog();
        const addAc = wrapper.findComponent('[data-testid="region-add-select"]');
        const removeAc = wrapper.findComponent('[data-testid="region-remove-select"]');
        // eslint-disable-next-line @typescript-eslint/no-explicit-any
        expect((addAc as VueWrapper<any>).props('closableChips')).toBe(true);
        // eslint-disable-next-line @typescript-eslint/no-explicit-any
        expect((removeAc as VueWrapper<any>).props('closableChips')).toBe(true);
    });
});