<template>
  <div
    id="project-info"
    v-if="project"
    :style="{ height: headerHeight + 'px', minHeight: '48px' }"
    class="flex row items-center justify-between no-wrap w100 q-gutter-x-sm"
    style="overflow: hidden; transition: height 0.3s ease-in-out; margin-left: 0"
    >
    <div class="ellipsis overflow-hidden q-pa-none q-ma-none">
      <q-resize-observer @resize="onResize" />
      <transition
        enter-active-class="animated slideInUp"
        leave-active-class="animated slideOutUp"
        mode="out-in"
        >
        <div
          v-if="!expandProjectInfo"
          @click="toggleExpand"
          class="text-h6 text-bold ellipsis no-wrap w100 q-pa-none q-ma-none"
          key="compact"
          >
          {{ project.name }}
        </div>

        <div
          v-else
          class="flex items-center no-wrap q-hoverable q-animate--slideUp q-py-sm"
          @click="toggleExpand"
          key="expanded"
          >
          <pn-auto-avatar
            :img="project.logo"
            :name="project.name"
            type="rounded"
            size="lg"
          />

          <div class="flex column fit q-pl-sm">
            <div
              class="text-h6 text-bold q-pl-sm text-field"
              style="line-height: 1.45rem;"
              >
              {{ project.name }}
            </div>

            <div
              class="text-caption q-pl-sm text-field text-grey"
              >
              {{ project.description }}
            </div>
          </div>
        </div>
      </transition>
    </div>

    <q-btn
      @click="toProjects"
      flat no-caps
      dense rounded
      class="q-ml-lg"
      color="grey"
      >
      <span class="flex items-center no-wrap q-pl-sm">
        {{ $t('header__to_projects') }}
        <q-icon name="mdi-chevron-right"/>
      </span>
    </q-btn>
  </div>
</template>

<script setup lang="ts">
  import { ref, computed } from 'vue'
  import { useRouter } from 'vue-router'
  import { useProjectsStore } from 'stores/projects'
  
  const router = useRouter()
  const projectsStore = useProjectsStore()

  const expandProjectInfo = ref<boolean>(false)
  const currentProjectId = computed(() => projectsStore.currentProjectId)
  
  const project = computed(() => {
    const currentProject = 
      currentProjectId.value && projectsStore.projectById(currentProjectId.value)
    
      return currentProject
        ? {
          name: currentProject.name,
          description: currentProject.description,
          logo: currentProject.logo
        }
        : null
  })
  
  function toggleExpand () {
    if (project.value && (project.value.description || project.value.logo))
      expandProjectInfo.value = !expandProjectInfo.value
  }

  async function toProjects () {
    await router.push({ name: 'projects' })
  }

  interface sizeParams {
    height: number,
    width: number
  }

  const headerHeight = ref<number>(0)

  function onResize (size :sizeParams) {
    headerHeight.value = size.height
  }

</script>

<style scoped>
  .text-field {
    max-width: -webkit-fill-available;
    white-space: pre-line;
  }
</style>
