<script setup lang="ts">
import { OrbitControls } from "@tresjs/cientos";

const route = useRoute();
const screen = computed(() => route.query.screen as string | undefined);

const topScreen = useTemplateRef("topScreen");
const bottomScreen = useTemplateRef("bottomScreen");
</script>

<template>
  <div>
    <TresCanvas window-size clear-color="#181818">
      <TresPerspectiveCamera :args="[45, 1, 0.001, 1000]" />
      <OrbitControls />

      <TresAmbientLight />
      <TresDirectionalLight />

      <NDS
        v-if="topScreen && bottomScreen"
        :top-screen-canvas="topScreen.canvas"
        :bottom-screen-canvas="bottomScreen.canvas"
      />
    </TresCanvas>

    <Screen ref="topScreen">
      <HomeTopScreen v-if="!screen" />
      <ContactTopScreen v-else-if="screen === 'contact'" />
      <ProjectsTopScreen v-else-if="screen === 'projects'" />
      <SettingsTopScreen v-else-if="screen === 'settings'" />
    </Screen>
    <Screen ref="bottomScreen">
      <HomeBottomScreen v-if="!screen" />
      <ContactBottomScreen v-else-if="screen === 'contact'" />
      <ProjectsBottomScreen v-else-if="screen === 'projects'" />
      <SettingsBottomScreen v-else-if="screen === 'settings'" />
    </Screen>
  </div>
</template>
