import { mount } from '@vue/test-utils';
import { DataOverlayAnnotationFaker } from '@test/fakers/data-overlay-annotation.faker';
import AnnotationCreateModal from '@/components/navigation/annotation/AnnotationCreateModal.vue';
import { VCard, VOverlay } from 'vuetify/components';
import AnnotationCreateSnackbar from '@/components/navigation/annotation/AnnotationCreateSnackbar.vue';

describe('MaskIcon tests', () => {
  const annotation = DataOverlayAnnotationFaker.random();

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

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

  it('should mount open and open createsnack', async () => {
    const props = { annotation, modelValue: true };
    const wrapper = mount(AnnotationCreateModal, { props });
    expect(wrapper).toBeTruthy();
    const snack = wrapper.findComponent(AnnotationCreateSnackbar);

    expect(snack.isVisible()).toBe(true);
    expect(wrapper.vm.s_annotationCreate).toBeFalsy();

    await snack.setValue(true);

    expect(wrapper.vm.s_annotationCreate).toBeTruthy();
  });

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

    await overlay.setValue(true);

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

  it('should submit form', async () => {
    const props = { annotation, modelValue: false };
    const wrapper = mount(AnnotationCreateModal, { props });
    const overlay = wrapper.findComponent(VOverlay);

    await overlay.setValue(true);

    const btn = wrapper.findComponentByTestId('submit-btn');

    await btn.trigger('click');

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

  // it('should submit form', async () => {
  //   const viewer3cr = useViewer3cr();
  //   const removeAnnotationSpy = vi.spyOn(viewer3cr, 'removeAnnotation');
  //   const props = { annotation, modelValue: false };
  //   const wrapper = mount(AnnotationCreateModal, { props });
  //   const overlay = wrapper.findComponent(VOverlay);

  //   await overlay.setValue(true);

  //   const btn = wrapper.findComponentByTestId('close-btn');

  //   await btn.trigger('click');

  //   expect(removeAnnotationSpy).toHaveBeenCalledWith({
  //     message: {
  //       Version: '0.0.0',
  //       Id: annotation.Id
  //     }
  //   });
  // });

  // it('should submit form default id', async () => {
  //   const anno = deepClone(annotation);
  //   delete (anno as any).Id;
  //   const viewer3cr = useViewer3cr();
  //   const removeAnnotationSpy = vi.spyOn(viewer3cr, 'removeAnnotation');
  //   const props = { annotation: anno, modelValue: false };
  //   const wrapper = mount(AnnotationCreateModal, { props });
  //   const overlay = wrapper.findComponent(VOverlay);

  //   await overlay.setValue(true);

  //   const btn = wrapper.findComponentByTestId('close-btn');

  //   await btn.trigger('click');

  //   expect(removeAnnotationSpy).toHaveBeenCalledWith({
  //     message: {
  //       Version: '0.0.0',
  //       Id: ''
  //     }
  //   });
  // });

  // it('should Update overlay', async () => {
  //   const viewer3cr = useViewer3cr();
  //   const updateAnnotationTitleSpy = vi.spyOn(viewer3cr, 'updateAnnotationTitle');
  //   const updateAnnotationDescriptionSpy = vi.spyOn(viewer3cr, 'updateAnnotationDescription');
  //   const updateAnnotationActionsSpy = vi.spyOn(viewer3cr, 'updateAnnotationActions');
  //   const setAnnotationIconSpy = vi.spyOn(viewer3cr, 'setAnnotationIcon');
  //   const setAnnotation2dColourSpy = vi.spyOn(viewer3cr, 'setAnnotation2dColour');
  //   const setAnnotation3dColourSpy = vi.spyOn(viewer3cr, 'setAnnotation3dColour');

  //   const props = { annotation, modelValue: false };
  //   const wrapper = mount(AnnotationCreateModal, { props });

  //   const overlay = wrapper.findComponent(VOverlay);

  //   await overlay.setValue(true);
  //   const form = wrapper.findComponent(AnnotationForm);

  //   const dataOverlayAnnotation = DataOverlayAnnotationFaker.random();

  //   await form.vm.$emit('submit', dataOverlayAnnotation);

  //   await flushPromises();
  //   expect(updateAnnotationTitleSpy).toHaveBeenCalledWith({
  //     message: {
  //       Version: '0.0.0',
  //       Id: dataOverlayAnnotation.Id,
  //       Value: dataOverlayAnnotation.Title
  //     }
  //   });

  //   expect(updateAnnotationDescriptionSpy).toHaveBeenCalledWith({
  //     message: {
  //       Version: '0.0.0',
  //       Id: dataOverlayAnnotation.Id,
  //       Value: dataOverlayAnnotation.Description
  //     }
  //   });

  //   expect(updateAnnotationActionsSpy).toHaveBeenCalledWith({
  //     message: {
  //       Version: '0.0.0',
  //       Id: dataOverlayAnnotation.Id,
  //       Value: expect.any(String)
  //     }
  //   });

  //   expect(setAnnotationIconSpy).toHaveBeenCalledWith({
  //     message: {
  //       Version: '0.0.0',
  //       Id: dataOverlayAnnotation.Id,
  //       Icon: dataOverlayAnnotation.Icon2d
  //     }
  //   });

  //   expect(setAnnotation2dColourSpy).toHaveBeenCalledWith({
  //     message: {
  //       Version: '0.0.0',
  //       Id: dataOverlayAnnotation.Id,
  //       Colour: dataOverlayAnnotation.Colour2d
  //     }
  //   });

  //   expect(setAnnotation3dColourSpy).toHaveBeenCalledWith({
  //     message: {
  //       Version: '0.0.0',
  //       Id: dataOverlayAnnotation.Id,
  //       Colour: dataOverlayAnnotation.Colour3d
  //     }
  //   });
  // });
});