import getMachine from '.';
import { IStoreState, IRow } from '../../index.data';

describe('machine as row-picker', () => {
  const state = {
    rows: [
      { id: 1, i: 1 } as IRow,
      { id: 2, i: 2 } as IRow,
      { id: 3, i: 3 } as IRow,
      { id: 4, i: 4 } as IRow,
    ],
  } as IStoreState;
  describe('case0: 作为row-picker, 在row-picker上拖移', () => {
    const machine = getMachine();
    const state1 = machine.transition('idle', { type: 'MOUSE.DOWN', selectedRow: 1, state });
    it('点击第1行', () => {
      expect(state1.value).toEqual({ selecting: 'row' });
      expect(state1.context).toEqual({
        usage: 'row-picker',
        selectionType: 'row',
        selectedRowRange: [1, 1],
      });
    });

    const machine2 = getMachine({ selectionType: 'row', selectedRowRange: [1, 1] });
    const state2 = machine2.transition(
      { selecting: 'row' },
      {
        type: 'MOUSE.MOVE',
        selectedRow: 1,
        state,
      },
    );
    it('在第1行上拖动, 未离开第1行', () => {
      expect(state2.value).toEqual({ selecting: 'row' });
      expect(state2.context).toEqual({
        usage: 'row-picker',
        selectionType: 'row',
        selectedRowRange: [1, 1],
      });
    });

    const machine3 = getMachine({ selectionType: 'row', selectedRowRange: [1, 1] });
    const state3 = machine3.transition(
      { selecting: 'row' },
      {
        type: 'MOUSE.MOVE',
        selectedRow: 2,
        state,
      },
    );
    it('然后拖动, 经过第2行', () => {
      expect(state3.value).toEqual({ selecting: 'row' });
      expect(state3.context).toEqual({
        usage: 'row-picker',
        selectionType: 'row',
        selectedRowRange: [1, 2],
      });
    });

    const machine4 = getMachine({ selectionType: 'row', selectedRowRange: [1, 2] });
    const state4 = machine4.transition(
      { selecting: 'row' },
      {
        type: 'MOUSE.MOVE',
        selectedRow: 3,
        state,
      },
    );
    it('然后在第3行抬起鼠标', () => {
      expect(state4.value).toEqual({ selecting: 'row' });
      expect(state4.context).toEqual({
        usage: 'row-picker',
        selectionType: 'row',
        selectedRowRange: [1, 3],
      });
    });

    const machine5 = getMachine({ selectionType: 'row', selectedRowRange: [1, 3] });
    const state5 = machine5.transition(
      { selecting: 'row' },
      {
        type: 'MOUSE.DOWN',
        selectedRow: 3,
        state,
      },
    );
    it('之后, 在第3行重新按下鼠标, 相当于重选', () => {
      expect(state5.value).toEqual({ selecting: 'row' });
      expect(state5.context).toEqual({
        usage: 'row-picker',
        selectionType: 'row',
        selectedRowRange: [3, 3],
      });
    });

    const machine6 = getMachine({ selectionType: 'row', selectedRowRange: [3, 3] });
    const state6 = machine6.transition(
      { selecting: 'row' },
      {
        type: 'MOUSE.MOVE',
        selectedRow: 1,
        state,
      },
    );
    it('之后, 在第1行松开鼠标, 主要注意不要生成 [3,1], 而生成 [1,3](忽略了中间移动)', () => {
      expect(state6.value).toEqual({ selecting: 'row' });
      expect(state6.context).toEqual({
        usage: 'row-picker',
        selectionType: 'row',
        selectedRowRange: [3, 1],
      });
    });
  });

  describe('选中cell, 也会被转化为行: cell as row', () => {
    const stateWithCells = {
      ...state,
      cells: {
        11: { id: 11, i: 1, j: 0, rowId: 1 },
        12: { id: 12, i: 1, j: 1, rowId: 1 },
        21: { id: 21, i: 2, j: 0, rowId: 2 },
        22: { id: 22, i: 2, j: 1, rowId: 2 },
        31: { id: 31, i: 2, j: 0, rowId: 3 },
        32: { id: 32, i: 2, j: 1, rowId: 3 },
        41: { id: 41, i: 2, j: 0, rowId: 4 },
        42: { id: 42, i: 2, j: 1, rowId: 4 },
      },
    } as IStoreState;

    const machine = getMachine();
    const state1 = machine.transition('idle', {
      type: 'MOUSE.DOWN',
      selectedCell: 21,
      state: stateWithCells,
    });
    it('点击第21单元格', () => {
      expect(state1.value).toEqual({ selecting: 'row' });
      expect(state1.context).toEqual({
        usage: 'row-picker',
        selectionType: 'row',
        selectedRowRange: [2, 2],
      });
    });

    const machine1 = getMachine({ selectionType: 'row', selectedRowRange: [2, 2] });
    const state2 = machine1.transition(
      { selecting: 'row' },
      {
        type: 'MOUSE.MOVE',
        selectedCell: 11,
        state: stateWithCells,
      },
    );
    it('点击第11单元格', () => {
      expect(state2.value).toEqual({ selecting: 'row' });
      expect(state2.context).toEqual({
        usage: 'row-picker',
        selectionType: 'row',
        selectedRowRange: [2, 1],
      });
    });
  });
});