<script setup lang="ts">
import { ViewLockType } from 'nocodb-sdk'

const { t } = useI18n()

const { isMobileMode, user } = useGlobal()

const { activeView, openedViewsTab } = storeToRefs(useViewsStore())

const { basesUser } = storeToRefs(useBases())
const { base, isSharedBase } = storeToRefs(useBase())

const { activeTable } = storeToRefs(useTablesStore())

const { isLeftSidebarOpen } = storeToRefs(useSidebarStore())

const isViewOwner = computed(() => {
  return activeView.value?.owned_by === user.value?.id
})

const idUserMap = computed(() => {
  return (basesUser.value.get(base.value?.id) || []).reduce((acc, user) => {
    acc[user.id] = user
    acc[user.email] = user
    return acc
  }, {} as Record<string, any>)
})

const viewModeInfo = computed(() => {
  switch (activeView.value?.lock_type) {
    case ViewLockType.Collaborative:
      return t(viewLockIcons[ViewLockType.Collaborative]?.title)
    case ViewLockType.Personal:
      return `${t(viewLockIcons[ViewLockType.Personal]?.title)} ${
        isViewOwner.value
          ? `(${t('general.you')})`
          : activeView.value?.owned_by && idUserMap.value[activeView.value.owned_by]
          ? `(${idUserMap.value[activeView.value.owned_by]?.display_name || idUserMap.value[activeView.value.owned_by]?.email})`
          : ''
      }`
    case ViewLockType.Locked:
      if (!activeView.value?.meta?.lockedByUserId || idUserMap.value[activeView.value?.meta?.lockedByUserId]) {
        return t(viewLockIcons[ViewLockType.Locked]?.title)
      }

      return t('title.lockedByUser', {
        user:
          idUserMap.value[activeView.value?.meta?.lockedByUserId]?.id === user.value?.id
            ? t('general.you')
            : idUserMap.value[activeView.value?.meta?.lockedByUserId]?.display_name ||
              idUserMap.value[activeView.value?.meta?.lockedByUserId]?.email,
      })

    default:
      return t(viewLockIcons[ViewLockType.Collaborative]?.title)
  }
})
</script>

<template>
  <div
    class="flex flex-row items-center border-nc-border-gray-extralight transition-all duration-100 select-none"
    :class="{
      'text-base w-[calc(100%_-_52px)]': isMobileMode,
      'w-[calc(100%_-_44px)]': !isMobileMode && !isLeftSidebarOpen,
      'w-full': !isMobileMode && isLeftSidebarOpen,
    }"
  >
    <template v-if="!isMobileMode">
      <SmartsheetTopbarProjectListDropdown v-if="activeTable">
        <template #default="{ isOpen }">
          <div
            class="rounded-lg h-8 px-2 text-nc-content-inverted-secondary font-weight-500 hover:(bg-nc-bg-gray-light text-nc-content-gray-emphasis) flex items-center gap-1 cursor-pointer max-w-1/3"
            :class="{
              '!max-w-none': isSharedBase && !isMobileMode,
              '': !isMobileMode && isLeftSidebarOpen,
            }"
          >
            <NcTooltip :disabled="isSharedBase || isOpen">
              <template #title>
                <span class="capitalize">
                  {{ base?.title }}
                </span>
              </template>

              <GeneralProjectIcon :type="base?.type" :color="parseProp(base.meta).iconColor" class="!grayscale min-w-4" />
            </NcTooltip>
            <template v-if="isSharedBase">
              <NcTooltip
                class="ml-1 truncate nc-active-base-title max-w-full !leading-5 !hidden lg:!block"
                show-on-truncate-only
                :disabled="isOpen"
              >
                <template #title>
                  <span class="capitalize">
                    {{ base?.title }}
                  </span>
                </template>

                <span
                  class="text-ellipsis capitalize"
                  :style="{
                    wordBreak: 'keep-all',
                    whiteSpace: 'nowrap',
                    display: 'inline',
                  }"
                >
                  {{ base?.title }}
                </span>
              </NcTooltip>
              <GeneralIcon
                icon="chevronDown"
                class="!text-current opacity-70 flex-none transform transition-transform duration-25 w-3.5 h-3.5 !hidden lg:!block"
                :class="{ '!rotate-180': isOpen }"
              />
            </template>
          </div>
        </template>
      </SmartsheetTopbarProjectListDropdown>

      <GeneralIcon icon="ncSlash1" class="nc-breadcrumb-divider" />

      <SmartsheetTopbarTableListDropdown v-if="activeTable">
        <template #default="{ isOpen }">
          <div
            class="rounded-lg h-8 px-2 text-nc-content-inverted-secondary font-weight-500 hover:(bg-nc-bg-gray-light text-nc-content-gray-emphasis) flex items-center gap-1 cursor-pointer"
            :class="{
              'max-w-full': isMobileMode,
              'max-w-none': isSharedBase && !isMobileMode,
            }"
          >
            <LazyGeneralEmojiPicker v-if="isMobileMode" :emoji="activeTable?.meta?.icon" readonly size="xsmall" class="mr-1">
              <template #default>
                <GeneralIcon
                  icon="table"
                  class="min-w-5"
                  :class="{
                    '!text-nc-content-gray-muted': !isMobileMode,
                    '!text-nc-content-inverted-secondary': isMobileMode,
                  }"
                />
              </template>
            </LazyGeneralEmojiPicker>

            <NcTooltip class="truncate nc-active-table-title max-w-full !leading-5" show-on-truncate-only :disabled="isOpen">
              <template #title>
                {{ activeTable?.title }}
              </template>
              <span
                class="text-ellipsis"
                :style="{
                  wordBreak: 'keep-all',
                  whiteSpace: 'nowrap',
                  display: 'inline',
                }"
              >
                {{ activeTable?.title }}
              </span>
            </NcTooltip>
            <GeneralIcon
              icon="chevronDown"
              class="!text-current opacity-70 flex-none transform transition-transform duration-25 w-3.5 h-3.5"
              :class="{ '!rotate-180': isOpen }"
            />
          </div>
        </template>
      </SmartsheetTopbarTableListDropdown>

      <GeneralIcon icon="ncSlash1" class="nc-breadcrumb-divider" />
    </template>

    <!-- <SmartsheetToolbarOpenedViewAction /> -->

    <SmartsheetTopbarViewListDropdown>
      <template #default="{ isOpen }">
        <NcTooltip
          :tooltip-style="{ width: '240px', zIndex: '1049' }"
          :overlay-inner-style="{ width: '240px' }"
          trigger="hover"
          placement="bottom"
          class="flex"
          :disabled="isOpen"
          :mouse-enter-delay="0.5"
          :class="{
            'max-w-full': isMobileMode,
            'max-w-1/2': !isSharedBase && !isMobileMode,
            'max-w-none': isSharedBase && !isMobileMode,
          }"
        >
          <template #title>
            <div class="flex flex-col gap-3">
              <div>
                <div
                  class="text-[10px] leading-[14px] text-nc-content-brand-hover dark:text-nc-content-gray-muted uppercase mb-1"
                >
                  {{ $t('labels.viewName') }}
                </div>
                <div class="text-small leading-[18px]">
                  {{ activeView?.title }}
                </div>
              </div>

              <div v-if="activeView?.created_by && idUserMap[activeView?.created_by]">
                <div
                  class="text-[10px] leading-[14px] text-nc-content-brand-hover dark:text-nc-content-gray-muted uppercase mb-1"
                >
                  {{ $t('labels.createdBy') }}
                </div>
                <div class="text-xs">
                  {{
                    idUserMap[activeView?.created_by]?.id === user?.id
                      ? $t('general.you')
                      : idUserMap[activeView?.created_by]?.display_name || idUserMap[activeView?.created_by]?.email
                  }}
                </div>
              </div>
              <div>
                <div
                  class="text-[10px] leading-[14px] text-nc-content-brand-hover dark:text-nc-content-gray-muted uppercase mb-1"
                >
                  {{ $t('labels.viewMode') }}
                </div>
                <div class="text-xs flex items-start gap-2">
                  {{ viewModeInfo }}
                </div>
              </div>
            </div>
          </template>
          <div
            class="rounded-lg h-8 px-2 text-nc-content-gray font-semibold hover:(bg-nc-bg-gray-light text-nc-content-gray-emphasis) flex items-center gap-1 cursor-pointer"
            :class="{
              'max-w-full': !isSharedBase || isMobileMode,
              'max-w-none': isSharedBase && !isMobileMode,
            }"
          >
            <LazyGeneralEmojiPicker v-if="isMobileMode" :emoji="activeView?.meta?.icon" readonly size="xsmall" class="mr-1">
              <template #default>
                <GeneralViewIcon :meta="{ type: activeView?.type }" class="min-w-4.5 text-lg flex" />
              </template>
            </LazyGeneralEmojiPicker>

            <NcTooltip class="truncate nc-active-view-title max-w-full !leading-5" show-on-truncate-only disabled>
              <template #title>
                {{ activeView?.title }}
              </template>
              <span
                class="text-ellipsis"
                :style="{
                  wordBreak: 'keep-all',
                  whiteSpace: 'nowrap',
                  display: 'inline',
                }"
              >
                {{ activeView?.title }}
              </span>
            </NcTooltip>

            <template v-if="[ViewLockType.Locked, ViewLockType.Personal].includes(activeView?.lock_type)">
              <div
                v-if="activeView?.lock_type === ViewLockType.Personal && activeView.owned_by && idUserMap[activeView.owned_by]"
                class="flex items-center justify-center mx-0.5"
              >
                <GeneralUserIcon
                  :user="idUserMap[activeView.owned_by]"
                  :initials-length="1"
                  size="auto"
                  class="flex-none !h-[14px] !min-h-[14px]"
                  :class="{
                    '!text-[8px]': !parseProp(idUserMap[activeView.owned_by]?.meta).iconType,
                    '!text-tiny': parseProp(idUserMap[activeView.owned_by]?.meta).iconType,
                  }"
                />
              </div>

              <component
                :is="viewLockIcons[activeView.lock_type].icon"
                v-else
                class="flex-none w-3.5 h-3.5 mx-0.5"
                :class="{
                  'text-nc-brand-400': activeView?.lock_type === ViewLockType.Personal && isViewOwner,
                  'text-nc-content-gray-disabled': !(activeView?.lock_type === ViewLockType.Personal && isViewOwner),
                }"
              />
            </template>

            <GeneralIcon
              icon="chevronDown"
              class="!text-current opacity-70 flex-none transform transition-transform duration-25 w-3.5 h-3.5"
              :class="{ '!rotate-180': isOpen }"
            />
          </div>
        </NcTooltip>
      </template>
    </SmartsheetTopbarViewListDropdown>

    <LazySmartsheetToolbarReload v-if="openedViewsTab === 'view' && !isMobileMode" />
  </div>
</template>
