<template>
  <div class="header" :class="{ disabled: isDisabledHeader || ['redaction', 'remove'].includes(activeTool) }" data-element="header">
    <HeaderItems :items="items" :rightItems="rightItems" :toolMode="toolMode" />
  </div>
  <Toolbar />
  <SignatureVerifyBar v-if="signatureVerify && toolMode === 'sign'" />
  <SecurityApplyBar v-show="['redaction', 'remove'].includes(activeTool)" />
</template>

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

const useViewer = useViewerStore()
const useDocument = useDocumentStore()

const items = useViewer.getActiveHeaderItems
const rightItems = useViewer.getActiveRightHeaderItems
const toolMode = computed(() => useViewer.getToolMode)
const signatureVerify = computed(() => useViewer.getSignatureVerify)
const isDisabledHeader = computed(() => useViewer.getDisabledHeader)
const activeTool = computed(() => useDocument.getActiveTool)
</script>

<style lang="scss">
.header {
  position: relative;
  box-sizing: content-box;
  display: flex;
  align-items: center;
  width: 100%;
  height: 44px;
  padding: 0 20px;
  background-color: var(--c-header-bg);
  border-bottom: 1px solid var(--c-header-border);
  z-index: 4;
  overflow-x: auto;
  overflow-y: hidden;

  &.disabled {
    opacity: 0.5;
    pointer-events: none;
  }
}

@media screen and (max-width: 767.9px) {
  .header {
    padding: 10px;
  }
}
</style>
