import KeyboardShortcuts from '@/components/shared/KeyboardShortcuts.vue';
import { mount } from '@vue/test-utils';
import { VBtn, VDialog, VTextField } from 'vuetify/components';
import { nextTick } from 'vue';

describe('KeyboardShortcuts', () => {
  it('should render the dialog correctly', async () => {
    const wrapper = mount(KeyboardShortcuts);
    const dialog = wrapper.findComponent(VDialog);
    expect(dialog.isVisible()).toBe(true);
  });

  it('should filter items based on search input', async () => {
    const wrapper = mount(KeyboardShortcuts);
    await wrapper.setProps({ modelValue: true });
    const searchInput = wrapper.findComponent(VTextField);
    expect(searchInput.isVisible()).toBe(true);
    await searchInput.setValue('display');
    await nextTick();
    expect(wrapper.text()).not.toContain('Annotation');
  });

  it('should close the dialog when the close button is clicked', async () => {
    const wrapper = mount(KeyboardShortcuts);
    await wrapper.setProps({ modelValue: true });
    const closeButton = wrapper.findAllComponents(VBtn)[0];
    expect(closeButton.exists()).toBe(true);
    await closeButton.trigger('click');
    await nextTick();
    const dialog = wrapper.findComponent(VDialog);
    expect(dialog.props('modelValue')).toBe(false);
  });

  // Note: Coverage engine crashing with stackoverflow when triggered
  // it('should clear the search when the close search button is clicked', async () => {
  //   const wrapper = mount(KeyboardShortcuts);
  //   await wrapper.setProps({ modelValue: true });
  //   const closeSearchButton = wrapper.findAllComponents(VBtn)[1];
  //   expect(closeSearchButton.exists()).toBe(true);
  //   const searchInput = wrapper.findComponent(VTextField);
  //   await searchInput.setValue('test');
  //   expect(searchInput.props('modelValue')).toBe('test');
  //   const foundSearchButton = wrapper.findComponentByTestId('close-btn-search');
  //
  //   await flushPromises();
  //   await foundSearchButton.trigger('click');
  //   await nextTick();
  //   expect(searchInput.props('modelValue')).toBe('');
  // });
});