<template>
  <div
    id="project-info"
    :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 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 text-white fit">
            <div
              class="text-h6 q-pl-sm text-field"
              >
              {{ project.name }}
            </div>

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

    <q-btn
      @click="editProject"
      flat round
      color="white" 
      icon="edit" 
      size="md"
    />
  </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 ?? ''
        }
        : {
          name: '',
          description: '',
          logo: ''
        }
  })
  
  function toggleExpand () {
    expandProjectInfo.value = !expandProjectInfo.value
  }

  async function editProject () {
    if (currentProjectId.value)
      await router.push({ name: 'project_info', params: { id: currentProjectId.value } })
  }

  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>
