<template>
  <div class="toolbar" :class="{ hidden: ['view', 'document'].includes(toolMode) || (toolMode === 'compare' && compareStatus !== 'finished'), security: toolMode === 'security', editor: toolMode === 'editor', disabled: isDisabledHeader}">
    <template v-for="(item, index) in tools[toolMode]" :key="`${item.type}-${item.dataElement || index}`">
      <!-- Annotation -->
      <Annotate v-if="item.type === 'annotation'" :item="item.tools" />

      <!-- Form -->
      <TextFieldButton v-else-if="item.type === 'textFieldButton' && !item.hidden" :item="item" :data-element="item.dataElement" />
      <CheckBoxButton v-else-if="item.type === 'checkBoxButton' && !item.hidden" :item="item" :data-element="item.dataElement" />
      <RadioButton v-else-if="item.type === 'radioButton' && !item.hidden" :item="item" :data-element="item.dataElement" />
      <ListBox v-else-if="item.type === 'listBox' && !item.hidden" :item="item" :data-element="item.dataElement" />
      <ComboBox v-else-if="item.type === 'comboBox' && !item.hidden" :item="item" :data-element="item.dataElement" />
      <PushButton v-else-if="item.type === 'pushButton' && !item.hidden" :item="item" :data-element="item.dataElement" />

      <!-- Security -->
      <SecuritySelect v-else-if="item.type === 'securitySelect'" :item="item" />
      <!-- <WatermarkSelect v-if="item.type === 'watermarkSelect'" :item="item" /> -->

      <!-- Compare -->
      <ComparedToolbar v-else-if="item.type === 'comparedToolbar'" />
      <!-- Content Editor -->
      <ContentEditorToolBar v-else-if="item.type === 'contentEditorToolbar'" />
      <!-- Signature -->
      <SignatureToolBar v-else-if="item.type === 'signatureToolBar'" />
    </template>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { useViewerStore } from '@/stores/modules/viewer'

defineProps(['toolMode'])

const useViewer = useViewerStore()
const tools = useViewer.getToolItems
const compareStatus = computed(() => useViewer.getCompareStatus)
const isDisabledHeader = computed(() => useViewer.getDisabledHeader)
</script>

<style lang="scss" scoped>
.toolbar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 44px;
  z-index: 3;
  background-color: var(--c-toolbar-bg);
  border-bottom: 1px solid var(--c-toolbar-border);
  opacity: 1;
  overflow-x: auto;
  overflow-y: hidden;
  
  &.hidden {
    display: none;
  }

  &.disabled {
    opacity: 0.5;
    pointer-events: none;
  }
}
@media screen and (max-width: 480px) {
  .toolbar {
    padding: 0 10px;
    justify-content: flex-start;
    
    &.security,
    &.editor {
      justify-content: center;
    }
  }
}
</style>
