import AnnotationForm from '@/components/navigation/annotation/AnnotationForm.vue';
import AnnotationIcon from '@/components/navigation/annotation/AnnotationIcon.vue';
import ColourPalette from '@/components/shared/ColourPalette.vue';
import ShTextField from '@/components/shared/ShTextField.vue';
import ShTextarea from '@/components/shared/ShTextarea.vue';
import { CallToActionFaker } from '@test/fakers/call-to-action.faker';
import { DataOverlayAnnotationFaker } from '@test/fakers/data-overlay-annotation.faker';
import { flushPromises, mount } from '@vue/test-utils';
import { cloneDeep } from 'lodash';
import { v4 } from 'uuid';
import { VTextField } from 'vuetify/components';

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

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

  it('should mount with icon', () => {
    const anno = cloneDeep(annotation);

    anno.Icon2d = '123';
    const props = { modelValue: anno };
    const wrapper = mount(AnnotationForm, { props });
    expect(wrapper.findComponent(AnnotationIcon).exists()).toBeTruthy();
  });

  it('should mount without icon', () => {
    const anno = cloneDeep(annotation);

    anno.Icon2d = '';
    const props = { modelValue: anno };
    const wrapper = mount(AnnotationForm, { props });
    expect(wrapper.findComponent(AnnotationIcon).exists()).not.toBeTruthy();
  });

  it('should set text field value', async () => {
    const anno = cloneDeep(annotation);

    const props = { modelValue: anno };
    const wrapper = mount(AnnotationForm, { props });

    const textfield = wrapper.findComponent(ShTextField);
    expect(textfield.exists()).toBeTruthy();

    await textfield.setValue('123');

    expect(wrapper.vm.modelValue!.Title).toBe('123');
  });

  it('should set text field 2 value', async () => {
    const anno = cloneDeep(annotation);

    anno.CallToAction = CallToActionFaker.random();
    const props = { modelValue: DataOverlayAnnotationFaker.random() };
    const wrapper = mount(AnnotationForm, { props });

    await wrapper.setProps({ modelValue: anno });
    await flushPromises();
    await flushPromises();
    await flushPromises();

    const textfield = wrapper.findAllComponents(VTextField);

    const descs = textfield.filter(
      (x) => x.attributes()['data-testid'] === 'actiondata-description',
    );
    const urls = textfield.filter(
      (x) => x.attributes()['data-testid'] === 'actiondata-Url',
    );

    for (const [i, _] of anno.CallToAction.Actions.entries()) {
      expect(descs[i].exists()).toBeTruthy();
      expect(urls[i].exists()).toBeTruthy();

      const val = v4();
      const val2 = v4();
      await descs[i].setValue(val);
      await urls[i].setValue(val2);

      expect(
        wrapper.vm.modelValue!.CallToAction?.Actions[i].ActionData.Description,
      ).toBe(val);
      expect(
        wrapper.vm.modelValue!.CallToAction?.Actions[i].ActionData.Url,
      ).toBe(val2);
    }
  });

  it('should set text field value', async () => {
    const anno = cloneDeep(annotation);

    anno.CallToAction = null;
    const props = { modelValue: anno };
    const wrapper = mount(AnnotationForm, { props });

    const textfield = wrapper.findComponent(ShTextarea);
    expect(textfield.exists()).toBeTruthy();

    await textfield.setValue('123');

    expect(wrapper.vm.modelValue!.Description).toBe('123');
  });

  it('should removeaction', async () => {
    const anno = cloneDeep(annotation);

    anno.CallToAction = CallToActionFaker.random();
    const props = { modelValue: anno };
    const wrapper = mount(AnnotationForm, { props });

    const textfield = wrapper.findComponentByTestId('actiondata-remove');

    await textfield.trigger('click');

    await wrapper.vm.addAction();

    expect(wrapper.vm.modelValue!.CallToAction!.Actions.length).toBe(
      anno.CallToAction.Actions.length,
    );

    wrapper.vm.actions = [];
    expect(wrapper.vm.modelValue!.CallToAction!.Actions.length).toBe(0);
  });
  it('should colour pallete', async () => {
    const anno = cloneDeep(annotation);

    anno.CallToAction = CallToActionFaker.random();
    const props = { modelValue: anno };
    const wrapper = mount(AnnotationForm, { props });

    const colourPalette = wrapper.findComponent(ColourPalette);
    expect(colourPalette.exists()).toBeTruthy();

    await colourPalette.setValue('#000000');

    expect(wrapper.vm.modelValue!.Colour2d).toStrictEqual({
      Version: '0.0.0',
      R: 0.0,
      G: 0.0,
      B: 0.0,
      A: 1,
    });
    expect(wrapper.vm.modelValue!.Colour3d).toStrictEqual({
      Version: '0.0.0',
      R: 0.0,
      G: 0.0,
      B: 0.0,
      A: 1,
    });
  });

  it('should set and get icon', async () => {
    const anno = cloneDeep(annotation);

    const props = { modelValue: anno };
    const wrapper = mount(AnnotationForm, { props });

    wrapper.vm.icon = '123';

    expect(wrapper.vm.icon).toBe('123');
  });

  it('should check input values', async () => {
    // Mocking DOM and dependencies
    const mockArrayBuffer = vi.fn(() => Promise.resolve(new ArrayBuffer(8)));
    const mockFile = new File(['test'], 'test.png', { type: 'image/png' });
    mockFile.arrayBuffer = mockArrayBuffer;

    const original = document.createElement('input');
    Object.defineProperty(original, 'files', {
      value: [mockFile],
      writable: true,
    });
    // Mock document.createElement to return a mocked input element
    const spy = vi
      .spyOn(document, 'createElement')
      .mockImplementationOnce((tagName: string) => {
        return original;
      });

    const anno = cloneDeep(annotation);
    const props = { modelValue: anno };
    const wrapper = mount(AnnotationForm, { props });

    await flushPromises();
    wrapper.vm.upload();
    await flushPromises();

    // Assertions for input element creation and click
    expect(spy).toHaveBeenCalledWith('input');

    await mockArrayBuffer();
  });
});