import CloudDropZone from '@/components/demo/CloudDropZone.vue';
import { mount } from '@vue/test-utils';

describe('Cloud DropZone Component', () => {
  beforeEach(() => {
    vi.restoreAllMocks();
  });

  afterEach(() => {
    document.body.innerHTML = '';
  });

  it('should render the drop zone correctly', () => {
    const wrapper = mount(CloudDropZone, {
      props: {
        onFilesDropped: vi.fn(),
      },
    });
    expect(wrapper.find('.drop-zone').exists()).toBe(true);
    expect(wrapper.find('.icon-container').exists()).toBe(true);
    expect(wrapper.text()).toContain('texts.clickToUploadtexts.orDragAndDrop');
  });

  it('should add drag-over class on dragover and remove it on drag leave', async () => {
    const wrapper = mount(CloudDropZone, {
      props: {
        onFilesDropped: vi.fn(),
      },
    });
    const dropZone = wrapper.find('.drop-zone');
    await dropZone.trigger('dragover');
    expect(wrapper.classes()).toContain('drag-over');
    await dropZone.trigger('dragleave');
    expect(wrapper.classes()).not.toContain('drag-over');
  });

  it('should add drag-over class on drag enter', async () => {
    const wrapper = mount(CloudDropZone, {
      props: {
        onFilesDropped: vi.fn(),
      },
    });
    const dropZone = wrapper.find('.drop-zone');
    await dropZone.trigger('dragenter');
    expect(wrapper.classes()).toContain('drag-over');
  });

  it('should call onFilesDropped with files on drop', async () => {
    const mockFiles = [new File(['content'], 'test-file.txt')];
    const onFilesDropped = vi.fn();
    const wrapper = mount(CloudDropZone, {
      props: {
        onFilesDropped,
      },
    });
    const dropZone = wrapper.find('.drop-zone');
    await dropZone.trigger('drop', {
      dataTransfer: {
        files: mockFiles,
      },
    });
    expect(onFilesDropped).toHaveBeenCalledOnce();
    expect(onFilesDropped).toHaveBeenCalledWith(mockFiles);
  });

  it('should handle drop event with no files', async () => {
    const onFilesDropped = vi.fn();
    const wrapper = mount(CloudDropZone, {
      props: {
        onFilesDropped,
      },
    });
    const dropZone = wrapper.find('.drop-zone');
    const consoleWarnSpy = vi
      .spyOn(console, 'warn')
      .mockImplementation(() => {});
    await dropZone.trigger('drop', {
      dataTransfer: {
        files: null,
      },
    });
    expect(onFilesDropped).not.toHaveBeenCalled();
    expect(consoleWarnSpy).toHaveBeenCalledWith('No files were dropped.');
    consoleWarnSpy.mockRestore();
  });

  it('should call onFilesDropped with files when files are selected', async () => {
    const mockFiles = [new File(['content'], 'test-file.dcm')];
    const onFilesDropped = vi.fn();
    const wrapper = mount(CloudDropZone, {
      props: {
        onFilesDropped,
      },
    });
    const mockInput = document.createElement('input') as HTMLInputElement; // Create an actual input element
    Object.defineProperty(mockInput, 'files', {
      value: mockFiles,
      writable: true,
    });
    const spy = vi.spyOn(document, 'createElement').mockReturnValue(mockInput);
    await wrapper.find('.drop-zone').trigger('click');
    if (mockInput.onchange) {
      mockInput.onchange(new Event('change'));
    }
    expect(onFilesDropped).toHaveBeenCalledOnce();
    expect(onFilesDropped).toHaveBeenCalledWith(mockFiles);

    spy.mockRestore();
  });

  it('should log a warning when no files are selected', async () => {
    const warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {});
    const onFilesDropped = vi.fn();
    const wrapper = mount(CloudDropZone, {
      props: {
        onFilesDropped,
      },
    });
    const mockInput = document.createElement('input') as HTMLInputElement;

    Object.defineProperty(mockInput, 'files', {
      value: null,
      writable: true,
    });
    const spy = vi.spyOn(document, 'createElement').mockReturnValue(mockInput);
    await wrapper.find('.drop-zone').trigger('click');
    if (mockInput.onchange) {
      mockInput.onchange(new Event('change'));
    }
    expect(onFilesDropped).not.toHaveBeenCalled();
    expect(warnSpy).toHaveBeenCalledWith('No files were selected.');
    warnSpy.mockRestore();
    spy.mockRestore();
  });
});