import { createSlice } from '@reduxjs/toolkit';

import { Point } from '../components/slippy/sleepy';

export interface SlippyState {
    scale: number;
    translation: Point;
  }
  
const initialSlippyState: SlippyState = {
  scale: 1,
  translation: { x: 0, y: 0 },
};

const slippySlice = createSlice({
  name: 'slippy',
  initialState: initialSlippyState,
  reducers: {
    scale(state, action) {
      state.scale = state.scale * action.payload.factor;
      state.translation.x =
        state.translation.x +
        (state.translation.x - action.payload.center.x) *
          (action.payload.factor - 1);
      state.translation.y =
        state.translation.y +
        (state.translation.y - action.payload.center.y) *
          (action.payload.factor - 1);
    },
    translate(state, action) {
      console.log(`translate: action=${JSON.stringify(action)}`);
      state.translation.x = state.translation.x + action.payload.x;
      state.translation.y = state.translation.y + action.payload.y;
    },
  },
});

export const slippyActions = slippySlice.actions;

export default slippySlice.reducer;