<template>
  <div class="pptist-editor">
    <EditorHeader class="layout-header" />
    <CanvasTool class="center-top" />
    <div class="layout-content">
      <Thumbnails class="layout-content-left" />
      <div class="layout-content-center">
        <Canvas class="center-body" :style="{ height: `calc(100% - ${remarkHeight}px)` }" />
        <Remark class="center-bottom" v-model:height="remarkHeight" :style="{ height: `${remarkHeight}px` }" />
      </div>
      <Toolbar class="layout-content-right" />
    </div>
  </div>

  <SelectPanel v-if="showSelectPanel" />
  <SearchPanel v-if="showSearchPanel" />
  <NotesPanel v-if="showNotesPanel" />
</template>

<script lang="ts" setup>
import { ref } from "vue"
import { storeToRefs } from "pinia"
import { useMainStore } from "@/store"
import useGlobalHotkey from "@/hooks/useGlobalHotkey"
import usePasteEvent from "@/hooks/usePasteEvent"

import EditorHeader from "./EditorHeader/index.vue"
import Canvas from "./Canvas/index.vue"
import CanvasTool from "./CanvasTool/index.vue"
import Thumbnails from "./Thumbnails/index.vue"
import Toolbar from "./Toolbar/index.vue"
import Remark from "./Remark/index.vue"
import SelectPanel from "./SelectPanel.vue"
import SearchPanel from "./SearchPanel.vue"
import NotesPanel from "./NotesPanel.vue"

const mainStore = useMainStore()
const { showSelectPanel, showSearchPanel, showNotesPanel } = storeToRefs(mainStore)

const remarkHeight = ref(50)

useGlobalHotkey()
usePasteEvent()
</script>

<style lang="scss" scoped>
.pptist-editor {
  height: 100%;
}
.layout-header {
  height: 48px;
}
.layout-content {
  height: calc(100% - 113px);
  display: flex;
}
.layout-content-left {
  width: 260px;
  height: 100%;
  flex-shrink: 0;
}
.center-top {
  height: 65px;
}
.layout-content-center {
  width: calc(100% - 260px - 260px);
}
.layout-content-right {
  width: 260px;
  height: 100%;
}
</style>
