<template>
  <div class="app-layout theme">
    <div class="app-layout__aside bg-theme-500 contrast " style="grid-area: topAside;">
      <FilesAside>
        <template v-slot:handle>
          <IconButton name="Files" >
            <Directory />
          </IconButton>
        </template>
      </FilesAside>

    </div>
    <div class="app-layout__aside bg-theme-500 contrast" style="grid-area: menu;">
      <IconButton name="Map" @click="switchMain('map')">
        <IconMap  />
      </IconButton>
      <IconButton name="Sound" @click="switchMain('sounds')">
        <IconMusic  />
      </IconButton>
      <IconButton name="Devices" @click="switchMain('devices')">
        <IconTv />
      </IconButton>
      <div style="flex: 1"></div>
      <IconButton name="Settings" @click="switchMain('settings')">
        <Cog  />
      </IconButton>
    </div>

    <div class="app-layout__overview bg-theme-800 contrast" style="grid-area: overview;">
      <slot name="overview"></slot>
    </div>
    <div class="app-layout__main" style="grid-area: main;">
      <div v-show="mainSection === 'devices'">
        <slot  name=devices></slot>
      </div>
      <div v-show="mainSection === 'sounds'">
        <slot name=sounds></slot>
      </div>
      <div v-show="mainSection === 'map'">
        <slot  name=map></slot>
      </div>
      <div v-show="mainSection === 'settings'">
        <slot  name=settings></slot>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import {onMounted, ref} from 'vue';
import FilesAside from '../Files/FilesAside.vue';
import Cog from '../Icons/Cog.vue';
import Directory from '../Icons/Directory.vue';
import IconMap from '../Icons/IconMap.vue';
import IconMusic from '../Icons/IconMusic.vue';
import IconTv from '../Icons/IconTv.vue';
import IconButton from './IconButton.vue';

const mainSection = ref('sounds');

function switchMain(section: string){
  mainSection.value = section;
}

onMounted(() => {
  //@ts-ignore
  window.addEventListener('reveal-screen', (event: CustomEvent) => {
    switchMain('map');
  });
})

</script>
<style>
.app-layout {
  display: grid;
  grid-template-columns: 1fr 64px;
  grid-template-rows: max-content 1fr;
  grid-template-areas: 
    "overview topAside"
    "main menu";
  height: 100dvh;
  --color-theme: var(--color-app-primary);
}

.app-layout__aside {
  padding: 12px;
  overflow:hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5rem;
}

.app-layout__overview {
  padding: 1rem;
}

.app-layout__main {
  padding: 1rem;
}

</style>