<template>
  <v-app-bar class="px-2" color="background" flat density="comfortable">
    <div class="title-box">
      <v-icon class="shark-400" size="large" icon="folder" />
      <div class="file-name text-base-medium">
        {{ options.fileName }}
      </div>
      <div class="title-box">
        <v-hover v-slot="{ props, isHovering }">
          <v-icon v-bind="props" class="save-icon shark-400" :class="[state]" :icon="icon" size="small" />
          <v-slide-x-transition>
            <div class="save-text text-sm-regular" :class="[state]" v-if="isHovering || showText">{{ text }}</div>
          </v-slide-x-transition>
        </v-hover>
      </div>
    </div>
    <v-spacer />
    <v-btn v-if="showUpgrade" color="green-darken-1" prepend-icon="diamond" variant="tonal" @click="upgrade">
      <span>{{ t('labels.upgrade') }}</span>
    </v-btn>
    <!--   /* v8 ignore start -- @Preserve */ -->
    <v-tooltip location="bottom" open-delay="1000">
      <template #activator="{ props }">
        <v-btn
          v-bind="props"
          v-if="showNotificationDropdown"
          color="subtext"
          data-testid="notifications"
          icon="notifications"
          size="40"
          variant="text"
          @click="options.onNotificationDropdown!(0, 0)"
        />
      </template>
      <span>{{ t('labels.notifications') }}</span>
    </v-tooltip>
    <!--   /* v8 ignore stop -- @Preserve */ -->
    <settings-menu />
    <avatar-dropdown-menu @close="emit('close')" />
  </v-app-bar>
</template>

<script setup lang="ts">
import { storeToRefs } from 'pinia';
import { useViewerStore } from '@/stores/viewer.store';
import { computed } from 'vue';
import { useSaveStore } from '@/stores/save.store';
import { useI18n } from 'vue-i18n';

type Emits = {
  close: [void];
};

const emit = defineEmits<Emits>();

const { t } = useI18n();
const { options } = storeToRefs(useViewerStore());
const { text, icon, showText, state } = storeToRefs(useSaveStore());

const showNotificationDropdown = computed(() => {
  return !!options.value.onNotificationDropdown;
});

const showUpgrade = computed(() => {
  return !!options.value.onUpgrade;
});

async function upgrade(): Promise<void> {
  if (options.value.onUpgrade) {
    await options.value.onUpgrade();
  }
}
</script>

<style lang="scss">
.title-box {
  display: flex;
  align-items: center;
  gap: 8px;
}

.file-name {
  display: -webkit-box;
  max-width: 352px;
  -webkit-box-orient: vertical;
  line-clamp: 1;
  -webkit-line-clamp: 1;
  overflow: hidden;
  color: #5e5e6b;
  text-overflow: ellipsis;
}

.save-icon {
  transition: transform 1s;
  &.UNSAVED {
    color: rgb(var(--v-theme-lightning_600)) !important;
  }
  &.ERROR {
    color: rgb(var(--v-theme-amaranth_600)) !important;
  }
  &.SAVING {
    animation: activate 1s infinite ease-in-out;
  }
}

.save-text {
  color: #5e5e6b;

  &.UNSAVED {
    color: rgb(var(--v-theme-lightning_700)) !important;
  }

  &.ERROR {
    color: rgb(var(--v-theme-amaranth_900)) !important;
  }
}

@keyframes activate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(180deg);
  }
}
</style>
