import { flushPromises, mount } from '@vue/test-utils';
import { defineComponent } from 'vue';
import { createPinia, setActivePinia, storeToRefs } from 'pinia';
import { createTestingPinia } from '@pinia/testing';

import ViewerAppBar from '@/components/modal/app-bars/ViewerAppBar.vue';
import { useSaveStore } from '@/stores/save.store';
import { VBtn, VIcon, VSlideXTransition } from 'vuetify/components';
import { useViewerStore } from '@/stores/viewer.store';
import { getAnimationFrame } from '@test/getAnimationFrame';
import OtaClient from '@crowdin/ota-client';
import { useLanguageStore } from '@/stores/language.store';
import { MockInstance } from '@vitest/spy';
import AvatarDropdownMenu from '@/components/modal/menus/AvatarDropdownMenu.vue';

const app = defineComponent({
  template: '<v-app><ViewerAppBar></ViewerAppBar></v-app>',
  components: { ViewerAppBar }
});

describe('ViewerAppBar tests', () => {
  let wrapper = mount(app, {
    plugins: [createTestingPinia({ createSpy: vi.fn })],
    global: { stubs: ['settings-menu'] }
  });
  setActivePinia(createPinia());
  let getStringsByLocaleSpy: MockInstance;
  let listLanguagesSpy: MockInstance;

  beforeEach(() => {
    getStringsByLocaleSpy = vi.spyOn(OtaClient.prototype, 'getStringsByLocale').mockResolvedValue({});
    listLanguagesSpy = vi.spyOn(OtaClient.prototype, 'listLanguages').mockResolvedValue([]);

    wrapper = mount(app);
  });

  afterEach(() => {
    getStringsByLocaleSpy.mockRestore();
    listLanguagesSpy.mockRestore();

    vi.clearAllMocks();
    wrapper.unmount();
  });

  it('inflates', () => {
    expect(wrapper).toBeTruthy();
  });

  it('shows text', () => {
    const { text, showText } = storeToRefs(useSaveStore());

    showText.value = true;
    expect(wrapper).toBeTruthy();
    expect(wrapper.html()).toContain(text.value);
  });

  it('shows text on hover', async () => {
    const { text, showText } = storeToRefs(useSaveStore());
    const { options } = storeToRefs(useViewerStore());
    showText.value = false;
    options.value.onUpgrade = () => {};
    options.value.onNotificationDropdown = () => {};

    const [_folderIcon, saveIcon] = wrapper.findAllComponents(VIcon);
    await flushPromises();
    await saveIcon.trigger('mouseenter');
    await flushPromises();
    await getAnimationFrame();
    expect(wrapper.findComponent(VSlideXTransition).html()).toContain(text.value);
  });

  it('should upgrade', async () => {
    const onUpgrade = vi.fn();
    const { options } = storeToRefs(useViewerStore());
    options.value.onUpgrade = onUpgrade;
    options.value.onNotificationDropdown = undefined;

    const { showText } = storeToRefs(useSaveStore());
    showText.value = false;

    const [upgradeBtn] = wrapper.findAllComponents(VBtn);
    await flushPromises();
    await upgradeBtn.trigger('click');
    expect(onUpgrade).toHaveBeenCalled();
  });

  it('should close dropdown', async () => {
    vi.spyOn(useLanguageStore(), 'getLanguages').mockResolvedValue([]);
    const onUpgrade = vi.fn();
    const { options } = storeToRefs(useViewerStore());
    options.value.onUpgrade = vi.fn();
    options.value.onNotificationDropdown = onUpgrade;

    const menu = wrapper.findComponent(AvatarDropdownMenu);
    await flushPromises();
    await menu.vm.$emit('close');
    // expect(onUpgrade).toHaveBeenCalled();
  });
});