import { flushPromises, mount } from '@vue/test-utils';
import McadUpdateModal from '@/components/navigation/mcad/McadUpdateModal.vue';
import { VCard, VOverlay } from 'vuetify/components';
import { useViewer3cr } from '@/composables/useViewer3cr';
import { DataOverlayMcadFaker } from '@test/fakers/data-overlay-mcad.faker';
import { beforeEach } from '@vitest/runner';
import ColourPalette from '@/components/shared/ColourPalette.vue';
import ShTextarea from '@/components/shared/ShTextarea.vue';
import ShTextField from '@/components/shared/ShTextField.vue';

describe('McadUpdateModal tests', () => {
  const viewer3cr = useViewer3cr();
  const mcad = DataOverlayMcadFaker.random();
  const setMcadObjectTitleSpy = vi.spyOn(viewer3cr, 'setMcadObjectTitle');
  const setMcadObjectColourSpy = vi.spyOn(viewer3cr, 'setMcadObjectColour');

  beforeEach(() => {
    setMcadObjectTitleSpy.mockClear();
    setMcadObjectColourSpy.mockClear();
  });

  it('should mount', () => {
    const props = { mcad };
    const wrapper = mount(McadUpdateModal, { props });
    expect(wrapper).toBeTruthy();
  });

  it('should mount open', () => {
    const props = { mcad, modelValue: true };
    const wrapper = mount(McadUpdateModal, { props });
    expect(wrapper).toBeTruthy();
    expect(wrapper.findComponent(VCard).exists()).toBe(true);
  });

  it('should mount open then close on btn click', async () => {
    const props = { mcad, modelValue: true };
    const wrapper = mount(McadUpdateModal, { props });
    expect(wrapper).toBeTruthy();
    expect(wrapper.findComponent(VCard).exists()).toBe(true);

    const close = wrapper.findComponentByTestId('close');

    await close.trigger('click');

    await flushPromises();
    expect(wrapper.vm.modal).toStrictEqual(false);
  });

  it('should mount open then close on btn click', async () => {
    const props = { mcad, modelValue: true };
    const wrapper = mount(McadUpdateModal, { props });
    expect(wrapper).toBeTruthy();
    expect(wrapper.findComponent(VCard).exists()).toBe(true);

    const close = wrapper.findComponentByTestId('close-top');

    await close.trigger('click');

    await flushPromises();
    expect(wrapper.vm.modal).toStrictEqual(false);
  });

  it('should mount open edit ShTextarea', async () => {
    const props = { mcad, modelValue: true };
    const wrapper = mount(McadUpdateModal, { props });
    expect(wrapper).toBeTruthy();
    const snack = wrapper.findComponent(ShTextarea);
    const save = wrapper.findComponentByTestId('save');

    expect(snack.isVisible()).toBe(true);

    await snack.setValue('123');

    await save.trigger('click');

    expect(setMcadObjectColourSpy).toHaveBeenCalled();
    expect(setMcadObjectTitleSpy).toHaveBeenCalled();
  });

  it('should mount open edit ShTextarea', async () => {
    const props = { mcad, modelValue: true };
    const wrapper = mount(McadUpdateModal, { props });
    expect(wrapper).toBeTruthy();
    const snack = wrapper.findComponent(ShTextField);
    const save = wrapper.findComponentByTestId('save');

    expect(snack.isVisible()).toBe(true);

    await snack.setValue('123');

    await save.trigger('click');

    expect(setMcadObjectColourSpy).toHaveBeenCalled();
    expect(setMcadObjectTitleSpy).toHaveBeenCalled();
  });

  it('should mount open edit ShTextarea', async () => {
    const props = { mcad, modelValue: true };
    const wrapper = mount(McadUpdateModal, { props });
    expect(wrapper).toBeTruthy();
    const colourPalette = wrapper.findComponent(ColourPalette);
    expect(colourPalette.exists()).toBeTruthy();

    await colourPalette.setValue('#000000');
    const save = wrapper.findComponentByTestId('save');

    await save.trigger('click');

    expect(setMcadObjectColourSpy).toHaveBeenCalled();
    expect(setMcadObjectTitleSpy).toHaveBeenCalled();
  });

  it('should Update overlay', async () => {
    const props = { mcad, modelValue: false };
    const wrapper = mount(McadUpdateModal, { props });
    const overlay = wrapper.findComponent(VOverlay);

    await overlay.setValue(true);

    expect(overlay.isVisible()).toBeTruthy();
  });
});