import ViewerAppBar from '@/components/modal/app-bars/ViewerAppBar.vue';
import AvatarDropdownMenu from '@/components/modal/menus/AvatarDropdownMenu.vue';
import { useSaveStore } from '@/stores/save.store';
import { useViewerStore } from '@/stores/viewer.store';
import { getAnimationFrame } from '@test/getAnimationFrame';
import { flushPromises, mount } from '@vue/test-utils';
import { storeToRefs } from 'pinia';
import { defineComponent } from 'vue';
import { VBtn, VIcon, VSlideXTransition } from 'vuetify/components';

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

describe('ViewerAppBar tests', () => {
  let wrapper = mount(app, {
    global: { stubs: ['settings-menu'] },
  });

  beforeEach(() => {
    wrapper = mount(app);
  });

  afterEach(() => {
    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 () => {
    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();
  });
});