import { createPinia, setActivePinia, storeToRefs } from 'pinia';
import {
  FloatingState,
  useMcadFloatingStore,
} from '@/stores/mcad-floating.store';
import { flushPromises, mount } from '@vue/test-utils';
import { defineComponent } from 'vue';

const DragTest = defineComponent({
  template: `
    <div style="width: 100px; height: 100px">
      <div id="drag-set" style="width: 100px; height: 100px"></div>
    </div>
  `,
});

describe('mcad floating store', () => {
  beforeEach(() => {
    setActivePinia(createPinia());
  });

  beforeEach(() => {
    mount(DragTest);
  });

  it('should have defaults', () => {
    const { x, y, state } = storeToRefs(useMcadFloatingStore());
    expect(x.value).toBe(16);
    expect(y.value).toBe(16);
    expect(state.value).toBe(FloatingState.REGULAR);
  });

  it('should pin horizontally top edge', async () => {
    const getElementSpy = vi.spyOn(document, 'getElementById').mockReturnValue({
      parentElement: {
        clientHeight: 1920,
        clientWidth: 1920,
      },
      clientHeight: 10,
      clientWidth: 10,
    } as any);

    const store = useMcadFloatingStore();
    const { state, x, y } = storeToRefs(store);
    x.value = 32;
    y.value = 0;

    store.setEdge();

    expect(state.value).toBe(FloatingState.HORIZONTAL_SQUASH);
    expect(getElementSpy).toHaveBeenCalled();
    getElementSpy.mockRestore();
  });

  it('should pin horizontally bottom edge', async () => {
    const getElementSpy = vi.spyOn(document, 'getElementById').mockReturnValue({
      parentElement: {
        clientHeight: 1920,
        clientWidth: 1920,
      },
      clientHeight: 10,
      clientWidth: 10,
    } as any);

    const store = useMcadFloatingStore();
    const { state, x, y } = storeToRefs(store);
    x.value = 32;
    y.value = 1920;

    store.setEdge();

    expect(state.value).toBe(FloatingState.HORIZONTAL_SQUASH);
    expect(getElementSpy).toHaveBeenCalled();
    getElementSpy.mockRestore();
  });

  it('should pin vertically left edge', async () => {
    const getElementSpy = vi.spyOn(document, 'getElementById').mockReturnValue({
      parentElement: {
        clientHeight: 1920,
        clientWidth: 1920,
      },
      clientHeight: 10,
      clientWidth: 10,
    } as any);

    const store = useMcadFloatingStore();
    const { state, x, y } = storeToRefs(store);
    x.value = 0;
    y.value = 150;

    store.setEdge();
    expect(state.value).toBe(FloatingState.VERTICAL_SQUASH);
    expect(getElementSpy).toHaveBeenCalled();
    getElementSpy.mockRestore();
  });

  it('should pin vertically right edge', async () => {
    const getElementSpy = vi.spyOn(document, 'getElementById').mockReturnValue({
      parentElement: {
        clientHeight: 1920,
        clientWidth: 1920,
      },
      clientHeight: 10,
      clientWidth: 10,
    } as any);

    const store = useMcadFloatingStore();
    const { state, x, y } = storeToRefs(store);
    x.value = 1920;
    y.value = 150;

    store.setEdge();
    expect(state.value).toBe(FloatingState.VERTICAL_SQUASH);
    expect(getElementSpy).toHaveBeenCalled();
    getElementSpy.mockRestore();
  });

  it('should not pin edge', async () => {
    const getElementSpy = vi.spyOn(document, 'getElementById').mockReturnValue({
      parentElement: {
        clientHeight: 1920,
        clientWidth: 1920,
      },
      clientHeight: 10,
      clientWidth: 10,
    } as any);

    const store = useMcadFloatingStore();
    const { state, x, y } = storeToRefs(store);
    x.value = 150;
    y.value = 150;

    store.setEdge();
    expect(state.value).toBe(FloatingState.REGULAR);
    expect(getElementSpy).toHaveBeenCalled();
    getElementSpy.mockRestore();
  });

  it('should pin vertically', async () => {
    const { state, x, y, isDragging } = storeToRefs(useMcadFloatingStore());
    x.value = 0;
    y.value = 32;
    isDragging.value = true;
    await flushPromises();
    isDragging.value = false;
    await flushPromises();
    expect(state.value).toBe(FloatingState.VERTICAL_SQUASH);
  });

  it('should slip from right', async () => {
    const preX = 0;
    const preY = 150;
    const getElementSpy = vi.spyOn(document, 'getElementById').mockReturnValue({
      parentElement: {
        clientHeight: 1920,
        clientWidth: 1920,
      },
      clientHeight: 10,
      clientWidth: 10,
    } as any);

    const store = useMcadFloatingStore();
    const { state, x, y } = storeToRefs(store);
    x.value = preX;
    y.value = preY;

    await store.open();
    expect(state.value).toBe(FloatingState.REGULAR);
    expect(getElementSpy).toHaveBeenCalled();
    getElementSpy.mockRestore();
    expect(x.value).greaterThan(preX);
    expect(y.value).toBe(preY);
  });

  it('should slip from left', async () => {
    const preX = 1920;
    const preY = 150;
    const getElementSpy = vi.spyOn(document, 'getElementById').mockReturnValue({
      parentElement: {
        clientHeight: 1920,
        clientWidth: 1920,
      },
      clientHeight: 10,
      clientWidth: 10,
    } as any);

    const store = useMcadFloatingStore();
    const { state, x, y } = storeToRefs(store);
    x.value = preX;
    y.value = preY;

    await store.open();
    expect(state.value).toBe(FloatingState.REGULAR);
    expect(getElementSpy).toHaveBeenCalled();
    expect(x.value).lessThan(preX);
    expect(y.value).toBe(preY);
    getElementSpy.mockRestore();
  });

  it('should slip from top', async () => {
    const preX = 150;
    const preY = 0;
    const getElementSpy = vi.spyOn(document, 'getElementById').mockReturnValue({
      parentElement: {
        clientHeight: 1920,
        clientWidth: 1920,
      },
      clientHeight: 10,
      clientWidth: 10,
    } as any);

    const store = useMcadFloatingStore();
    const { state, x, y } = storeToRefs(store);
    x.value = preX;
    y.value = preY;

    await store.open();
    expect(state.value).toBe(FloatingState.REGULAR);
    expect(getElementSpy).toHaveBeenCalled();
    expect(x.value).toBe(preX);
    expect(y.value).greaterThan(preY);
    getElementSpy.mockRestore();
  });

  it('should slip from bottom', async () => {
    const preX = 150;
    const preY = 1920;
    const getElementSpy = vi.spyOn(document, 'getElementById').mockReturnValue({
      parentElement: {
        clientHeight: 1920,
        clientWidth: 1920,
      },
      clientHeight: 10,
      clientWidth: 10,
    } as any);

    const store = useMcadFloatingStore();
    const { state, x, y } = storeToRefs(store);
    x.value = preX;
    y.value = preY;

    await store.open();
    expect(state.value).toBe(FloatingState.REGULAR);
    expect(getElementSpy).toHaveBeenCalled();
    expect(x.value).toBe(preX);
    expect(y.value).lessThan(preY);
    getElementSpy.mockRestore();
  });

  it('should slip from bottom and recollapse', async () => {
    const preX = 1000;
    const preY = 1920;
    const getElementSpy = vi
      .spyOn(document, 'getElementById')
      .mockReturnValueOnce({
        parentElement: {
          clientHeight: 1920,
          clientWidth: 1920,
        },
        clientHeight: 500,
        clientWidth: 500,
      } as any)
      .mockReturnValueOnce({
        parentElement: {
          clientHeight: 1920,
          clientWidth: 1920,
        },
        clientHeight: 500,
        clientWidth: 500,
      } as any)
      .mockReturnValueOnce({
        parentElement: {
          clientHeight: 1920,
          clientWidth: 1920,
        },
        clientHeight: 0,
        clientWidth: 10,
      } as any);

    const store = useMcadFloatingStore();
    const { x, y } = storeToRefs(store);
    x.value = preX;
    y.value = preY;

    await store.open();
    expect(getElementSpy).toHaveBeenCalled();
    expect(x.value).toBe(preX);
    expect(y.value).lessThan(preY);
    getElementSpy.mockRestore();
  });

  it('should slip from bottom and recollapse', async () => {
    const preX = 1000;
    const preY = 1920;
    const getElementSpy = vi
      .spyOn(document, 'getElementById')
      .mockReturnValueOnce(null)
      .mockReturnValueOnce(null)
      .mockReturnValueOnce({
        parentElement: {
          clientHeight: 1920,
          clientWidth: 1920,
        },
        clientHeight: 0,
        clientWidth: 10,
      } as any);

    const store = useMcadFloatingStore();
    const { x, y } = storeToRefs(store);
    x.value = preX;
    y.value = preY;

    await store.open();
    expect(getElementSpy).toHaveBeenCalled();
    expect(x.value).lessThan(preX);
    expect(y.value).lessThan(preY);
    getElementSpy.mockRestore();
  });

  it('should slip from bottom and recollapse', async () => {
    const preX = 1000;
    const preY = 1920;
    const getElementSpy = vi
      .spyOn(document, 'getElementById')
      .mockReturnValue(null);

    vi.useFakeTimers();

    const store = useMcadFloatingStore();
    const { x, y, style } = storeToRefs(store);
    x.value = preX;
    y.value = preY;
    window.dispatchEvent(new Event('resize'));

    await store.open();
    expect(getElementSpy).toHaveBeenCalled();
    expect(x.value).toBe(-230);
    expect(y.value).toBe(-144);
    expect(style.value.transition).toBe('all 300ms ease-in-out');
    getElementSpy.mockRestore();

    vi.advanceTimersByTime(300);
    expect(style.value.transition).toBe('');
  });
});