import { createSlice } from '@reduxjs/toolkit';
import _ from 'lodash';
import { tileSize } from '../components/map/tiled-map';
import { geoPoint, Point, lon2tile, lat2tile } from '../lib/geo';

// Top level properties (the other properties can be derived from them)

// The map itself
export interface MapScope {
  center: geoPoint;
  zoom: number;
}
const initialMapScope: MapScope = {
  center: { lat: -37.8403508, lon: 77.5539501 },
  zoom: 13.49,
};

// Derived properties

// Properties needed to render the tiled map
export interface TilesDescription {
  nb: Point;
  first: Point;
  zoom: number;
}

// Properties needed to render the slippy viewport
export interface SlippyState {
  scale: number;
  translation: Point;
}

// Global state
export interface MapState {
  scope: MapScope;
  tiles: TilesDescription;
  slippy: SlippyState;
}
/*

const nbTilesY = _.ceil(mapState.viewport.height / tileSize) + 4;
  const nbTilesX = _.ceil(mapState.viewport.width / tileSize) + 4;
  const [tileCenterY, reminderY] = lat2tile(
    mapState.scope.center.lat,
    mapState.scope.zoom
  );
  const [tileCenterX, reminderX] = lon2tile(
    mapState.scope.center.lon,
    mapState.scope.zoom
  );
  const firstTileY = tileCenterY - _.round(nbTilesY / 2);
  const firstTileX = tileCenterX - _.round(nbTilesX / 2);
  const locationY = (tileCenterY + reminderY - firstTileY) * tileSize;
  const locationX = (tileCenterX + reminderX - firstTileX) * tileSize;
  const targetLocationY = mapState.viewport.height / 2;
  const targetLocationX = mapState.viewport.width / 2;
  const deltaY = targetLocationY - locationY;
  const deltaX = targetLocationX - locationX;


*/

const computeStateFromScope = (scope: MapScope) => {
  const newScope = _.cloneDeep(scope);
  let state: MapState = {} as MapState;
  state.scope = newScope;
  state.tiles = {} as TilesDescription;
  state.slippy = {} as SlippyState;
  state.tiles.zoom = _.round(state.scope.zoom);
  const softZoom = state.scope.zoom - state.tiles.zoom;
  state.slippy.scale = 2 ** softZoom;
  const visibleTileSize = tileSize * state.slippy.scale;
  state.tiles.nb = {
    x: _.ceil(window.innerWidth / visibleTileSize + 4),
    y: _.ceil(window.innerHeight / visibleTileSize + 4),
  };
  const tilesCenter: Point = {
    x: lon2tile(state.scope.center.lon, state.tiles.zoom),
    y: lat2tile(state.scope.center.lat, state.tiles.zoom),
  };
  state.tiles.first = {
    x: _.floor(tilesCenter.x - state.tiles.nb.x / 2),
    y: _.floor(tilesCenter.y - state.tiles.nb.y / 2),
  };
  const tilesCenterTargetLocation: Point = {
    x: window.innerWidth / 2,
    y: window.innerHeight / 2,
  };
  const tilesCenterActualLocation: Point = {
    x: (tilesCenter.x - state.tiles.first.x) * visibleTileSize,
    y: (tilesCenter.y - state.tiles.first.y) * visibleTileSize,
  };
  state.slippy.translation = {
    x: tilesCenterTargetLocation.x - tilesCenterActualLocation.x,
    y: tilesCenterTargetLocation.y - tilesCenterActualLocation.y,
  };

  return state;
};

const initialMapState: MapState = computeStateFromScope(initialMapScope);

const mapSlice = createSlice({
  name: 'map',
  initialState: initialMapState,
  reducers: {
    resize: (state) => {
      return computeStateFromScope(state.scope);
    },
    shift: (state, action) => {
      state.slippy.translation = {
        x: state.slippy.translation.x + action.payload.x,
        y: state.slippy.translation.y + action.payload.y,
      };
    },
    scale: (state, action) => {
      state.slippy.scale = state.slippy.scale * action.payload.factor;
      state.slippy.translation = {
        x:
          state.slippy.translation.x +
          (state.slippy.translation.x - action.payload.center.x) *
            (action.payload.factor - 1),
        y:
          state.slippy.translation.y +
          (state.slippy.translation.y - action.payload.center.y) *
            (action.payload.factor - 1),
      };
    },
  },
});

export const mapActions = mapSlice.actions;

export default mapSlice.reducer;