import React from "react";
import { useSelector } from "react-redux";
import { GameStore } from "../store/state";
import { UILayer, LayerList } from "../store/ui/state";
import LoadingScreenUI from "./Loading";

function renderLayer(data: UILayer) {
  switch (data.type) {
    case "LoadingScreen":
      return <LoadingScreenUI />;
    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, visible }) => (
        <div key={id} style={{ display: visible ? "" : "none" }}>
          {renderLayer(data)}
        </div>
      ))}
    </div>
  );
}