<template>
  <div
  id="project-info"
    :style="{ height: headerHeight + 'px' }"
    class="flex row items-center justify-between no-wrap q-my-sm w100"
    style="overflow: hidden; transition: height 0.3s ease-in-out;"
    >
    <div class="ellipsis overflow-hidden">
      <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"
          key="compact"
        >
          {{project.name}}
        </div>

        <div
          v-else
          class="flex items-center no-wrap q-hoverable q-animate--slideUp"
          @click="toggleExpand"
          key="expanded"
        >
          <q-avatar rounded>
            <q-img v-if="project.logo" :src="project.logo" fit="cover" style="height: 100%;"/>
            <pn-auto-avatar v-else :name="project.name"/>
          </q-avatar>

          <div class="q-px-md flex column text-white fit">
            <div
              class="text-h6"
              :style="{ maxWidth: '-webkit-fill-available', whiteSpace: 'normal' }"
            >
              {{project.name}}
            </div>

            <div class="text-caption" :style="{ maxWidth: '-webkit-fill-available', whiteSpace: 'normal' }">
              {{project.description}}
              
            </div>
          </div>
        </div>
      </transition>
    </div>

    <q-btn flat round color="white" icon="mdi-pencil" size="sm" class="q-ml-xl q-mr-sm">
      <q-menu anchor="bottom right" self="top right">
        <q-list>
          <q-item
            v-for="item in menuItems"
            :key="item.id"
            @click="item.func"
            clickable
            v-close-popup 
            class="flex items-center"
            >
              <q-icon :name="item.icon" size="sm" :color="item.iconColor"/>
              <span class="q-ml-xs">{{ $t(item.title) }}</span>
            </q-item>
          </q-list>
      </q-menu>
    </q-btn>
  </div>
  <q-dialog v-model="showDialog">
    <q-card class="q-pa-none q-ma-none">
      <q-card-section align="center">
        <div class="text-h6 text-negative ">
          {{ $t( 
            dialogType === 'archive'
              ? 'project__archive_warning'
              : 'project__delete_warning'
          )}}
        </div>
      </q-card-section>

      <q-card-section class="q-pt-none" align="center">
        {{ $t( 
            dialogType === 'archive'
              ? 'project__archive_warning_message'
              : 'project__delete_warning_message'
          )}}
      </q-card-section>

      <q-card-actions align="center">
        <q-btn
          flat
          :label="$t('back')"
          color="primary"
          v-close-popup
        />
        <q-btn
          flat
          :label="$t(
            dialogType === 'archive'
              ? 'project__archive'
              : 'project__delete'
          )"
          color="negative"
          v-close-popup
          @click="dialogType === 'archive' ? archiveProject() : deleteProject()"
        />
      </q-card-actions>
    </q-card>
  </q-dialog>
</template>

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

  const expandProjectInfo = ref<boolean>(false)
  const showDialog = ref<boolean>(false)
  const dialogType = ref<null | 'archive' | 'delete'>(null)

  const headerHeight = ref<number>(0)

  const menuItems = [
    { id: 1, title: 'project__edit', icon:  'mdi-square-edit-outline', iconColor:  '', func: editProject },
    // { id: 2, title: 'project__backup', icon:  'mdi-content-save-outline', iconColor:  '', func: () => {} },
    { id: 3, title: 'project__archive', icon:  'mdi-archive-outline', iconColor:  '', func:  () => { showDialog.value = true; dialogType.value = 'archive' }},
    { id: 4, title: 'project__delete', icon:  'mdi-trash-can-outline', iconColor:  'red', func:  () => { showDialog.value = true; dialogType.value = 'delete' }},
  ]

  const projectId = computed(() => parseIntString(route.params.id))
  const project =ref({
    name: '',
    description: '',
    logo: ''
  })

  const loadProjectData = async () => {
  if (!projectId.value) {
    await abort()
    return
  } else {
    const projectFromStore = projectsStore.projectById(projectId.value)
    if (!projectFromStore) {
      await abort()
      return
    }

    project.value = {
      name: projectFromStore.name,
      description: projectFromStore.description || '',
      logo: projectFromStore.logo || ''
    }
  }
}

async function abort () {
  await router.replace({ name: 'projects' })
}

async function editProject () {
  await router.push({ name: 'project_info' })
}

function archiveProject () {
  console.log('archive project')
}

function deleteProject () {
  console.log('delete project')
}

function toggleExpand () {
  expandProjectInfo.value = !expandProjectInfo.value
}

interface sizeParams {
    height: number,
    width: number
  }

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

watch(projectId, loadProjectData)

watch(showDialog, () => {
  if (showDialog.value === false) dialogType.value = null
})

onMounted(() => loadProjectData())

</script>

<style>
</style>
