<script setup lang="ts">
import { storeToRefs } from 'pinia'
import type { RouteLocationNormalized } from 'vue-router'
import TabRedo from './components/tab-redo.vue'
import TabQuick from './components/tab-quick.vue'
import TabFoldButton from './components/tab-foldbutton.vue'
import TabDropDown from './components/tab-dropdown.vue'
import type { TabDropDownInst } from './components/types'
import { REDIRECT_NAME } from '~/constants'
import { Sortable, listenerRouteChange } from '~/utils'

const router = useRouter()
const go = useGo()
const { close } = useTabs()

const multipleTabStore = useMultipleTabStore()
const { tabList } = storeToRefs(multipleTabStore)
const { getShowFold, getShowQuick, getShowRedo } = useMultipleTabSetting()

let activeTabName = $ref<string>('')
const tabDropdownRef = $ref<TabDropDownInst | null>(null)
const tabListRef = computed(() => {
  return unref(tabList).filter(item => !item.meta?.hideInTab && router.hasRoute(item.name!))
})

listenerRouteChange((route) => {
  const { name } = route
  // TODO accessToken
  if (name === REDIRECT_NAME || !route) {
    return
  }
  const { path, fullPath, meta = {} } = route
  const { currentActiveMenu, hideInTab } = meta
  const isHide = !hideInTab ? null : currentActiveMenu
  const p = isHide || fullPath || path
  if (activeTabName !== p) {
    activeTabName = p as string
  }
  if (isHide) {
    const findParentRoute = router.getRoutes().find(item => item.path === currentActiveMenu)
    findParentRoute && multipleTabStore.checkTab(findParentRoute as unknown as RouteLocationNormalized)
  }
  else {
    multipleTabStore.checkTab(unref(route))
  }
})

function handleChange(value: string) {
  go(value, false)
}

// 获取tabs内dom，拖拽
nextTick(() => {
  const selection = document.querySelector(
    '#drag > div > div > div > div > div.n-tabs-wrapper',
  )
  Sortable.create(selection as HTMLElement, {
    animation: 150,
  })
})

function handleContextMenu(e: MouseEvent, tabItem: RouteLocationNormalized) {
  e.preventDefault()
  if (!tabItem) {
    return
  }
  unref(tabDropdownRef)?.openDropdown(e, tabItem)
}

function handleClose(e: MouseEvent, route: RouteLocationNormalized) {
  e.stopPropagation()
  close(route)
}
</script>

<template>
  <NEl class="mt-2">
    <NTabs
      id="drag"
      v-model:value="activeTabName"
      type="card"
      :tabs-padding="8"
      animated
      @update:value="handleChange"
    >
      <NTab
        v-for="(item, index) in tabListRef"
        :key="item.query ? item.fullPath : item.path"
        :name="item.fullPath"
        style="--n-tab-padding: 0"
      >
        <div
          class="group py-4px pl-12px hover:text-[var(--n-tab-text-color-active)]"
          :class="[index === 0 ? 'pr-12px' : 'pr-18px']"
          @contextmenu="handleContextMenu($event, item)"
        >
          <span>{{ $t(item.meta.title || '') }}</span>
          <LIcon
            v-if="index !== 0"
            icon="ant-design:close-outlined"
            class="hover:nt--7px absolute top-1/2 ml-2px mt--6px inline-flex !transition-all hover:!text-14px"
            :class="{ ['!hidden']: activeTabName !== item.fullPath }"
            size="14"
            @click="handleClose($event, item)"
          />
        </div>
      </NTab>
      <template #suffix>
        <TabRedo v-if="getShowRedo" />
        <TabQuick v-if="getShowQuick" :tab-item="$route" />
        <TabFoldButton v-if="getShowFold" />
      </template>
    </NTabs>
    <TabDropDown ref="tabDropdownRef" />
  </NEl>
</template>
