import React from "react";
import { useSelector } from "react-redux";
import { GameStore } from "~store/state";
import MapEditor, { MapEditorLayer } from "./MapEditor";

export type UILayer = MapEditorLayer;

export type LayerList = { id: string; data: UILayer; visible: boolean }[];

function renderLayer(data: UILayer) {
  switch (data.type) {
    case "MapEditor":
      return <MapEditor />;
    default:
      throw new Error("unknown or invalid ui layer");
  }
}

export default function UI() {
  const layers = useSelector<GameStore, LayerList>((state) => state.ui.layers);
  return (
    <div id="ui">
      {layers.map(({ id, data }) => (
        <div key={id}>{renderLayer(data)}</div>
      ))}
    </div>
  );
}