<script setup lang="ts">
import Construction from '@material-design-icons/svg/round/construction.svg'
import { storeToRefs } from 'pinia'
import { shallowRef } from 'vue'
import ScrollablePanel from '@/components/library/panel/ScrollablePanel.vue'
import { useTimelineStore } from '@/store/TimelineStore'
import AudioTrack from './views/AudioTrack.vue'

// TODO: use selection (inspector?) manager
const selection = shallowRef<object | null>({})

const timeline = useTimelineStore()
const { audioTrack } = storeToRefs(timeline)
</script>

<template>
  <!-- inspector panel -->
  <ScrollablePanel class="tw:flex-none tw:min-w-80 tw:max-w-80 tw:border-s">
    <template #toolbar>
      <h3 class="tw:flex tw:flex-row tw:items-center tw:gap-2 tw:px-4 tw:py-1 tw:select-none">
        <Construction class="tw:fill-current tw:h-5 tw:w-5 toolbar-icon-shadow" />
        Inspector
      </h3>
    </template>

    <template #default>
      <!-- inspector content -->
      <div class="tw:px-4 tw:h-full tw:flex tw:flex-col" @click="selection = selection ? {} : {}">
        <!-- nothing to inspect -->
        <div
          v-if="!selection"
          class="tw:flex-1 tw:flex tw:items-center tw:justify-center tw:text-2xl tw:text-[#43474d] tw:select-none"
        >
          Nothing to inspect
        </div>

        <!-- inspect selection -->
        <div v-else class="tw:flex-1 tw:flex tw:flex-col tw:gap-4 tw:py-2 tw:text-xs">
          <AudioTrack v-if="audioTrack" :audio-track />
        </div>
      </div>
    </template>
  </ScrollablePanel>
</template>

<style scoped></style>
