<script lang="ts">
  import { onMount, onDestroy } from "svelte";
  import Display from "./Display.svelte";
  import Map from "./Map.svelte";
  import type { tile } from "./components/common";
  import RSwitch from "./components/controllable/rSwitch.svelte";
  import RWye from "./components/controllable/rWye.svelte";
  import Track from "./components/track.svelte";
  import { RemoteDispatchSwitchController } from "./lib/dvSwitchControl";

  import worldData from "./maps/world.json";
  import Controllable from "./Controllable.svelte";

  const tiles = worldData as tile[];

  const size = worldData.reduce<[number, number]>(
    (acc, v) =>
      acc.map((x, i) => Math.max(x, v.props.pos[i])) as [number, number],
    [0, 0],
  );
  const scale = 50;
  const controllerPromise = RemoteDispatchSwitchController("/api");

  onDestroy(async () => {
    (await controllerPromise).done();
  });
</script>

<main>
  {#await controllerPromise}
    Plese wait: loading
  {:then e}
    <Controllable controller={e}>
      <Display {scale} width={size[0] + 1} height={size[1] + 1}>
        <RSwitch pos={[0, 0]} line={[4, 6]} siding={3} id={323} />
        <RWye pos={[0, 1]} line={[4, 6]} siding={2} ids={[356, 357, 355]} reverseID={[false,true,false]} />
        <RSwitch pos={[1, 1]} line={[4, 6]} siding={3} id={356} />
        <Track pos={[2, 1]} line={[4, 6]} />
        <RSwitch pos={[3, 1]} line={[6, 4]} siding={1} id={357} reverseSwitch={true}/>
        <RSwitch pos={[2, 2]} line={[2, 7]} siding={9} id={355} />
        <!-- 

  
    <Rlabel pos={[0,4]} text="RR" ids={[4,5]}/>
    <RSwitch pos={[1,4]} line={[4,6]} siding={9} id={4}/>
    <RSwitch pos={[2,4]} line={[6,4]} siding={7} id={5}/> -->

        <Map {tiles} />
      </Display>
    </Controllable>
  {:catch e}
    {e}
  {/await}
</main>