import "./app.css";
import App from "./App.svelte";
import MiniTimer from "./lib/components/MiniTimer.svelte";
import BreakWindow from "./lib/components/BreakWindow.svelte";
import MicrobreakOverlay from "./lib/components/MicrobreakOverlay.svelte";
import DimOverlay from "./lib/components/DimOverlay.svelte";
import BreakOverlay from "./lib/components/BreakOverlay.svelte";
import { mount } from "svelte";

const params = new URLSearchParams(window.location.search);
const isMicrobreak = params.has("microbreak");
const isDim = params.has("dim");
const isBreakOverlay = params.has("breakoverlay");
const isMini = params.has("mini");
const isBreak = params.has("break");

if (isMini || isBreak || isMicrobreak || isDim || isBreakOverlay) {
  // Transparent body so rounded shapes show through the transparent window
  document.body.style.background = "transparent";
  document.documentElement.style.background = "transparent";
}

const component = isMicrobreak
  ? MicrobreakOverlay
  : isDim
    ? DimOverlay
    : isBreakOverlay
      ? BreakOverlay
      : isMini
        ? MiniTimer
        : isBreak
          ? BreakWindow
          : App;

const app = mount(component, {
  target: document.getElementById("app")!,
});

export default app;