<template>
  <div class="q-pa-none flex column col-grow no-scroll">
    <pn-scroll-list>
      <template #card-body-header>
        <div class="w100 flex items-center justify-end q-pa-sm">
            <q-btn color="primary" flat no-caps dense @click="maskCompany()">
              <q-icon
                left
                size="sm"
                name="mdi-drama-masks"
              />
              <div>
                {{ $t('company__mask')}}
              </div>
            </q-btn>
          </div>
      </template>  

      <q-list separator>
        <q-slide-item
          v-for="item in companies"
          :key="item.id"
          @right="handleSlide($event, item.id)"
          right-color="red"
          >
          <template #right>
            <q-icon size="lg" name="mdi-delete-outline"/>
          </template>
          <q-item
            :key="item.id"
            clickable
            v-ripple
            class="w100"
            @click="goCompanyInfo(item.id)"
            >
              <q-item-section avatar>
                <q-avatar rounded>
                  <q-img v-if="item.logo" :src="item.logo" fit="cover" style="max-width: unset; 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 top>
                  <div class="flex items-center">
                    <q-icon v-if="item.masked" name="mdi-drama-masks" color="black" size="sm"/>
                    <q-icon name="mdi-account-outline" color="grey" />
                    <span>{{ item.qtyPersons }}</span>
                  </div>
                </q-item-section> -->
          </q-item>
        </q-slide-item>
      </q-list>
    </pn-scroll-list>
    <q-page-sticky
      position="bottom-right"
      :offset="[18, 18]"
      >
      <transition
        appear
        enter-active-class="animated slideInUp"
        >
        <q-btn
          v-if="showFab"
          fab 
          icon="add"
          color="brand"
          @click="createCompany()"
        />
      </transition>
    </q-page-sticky>
  </div>
  <q-dialog v-model="showDialogDeleteCompany" @before-hide="onDialogBeforeHide()">
    <q-card class="q-pa-none q-ma-none">
      <q-card-section align="center">
        <div class="text-h6 text-negative ">{{ $t('company__delete_warning') }}</div>
      </q-card-section>

      <q-card-section class="q-pt-none" align="center">
        {{ $t('company__delete_warning_message') }}
      </q-card-section>

      <q-card-actions align="center">
        <q-btn
          flat
          :label="$t('back')"
          color="primary"
          v-close-popup
          @click="onCancel()"
        />
        <q-btn
          flat
          :label="$t('delete')"
          color="primary"
          v-close-popup
          @click="onConfirm()"
        />
      </q-card-actions>
    </q-card>
  </q-dialog>
</template>
    
<script setup lang="ts">
  import { ref, computed, onActivated, onDeactivated, onBeforeUnmount } from 'vue'
  import { useRouter, useRoute  } from 'vue-router'
  import { useCompaniesStore } from 'stores/companies'
  import { parseIntString } from 'boot/helpers'
  
  const router = useRouter()
  const route = useRoute()
  const companiesStore = useCompaniesStore()
  const showDialogDeleteCompany = ref<boolean>(false)
  const deleteCompanyId = ref<number | undefined>(undefined)
  const currentSlideEvent = ref<SlideEvent | null>(null)
  const closedByUserAction = ref(false)
  const projectId = computed(() => parseIntString(route.params.id))

  interface SlideEvent {
    reset: () => void
  }

  const companies = companiesStore.companies

  async function maskCompany () {
    await router.push({ name: 'company_mask' })
  }

  async function goCompanyInfo (id :number) {
    await router.push({ name: 'company_info', params: { id: projectId.value, companyId: id }})
  }

  async function createCompany () {
    await router.push({ name: 'add_company' })
  }

  function handleSlide (event: SlideEvent, id: number) {
    currentSlideEvent.value = event
    showDialogDeleteCompany.value = true
    deleteCompanyId.value = id
  }

  function onDialogBeforeHide () {
    if (!closedByUserAction.value) {
      onCancel()
    }
    closedByUserAction.value = false
  }

  function onCancel() {
    closedByUserAction.value = true
    if (currentSlideEvent.value) {
      currentSlideEvent.value.reset()
      currentSlideEvent.value = null
    }
  }

  function onConfirm() {
    closedByUserAction.value = true
    if (deleteCompanyId.value) {
      companiesStore.deleteCompany(deleteCompanyId.value)
    }
    currentSlideEvent.value = null
  }

  // fix fab jumping
  const showFab = ref(false)
  const timerId = ref<ReturnType<typeof setTimeout> | null>(null)

  onActivated(() => {
    timerId.value = setTimeout(() => {
      showFab.value = true
    }, 300)
  })


  onDeactivated(() => {
    showFab.value = false
    if (timerId.value) {
      clearTimeout(timerId.value)
      timerId.value = null
    }
  })

  onBeforeUnmount(() => {
    if (timerId.value) clearTimeout(timerId.value)
  })
</script>

<style scoped>

  /* fix mini border after slide */
  :deep(.q-slide-item__right)
  {
    align-self: center;
  }
</style>

