<template>

<span>

   <closeDocumentCheckDialog
     :dialog-trigger="closeDocumentCheckDialogTrigger"
     :dialog-document="dialogDoc"
      @trigger-dialog-close="closeDocumentCheckDialogClose"
    />

    <!-- Delele document dialog -->
    <deleteDocumentCheckDialog
      :dialog-trigger="deleteObjectDialogTrigger"
      :document-id="toDeleteID"
      :document-type="toDeleteType"
      @trigger-dialog-close="deleteObjectDialogClose"
    />

    <q-tabs
      v-if="localDocuments.length > 0"
      :class="{'hasTextShadow': textShadow}"
      align="left"
      inline-label
      outside-arrows
      mobile-arrows
      class="tabsWrapper"
      dense
      no-caps>
      <transition-group
        name="list"
        tag="div"
        class="headerTransitionWrapper"
        enter-active-class="animated fadeIn"
        leave-active-class="animated fadeOut"
        appear
        :duration="50">

        <q-route-tab
          :ripple="false"
          v-for="document in localDocuments"
          :to="`/project/display-content/${document.type}/${document._id}`"
          :key="document.type+document._id"
          :icon="(retrieveFieldValue(document,'categorySwitch') ? 'fas fa-folder-open' : document.icon)"
          :style="`
            color: ${retrieveFieldValue(document,'documentColor')};
            background-color: ${retrieveFieldValue(document,'documentBackgroundColor')};
            filter: ${(retrieveFieldValue(document,'minorSwitch') ? 'grayscale(100) brightness(0.7)' : '')}`"
          :class="[
            {'isBold':
              (
                retrieveFieldValue(document,'documentColor') !== '#ffffff' &&
                retrieveFieldValue(document,'documentColor') !== '#fff'
              ) &&
              retrieveFieldValue(document,'documentColor') !== ''
              }]"
          :alert="document.hasEdits"
          alert-icon="mdi-feather"
          @click.prevent.middle="tryCloseTab(document)"
          >
            <span class="isDeadIndicator" v-if="retrieveFieldValue(document,'deadSwitch')">
              †
            </span>
            <div
              class="q-tab__label"
             :class="{'isDead': (retrieveFieldValue(document,'deadSwitch') && !hideDeadCrossThrough)}">
             {{retrieveFieldValue(document,'name')}}
            </div>
            <q-tooltip
              :delay="700"
            >
              <span class="isDeadIndicator" v-if="retrieveFieldValue(document,'deadSwitch')">
              †
              </span>
              {{retrieveFieldValue(document,'name')}}
              <br>
              <span class="text-caption">Middle mouse button to close</span>
            </q-tooltip>
            <q-btn
              round
              dense
              flat
              class="z-max q-ml-auto"
              :class="{'q-mr-sm': document.hasEdits}"
              size="xs"
              icon="close"
              style="color: #fff;"
              @click.stop.prevent="tryCloseTab(document)"
            />

            <q-menu
              touch-position
              context-menu
            >
              <q-list class="bg-gunmetal-light text-accent">
                <q-item clickable>
                  <q-item-section>All opened tabs</q-item-section>
                  <q-item-section avatar>
                    <q-icon name="keyboard_arrow_right" />
                  </q-item-section>
                  <q-menu anchor="top end" self="top start">
                    <q-list class="bg-gunmetal text-accent">
                      <q-item
                        :to="`/project/display-content/${menuDoc.type}/${menuDoc._id}`"
                        v-for="menuDoc in localDocuments"
                        :key="menuDoc._id"
                        clickable
                        :style="`
                          color: ${retrieveFieldValue(menuDoc,'documentColor')};
                          background-color: ${retrieveFieldValue(menuDoc,'documentBackgroundColor')};
                          filter: ${(retrieveFieldValue(menuDoc,'minorSwitch') ? 'grayscale(100) brightness(0.7)' : '')}`"
                      >
                       <q-item-section class="isDeadIndicator grow-0" v-if="retrieveFieldValue(menuDoc,'deadSwitch')">
                          †
                        </q-item-section>
                        <q-item-section
                          :class="{'isDead': (retrieveFieldValue(menuDoc,'deadSwitch') && !hideDeadCrossThrough)}"
                        >{{retrieveFieldValue(menuDoc,'name')}}</q-item-section>
                        <q-item-section avatar>
                          <q-icon :name="(retrieveFieldValue(menuDoc,'categorySwitch') ? 'fas fa-folder-open' : menuDoc.icon)" />
                        </q-item-section>
                      </q-item>
                    </q-list>
                  </q-menu>
                </q-item>
                <q-separator dark />
                <q-item clickable v-close-popup @click="copyName(document)">
                  <q-item-section>Copy name</q-item-section>
                  <q-item-section avatar>
                    <q-icon name="mdi-text-recognition" />
                  </q-item-section>
                </q-item>
                <q-item clickable v-close-popup @click="copyTextColor(document)">
                  <q-item-section>Copy text color</q-item-section>
                  <q-item-section avatar>
                    <q-icon name="mdi-eyedropper" />
                  </q-item-section>
                </q-item>
                <q-item clickable v-close-popup @click="copyBackgroundColor(document)">
                  <q-item-section>Copy background color</q-item-section>
                  <q-item-section avatar>
                    <q-icon name="mdi-format-color-fill" />
                  </q-item-section>
                </q-item>
                <q-separator dark />
                <q-item v-if="!document.isNew" clickable v-close-popup @click="addNewUnderParent(document)">
                  <q-item-section>Create new document with this document as parent</q-item-section>
                  <q-item-section avatar>
                    <q-icon name="mdi-file-tree" />
                  </q-item-section>
                </q-item>
                <q-item clickable v-if="!document.isNew"  v-close-popup @click="copyTargetDocument(document)">
                  <q-item-section>Copy this document</q-item-section>
                  <q-item-section avatar>
                    <q-icon name="mdi-content-copy" />
                  </q-item-section>
                </q-item>
                <q-separator v-if="!document.isNew" />
                <q-item clickable v-close-popup @click="tryCloseTab(document)">
                  <q-item-section>Close this tab</q-item-section>
                  <q-item-section avatar>
                    <q-icon name="mdi-close" />
                  </q-item-section>
                </q-item>
                 <q-item clickable v-close-popup @click="SSET_closeAllButCurrentDocuments(document)">
                  <q-item-section>Close all tabs without changes except for this</q-item-section>
                  <q-item-section avatar>
                    <q-icon name="mdi-close-box-outline" />
                  </q-item-section>
                </q-item>
                <q-item clickable v-close-popup @click="SSET_closeAllDocuments">
                  <q-item-section>Close all tabs without changes</q-item-section>
                  <q-item-section avatar>
                    <q-icon name="mdi-close-box-multiple-outline" />
                  </q-item-section>
                </q-item>
                <q-separator dark />
                <q-item clickable v-close-popup @click="SSET_forceCloseAllButCurrentDocuments(document)">
                  <q-item-section class="text-secondary"><b>Force close all tabs except for this</b></q-item-section>
                  <q-item-section avatar class="text-secondary">
                    <q-icon name="mdi-close-box" />
                  </q-item-section>
                </q-item>
                <q-item clickable v-close-popup @click="SSET_forceCloseAllDocuments">
                  <q-item-section class="text-secondary"><b>Force close all tabs</b></q-item-section>
                  <q-item-section avatar class="text-secondary">
                    <q-icon name="mdi-close-box-multiple" />
                  </q-item-section>
                </q-item>
                <q-separator dark />
                <q-item clickable v-close-popup @click="deleteTabDocument(document)">
                  <q-item-section class="text-secondary"><b>Delete this document</b></q-item-section>
                  <q-item-section avatar class="text-secondary">
                    <q-icon name="mdi-text-box-remove-outline" />
                  </q-item-section>
                </q-item>
              </q-list>

            </q-menu>
        </q-route-tab>

      </transition-group>
    </q-tabs>

  </span>

</template>

<script lang="ts">

import BaseClass from "src/BaseClass"

import { Component, Watch } from "vue-property-decorator"
import deleteDocumentCheckDialog from "src/components/dialogs/DeleteDocumentCheck.vue"

import { I_OpenedDocument } from "src/interfaces/I_OpenedDocument"
import closeDocumentCheckDialog from "src/components/dialogs/CloseDocumentCheck.vue"
import { createNewWithParent } from "src/scripts/documentActions/createNewWithParent"
import { copyDocumentName, copyDocumentTextColor, copyDocumentBackgroundColor } from "src/scripts/documentActions/uniqueFieldCopy"
import { copyDocument } from "src/scripts/documentActions/copyDocument"
import { extend } from "quasar"

@Component({
  components: {
    closeDocumentCheckDialog,
    deleteDocumentCheckDialog
  }
})
export default class TopTabs extends BaseClass {
  /****************************************************************/
  // App options
  /****************************************************************/

  /**
   * Determines if the tabs have text shadow or not
   */
  textShadow = false

  /**
   * Determines if the "dead" document type should have a cross-text decoration or not
   */
  hideDeadCrossThrough = false

  /**
   * Watch changes on options
   */
  @Watch("SGET_options", { immediate: true, deep: true })
  onSettingsChange () {
    const options = this.SGET_options
    this.textShadow = options.textShadow
    this.hideDeadCrossThrough = options.hideDeadCrossThrough
  }

  /****************************************************************/
  // Keybind handling
  /****************************************************************/

  /**
   * React to keypresses passed from the parent document
   */
  @Watch("SGET_getCurrentKeyBindData", { deep: true })
  processKeyPush () {
    // Close tab dialog
    if (this.determineKeyBind("closeTab") && this.localDocuments.length > 0 && !this.SGET_getDialogsState) {
      this.tryCloseTab()
    }

    // Next tab
    if (this.determineKeyBind("nextTab") && this.localDocuments.length > 0 && !this.SGET_getDialogsState) {
      this.goToNextTab()
    }

    // Previous tab
    if (this.determineKeyBind("previousTab") && this.localDocuments.length > 0 && !this.SGET_getDialogsState) {
      this.goToPreviousTab()
    }

    // Close all tabs without changes except for this - CTRL + ALT + SHIFT + W
    if (this.determineKeyBind("closeAllTabsWithoutChangesButThis") && this.localDocuments.length > 0 && !this.SGET_getDialogsState) {
      const currentDoc = this.findRequestedOrActiveDocument() as I_OpenedDocument
      this.SSET_closeAllButCurrentDocuments(currentDoc)
    }

    // Close all tabs without changes - CTRL + SHIFT + W
    if (this.determineKeyBind("closeAllTabsWithoutChanges") && this.localDocuments.length > 0 && !this.SGET_getDialogsState) {
      this.SSET_closeAllDocuments()
    }

    // Force close all tabs except for this - NONE
    if (this.determineKeyBind("forceCloseAllTabsButThis") && this.localDocuments.length > 0 && !this.SGET_getDialogsState) {
      const currentDoc = this.findRequestedOrActiveDocument() as I_OpenedDocument
      this.SSET_forceCloseAllButCurrentDocuments(currentDoc)
    }

    // Force close all tabs - NONE
    if (this.determineKeyBind("forceCloseAllTabs") && this.localDocuments.length > 0 && !this.SGET_getDialogsState) {
      this.SSET_forceCloseAllDocuments()
    }
  }

  /****************************************************************/
  // Tab management
  /****************************************************************/

  /**
   * Refresh the local reference whenever something gets changed
   */
  @Watch("SGET_allOpenedDocuments", { deep: true })
  reactToDocumentListChange (val: {docs: I_OpenedDocument[]}, oldVal: {docs: I_OpenedDocument[]}) {
    this.localDocuments = []
    this.localDocuments = val.docs

    // Re-check the route after a change
    this.refreshRoute()
  }

  /**
   * Local reference to the opened document list
   */
  localDocuments: I_OpenedDocument[] = []

  /**
   * Current document to be closed
   */
  dialogDoc = null as unknown as I_OpenedDocument

  /**
   * Attempts to close the document being closed
   */
  tryCloseTab (doc?: I_OpenedDocument) {
    const matchingDocument = this.findRequestedOrActiveDocument(doc)

    if (matchingDocument) {
      this.dialogDoc = matchingDocument
      this.closeDocumentCheckDialogAssignUID()
    }
  }

  /**
   * Attempt to navigate to next tab
   */
  goToNextTab () {
    let index = -1
    const matchingDocument = this.localDocuments.find((e, i) => {
      index = i
      return e.url === this.$route.path
    })

    if (matchingDocument && index !== this.localDocuments.length - 1) {
      this.$router.push({ path: this.localDocuments[index + 1].url }).catch((e: {name: string}) => {
        if (e && e.name !== "NavigationDuplicated") {
          console.log(e)
        }
      })
    }
    if (matchingDocument && index === this.localDocuments.length - 1) {
      this.$router.push({ path: this.localDocuments[0].url }).catch((e: {name: string}) => {
        if (e && e.name !== "NavigationDuplicated") {
          console.log(e)
        }
      })
    }
  }

  /**
   * Attempt to navigate to previous tab
   */
  goToPreviousTab () {
    let index = -1
    const matchingDocument = this.localDocuments.find((e, i) => {
      index = i
      return e.url === this.$route.path
    })

    if (matchingDocument && index !== 0) {
      this.$router.push({ path: this.localDocuments[index - 1].url }).catch((e: {name: string}) => {
        if (e && e.name !== "NavigationDuplicated") {
          console.log(e)
        }
      })
    }

    if (matchingDocument && index === 0) {
      this.$router.push({ path: this.localDocuments[this.localDocuments.length - 1].url }).catch((e: {name: string}) => {
        if (e && e.name !== "NavigationDuplicated") {
          console.log(e)
        }
      })
    }
  }

  /****************************************************************/
  // Document field copying
  /****************************************************************/

  copyName (currentDoc: I_OpenedDocument) {
    copyDocumentName(currentDoc)
  }

  copyTextColor (currentDoc: I_OpenedDocument) {
    copyDocumentTextColor(currentDoc)
  }

  copyBackgroundColor (currentDoc: I_OpenedDocument) {
    copyDocumentBackgroundColor(currentDoc)
  }

  /****************************************************************/
  // Document copy
  /****************************************************************/

  documentPass = null as unknown as I_OpenedDocument

  copyTargetDocument (currentDoc: I_OpenedDocument) {
    this.documentPass = extend(true, {}, currentDoc)

    const newDocument = copyDocument(this.documentPass, this.generateUID())

    const dataPass = {
      doc: newDocument,
      treeAction: false
    }

    // @ts-ignore
    this.SSET_addOpenedDocument(dataPass)
    this.$router.push({
      path: newDocument.url
    }).catch((e: {name: string}) => {
      const errorName : string = e.name
      if (errorName === "NavigationDuplicated") {
        return
      }
      console.log(e)
    })
  }

  /****************************************************************/
  // Add new document under parent
  /****************************************************************/
  addNewUnderParent (currentDoc: I_OpenedDocument) {
    createNewWithParent(currentDoc, this)
  }

  /****************************************************************/
  // Close document dialog
  /****************************************************************/

  closeDocumentCheckDialogTrigger: string | false = false
  closeDocumentCheckDialogClose () {
    this.closeDocumentCheckDialogTrigger = false
  }

  closeDocumentCheckDialogAssignUID () {
    this.closeDocumentCheckDialogTrigger = this.generateUID()
  }

  /****************************************************************/
  // Delete dialog
  /****************************************************************/

  deleteObjectDialogTrigger: string | false = false
  deleteObjectDialogClose () {
    this.deleteObjectDialogTrigger = false
  }

  deleteObjectAssignUID () {
    this.deleteObjectDialogTrigger = this.generateUID()
  }

  toDeleteID = ""
  toDeleteType = ""

  deleteTabDocument (targetDocument: I_OpenedDocument) {
    this.toDeleteID = targetDocument._id
    this.toDeleteType = targetDocument.type
    this.deleteObjectAssignUID()
  }
}
</script>

<style lang="scss" scoped>
.headerTransitionWrapper {
  display: flex;
}

.tabsWrapper .fas {
  font-size: 16px;
}

.tabsWrapper .mdi {
  font-size: 18px;
}
</style>

<style lang="scss">
.tabsWrapper {
  -webkit-app-region: no-drag;

  &.hasTextShadow {
    .q-tab__label,
    .q-tab__icon {
      $shadowColorOutline: #000;
      $shadowColorSurround: #000;

      filter: drop-shadow(0 0 4px #000);
      text-shadow:
        -2px -2px 0 $shadowColorSurround,
        2px -2px 0 $shadowColorSurround,
        -2px 2px 0 $shadowColorSurround,
        2px 2px 0 $shadowColorSurround,
        -1px -1px 0 $shadowColorOutline,
        1px -1px 0 $shadowColorOutline,
        -1px 1px 0 $shadowColorOutline,
        1px 1px 0 $shadowColorOutline;
    }
  }

  .q-tabs__arrow {
    text-shadow: none !important;
  }

  .isBold .q-tab__label {
    font-weight: 500 !important;
  }

  .q-tab {
    padding: 0 10px;

    &__content {
      min-width: 170px;
      width: 170px;
      justify-content: flex-start;
      text-align: left;
    }

    &__label {
      overflow: hidden;
      text-overflow: ellipsis;
      padding-top: 2px;
      font-weight: 400;
      font-size: 13px;
    }
  }

  .fas {
    font-size: 16px;
  }

  .mdi {
    font-size: 18px;
  }

  &.q-tabs--dense .q-tab {
    min-height: 40px;
  }

  .q-tab__alert-icon {
    font-size: 16px;
    top: 4px;
    right: -10px;
    color: $primary;
  }
}

body.body--dark {
  .topTabs {
    .q-tab {
      color: #dcdcdc;
    }
  }
}
</style>
