<template>
  <pn-page-card>
    <template #title>
      <div class="flex items-center justify-between col-grow">

        <div>{{ $t('projects__projects') }}</div>

        <div class="flex items-center">
          <q-btn
            @click="goAccount()"
            flat
            no-caps
            icon-right="mdi-chevron-right"
            align="right"
            dense
            class="fix-btn"
            >
            <pn-account-block-name/>
          </q-btn>
        </div>
          
      </div>
    </template>

    <pn-scroll-list>
      <template #card-body-header v-if="projects.length !== 0">
        <q-input
          v-model="searchProject"
          clearable
          clear-icon="close"
          :placeholder="$t('project_chats__search')"
          dense
          class="col-grow q-px-md q-py-md"
          >
          <template #prepend>
            <q-icon name="mdi-magnify" />
          </template>
        </q-input>
      </template>  
      
      <div id="projects-wrapper">
        <q-list separator v-if="projects.length !== 0">
          <q-item
            v-for = "item in activeProjects"
            :key="item.id"
            clickable
            v-ripple
            @click="goProject(item.id)"
            class="w100"
            >
              <q-item-section avatar>
                <q-avatar rounded >
                  <q-img v-if="item.logo" :src="item.logo" fit="cover" style="height: 40px"/>
                  <pn-auto-avatar v-else :name="item.name"/>
                </q-avatar>
              </q-item-section>
              <q-item-section>
                <q-item-label lines="1" class="text-bold">{{ item.name }}</q-item-label>
                <q-item-label caption lines="2">{{item.description}}</q-item-label>

            </q-item-section>
            <q-item-section side class="text-caption ">
              <div class="flex items-center column">           
                <div class="flex items-center">
                  <q-icon name="mdi-chat-outline"/>
                  <span>{{ item.chats }} </span>
                </div>
                <div class="flex items-center">
                  <q-icon name="mdi-account-outline"/>
                  <span>{{ item.persons }}</span>
                </div>
              </div>  
            </q-item-section>
          </q-item>
        </q-list>
        <div v-if="archiveProjects.length !== 0" class="flex column items-center w100" :class="showArchive ? 'bg-grey-12' : ''">
          <div id="btn_show_archive">
            <q-btn-dropdown color="grey" flat no-caps @click="showArchive = !showArchive" dropdown-icon="arrow_drop_up">
              <template #label>
                <span class="text-caption">
                  <span v-if="!showArchive">{{ $t('projects__show_archive') }}</span>
                  <span v-else>{{ $t('projects__hide_archive') }}</span>
                </span>
              </template>
            </q-btn-dropdown>
          </div>

          <q-list separator v-if="showArchive" class="w100">
            <q-item
              v-for = "item in archiveProjects"
              :key="item.id"
              clickable
              v-ripple
              @click="handleArchiveList(item.id)"
              class="w100 text-grey"
              >
              <q-item-section avatar>
                <q-avatar rounded >
                  <q-img v-if="item.logo" :src="item.logo" fit="cover" style="height: 40px"/>
                  <pn-auto-avatar v-else :name="item.name"/>
                </q-avatar>
              </q-item-section>
              <q-item-section>
                <q-item-label lines="1" class="text-bold">{{ item.name }}</q-item-label>
                <q-item-label caption lines="2">{{item.description}}</q-item-label>
              </q-item-section>
            </q-item>
          </q-list>
        </div>
      </div>
      <div
          v-if="projects.length === 0"
          class="flex w100 column q-pt-xl q-pa-md"
          >
            <div class="flex column justify-center col-grow items-center text-grey">
            <q-icon name="mdi-briefcase-plus-outline" size="160px" class="q-pb-md"/>
            <div class="text-h6">
              {{$t('projects__lets_start')}}
            </div>
            <div class="text-caption" align="center">
              {{$t('projects__lets_start_description')}}
            </div>
          </div>
        </div> 
    </pn-scroll-list>

    <q-page-sticky
      position="bottom-right"
      :offset="[18, 18]"
      >
      <q-btn
        fab 
        icon="add"
        color="brand"
        @click="createNewProject"
        />
    </q-page-sticky>
  </pn-page-card>
  <q-dialog v-model="showDialogArchive">
    <q-card class="q-pa-none q-ma-none">
      <q-card-section align="center">
        <div class="text-h6 text-negative ">{{ $t('projects__restore_archive_warning') }}</div>
      </q-card-section>

      <q-card-section class="q-pt-none" align="center">
        {{ $t('projects__restore_archive_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('continue')"
          color="primary"
          v-close-popup
          @click="restoreFromArchive()"
        />
      </q-card-actions>
    </q-card>
  </q-dialog>
</template>

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

  const router = useRouter()
  const projectsStore = useProjectsStore()
  const projects = projectsStore.projects

  const searchProject = ref('')
  const showArchive = ref(false)
  const showDialogArchive = ref(false)
  const archiveProjectId = ref<number | undefined> (undefined)

  async function goProject (id: number) {
    await router.push({ name: 'chats', params: { id }})
  }

  async function goAccount () {
    await router.push({ name: 'account' })
  }

  async function createNewProject () {
    await router.push({ name: 'project_add' })
  }

  function handleArchiveList (id: number) {
    showDialogArchive.value = true
    archiveProjectId.value = id
  }

  function restoreFromArchive () {
    if (archiveProjectId.value) {
      const projectTemp = projectsStore.projectById(archiveProjectId.value)
      if (projectTemp) {
        projectTemp.is_archive = false
        projectsStore.updateProject(archiveProjectId.value, projectTemp)
      }
    }
  }

  const displayProjects = computed(() => {
    if (!searchProject.value || !(searchProject.value && searchProject.value.trim())) return projects
    const searchChatValue = searchProject.value.trim().toLowerCase()
    const arrOut = projects
      .filter(el =>
        el.name.toLowerCase().includes(searchChatValue) ||
        el.description && el.description.toLowerCase().includes(searchProject.value)
      )
    return arrOut
  })

  const activeProjects = computed(() => {
    return displayProjects.value.filter(el => !el.is_archive)
  })

  const archiveProjects = computed(() => {
    return displayProjects.value.filter(el => el.is_archive)
  })

  onMounted(async () => {
    if (!projectsStore.isInit) {
      await projectsStore.init()
    }
  })

  watch(showDialogArchive, (newD :boolean) => {
    if (!newD) archiveProjectId.value = undefined
  })

</script>

<style scoped>
  .fix-btn :deep(.q-btn__content) {
    flex-wrap: nowrap;
  }
</style>
