import produce from "immer";
import { initState } from "../../initState";
import { OverlayNamePrefixs } from "@store";
import { Status } from "@types";
import { IOverlay, OverlayCategory, OverlayTypes } from "@map";

export function createOverlay(state = initState, payload: OverlayTypes) {
  return produce(state, (draft) => {
    draft.status = Status.CreateOverlay;
    draft.overlayType = payload;
  });
}

export function clearOverlays(state = initState) {
  return initState;
}

export function deleteOverlays(state = initState, payload: any) {
  const { selectedIds } = state;
  const [id] = selectedIds!;
  return produce(state, (draft) => {
    draft.map.overlays = draft.map.overlays.filter(
      (overlay: IOverlay) => overlay.id !== id
    );
    draft.selectedIds = [];
  });
}

export function finishEditOverlay(state = initState, payload: any) {
  return produce(state, (draft) => {
    const overlay = payload as IOverlay;
    const { type, id } = overlay;
    // todo: uniqueName.
    const { overlays } = draft.map;
    const existed = overlays.find((overlay) => overlay.id === id);
    if (existed) {
      console.log(overlay);
      overlays[overlays.indexOf(existed)] = {
        ...existed,
        ...overlay,
      };
    } else {
      overlay.name = OverlayNamePrefixs[type] + overlay.id;
      if (type === OverlayTypes.Polyline) {
        overlay.category = OverlayCategory.Road;
      } else if (type !== OverlayTypes.Point) {
        overlay.category = OverlayCategory.Building;
        overlay.height = 100;
      }
      overlays.push(overlay);
    }
    draft.overlayType = null;
    draft.status = null;
  });
}