import { flushPromises, mount, type VueWrapper } from '@vue/test-utils';
import Antd, { Select } from 'ant-design-vue';
import { afterEach, beforeAll, describe, expect, it } from 'vitest';

import DropdownOptions from '../../src/components/DropdownOptions.vue';
import type { DropdownOption } from '../../src/domain/types';

beforeAll(() => {
  window.matchMedia ??= () =>
    ({
      addEventListener() {},
      addListener() {},
      dispatchEvent: () => false,
      matches: false,
      media: '',
      onchange: null,
      removeEventListener() {},
      removeListener() {},
    }) as MediaQueryList;

  globalThis.ResizeObserver ??= class ResizeObserver {
    disconnect() {}
    observe() {}
    unobserve() {}
  };
});

function mountOptions(options: DropdownOption[], defaultValue = '', disabled = false, errorField?: 'dropdown-default' | 'dropdown-options', errorId?: string) {
  const wrapper = mount(DropdownOptions, {
    props: { defaultValue, disabled, errorField, errorId, options },
    attachTo: document.body,
    global: { plugins: [Antd] },
  });
  mountedWrappers.push(wrapper);
  return wrapper;
}

const mountedWrappers: VueWrapper[] = [];

afterEach(() => {
  mountedWrappers.splice(0).forEach((wrapper) => wrapper.unmount());
  document.body.replaceChildren();
});

describe('DropdownOptions', () => {
  it('两项时禁用删除，添加第三项后允许删除且不修改 props', async () => {
    const options = [
      { display: '', value: '' },
      { display: '', value: '' },
    ];
    const wrapper = mountOptions(options);

    expect(wrapper.findAll('[data-test^="remove-option-"]')).toHaveLength(2);
    expect(wrapper.findAll('[data-test^="remove-option-"]').every((button) => button.attributes('disabled') !== undefined)).toBe(true);

    await wrapper.get('[data-test="add-option"]').trigger('click');
    const added = wrapper.emitted<DropdownOption[][]>('update:options')?.at(-1)?.[0];
    expect(added).toEqual([...options, { display: '', value: '' }]);
    expect(options).toHaveLength(2);

    await wrapper.setProps({ options: added });
    expect(wrapper.findAll('[data-test^="remove-option-"]').every((button) => button.attributes('disabled') === undefined)).toBe(true);
    expect(wrapper.get('[data-test="option-display-0"]').attributes('aria-label')).toBe('第1项显示名称');
    expect(wrapper.get('[data-test="option-value-1"]').attributes('aria-label')).toBe('第2项业务值');
    expect(wrapper.get('[data-test="remove-option-2"]').attributes('aria-label')).toBe('删除第3项');
    await wrapper.get('[data-test="remove-option-2"]').trigger('click');
    expect(wrapper.emitted<DropdownOption[][]>('update:options')?.at(-1)?.[0]).toEqual(options);
  });

  it('编辑选项时发送新数组，并在默认业务值失效时清空默认项', async () => {
    const options = [
      { display: '甲', value: 'a' },
      { display: '乙', value: 'b' },
    ];
    const wrapper = mountOptions(options, 'a');

    await wrapper.get('[data-test="option-display-0"]').setValue('甲项');
    const displayUpdated = wrapper.emitted<DropdownOption[][]>('update:options')?.at(-1)?.[0];
    expect(displayUpdated).toEqual([
      { display: '甲项', value: 'a' },
      { display: '乙', value: 'b' },
    ]);
    expect(options[0]?.display).toBe('甲');

    await wrapper.setProps({ options: displayUpdated });
    await wrapper.get('[data-test="option-value-0"]').setValue('changed');
    expect(wrapper.emitted<DropdownOption[][]>('update:options')?.at(-1)?.[0]).toEqual([
      { display: '甲项', value: 'changed' },
      { display: '乙', value: 'b' },
    ]);
    expect(wrapper.emitted('update:defaultValue')?.at(-1)).toEqual(['']);
  });

  it('删除当前默认项时清空默认值，默认下拉只列出完整选项', async () => {
    const options = [
      { display: '甲', value: 'a' },
      { display: '', value: 'incomplete' },
      { display: '丙', value: 'c' },
    ];
    const wrapper = mountOptions(options, 'c');
    const select = wrapper.findComponent(Select);

    expect(select.props('options')).toEqual([
      { label: '无默认项', value: '' },
      { label: '甲', value: 'a' },
      { label: '丙', value: 'c' },
    ]);

    await wrapper.get('[data-test="remove-option-2"]').trigger('click');
    expect(wrapper.emitted('update:defaultValue')?.at(-1)).toEqual(['']);
  });

  it('通过默认下拉发送业务值，并把弹层挂到组件根元素', async () => {
    const wrapper = mountOptions([
      { display: '甲', value: 'a' },
      { display: '乙', value: 'b' },
    ]);
    const select = wrapper.findComponent(Select);

    expect(wrapper.get('[data-test="option-display-0"]').attributes('id')).toBe('dropdown-option-display-0');
    expect(wrapper.get('[data-test="option-value-0"]').attributes('id')).toBe('dropdown-option-value-0');
    expect(select.attributes('aria-label')).toBe('默认项');
    expect(select.get('input').attributes('id')).toBe('dropdown-default');
    expect(wrapper.get('label.default-label').attributes('for')).toBe('dropdown-default');
    expect(wrapper.get('[data-test="option-display-0"]').attributes('aria-invalid')).toBeUndefined();
    expect(select.attributes('aria-invalid')).toBeUndefined();
    select.vm.$emit('update:value', 'b');
    await wrapper.vm.$nextTick();
    expect(wrapper.emitted('update:defaultValue')?.at(-1)).toEqual(['b']);
    expect(select.props('getPopupContainer')?.(document.body)).toBe(wrapper.get('[data-test="dropdown-options"]').element);
  });

  it('按错误字段关联首个选项输入或默认项 Select', () => {
    const options = [
      { display: '甲', value: 'a' },
      { display: '乙', value: 'b' },
    ];
    const optionsWrapper = mountOptions(options, '', false, 'dropdown-options', 'dropdown-options-error');
    expect(optionsWrapper.get('[data-test="option-display-0"]').attributes()).toMatchObject({
      'aria-describedby': 'dropdown-options-error',
      'aria-invalid': 'true',
    });
    expect(optionsWrapper.get('[data-test="option-display-1"]').attributes('aria-describedby')).toBeUndefined();

    const defaultWrapper = mountOptions(options, 'unknown', false, 'dropdown-default', 'dropdown-default-error');
    expect(defaultWrapper.findComponent(Select).attributes()).toMatchObject({
      'aria-describedby': 'dropdown-default-error',
      'aria-invalid': 'true',
    });
    expect(defaultWrapper.get('[data-test="option-display-0"]').attributes('aria-invalid')).toBeUndefined();
  });

  it('真实打开默认项下拉并点击选项更新业务值', async () => {
    const wrapper = mountOptions([
      { display: '甲', value: 'a' },
      { display: '乙', value: 'b' },
    ]);
    const root = wrapper.get('[data-test="dropdown-options"]');

    const selector = wrapper.get('[data-test="dropdown-default"] .ant-select-selector');
    await selector.trigger('mousedown');
    await selector.trigger('click');
    await flushPromises();
    const dropdown = root.get('.ant-select-dropdown');
    expect(root.element.contains(dropdown.element)).toBe(true);
    const option = dropdown.findAll('.ant-select-item-option').find((item) => item.text() === '乙')!;
    await option.trigger('click');
    await flushPromises();

    expect(wrapper.emitted('update:defaultValue')?.at(-1)).toEqual(['b']);
  });

  it('disabled 时禁止编辑、添加、删除和选择默认项', async () => {
    const wrapper = mountOptions(
      [
        { display: '甲', value: 'a' },
        { display: '乙', value: 'b' },
        { display: '丙', value: 'c' },
      ],
      '',
      true,
    );

    expect(wrapper.get('[data-test="option-display-0"]').attributes('disabled')).toBeDefined();
    expect(wrapper.get('[data-test="option-value-0"]').attributes('disabled')).toBeDefined();
    expect(wrapper.get('[data-test="add-option"]').attributes('disabled')).toBeDefined();
    expect(wrapper.get('[data-test="remove-option-2"]').attributes('disabled')).toBeDefined();
    expect(wrapper.findComponent(Select).props('disabled')).toBe(true);
    wrapper.findComponent(Select).vm.$emit('update:value', 'b');
    await wrapper.vm.$nextTick();
    expect(wrapper.emitted('update:defaultValue')).toBeUndefined();
  });
});