<template>
  <DialogFrame
    ref="dialog"
    :header-title="$t('attendees')"
    :width="700"
    :height="600"
    :inner-padding="0"
  >
    <q-card>
      <!-- tabs declaration in header-->
      <q-tabs
        v-model="tab"
        dense
        class="text-grey"
        active-color="primary"
        indicator-color="primary"
        align="justify"
        narrow-indicator
      >
        <q-tab no-caps name="attendance" :label="$t('attendees')"
          ><q-badge color="primary" text-color="primary-text" floating transparent>{{
            attendees.length
          }}</q-badge></q-tab
        >

        <q-tab no-caps name="noneAttendees" :label="$t('noneAttendees')"
          ><q-badge color="primary" text-color="primary-text" floating transparent>{{
            missingAttendanceAmount
          }}</q-badge></q-tab
        >
      </q-tabs>

      <q-separator />

      <!--tab of attenting members-->

      <q-tab-panels v-model="tab" animated>
        <q-tab-panel name="attendance" style="padding: 0px">
          <AttendeesTable
            :event="localEvent!"
            :event-array="eA"
            v-on:update="(val) => updateTable(val)"
          />
        </q-tab-panel>
        <!--tab of missing attenting members-->
        <q-tab-panel name="noneAttendees" style="padding: 0px">
          <MembersTable
            add-attendees
            :compare-members="attendees"
            v-on:update-event="(val) => updateTable(val)"
            :event-id="localEvent?.id ?? 0"
          />
        </q-tab-panel>
      </q-tab-panels>
    </q-card>
  </DialogFrame>
</template>

<script setup lang="ts">
// imports
import AttendeesTable from './AttendeesTable.vue';
import MembersTable from '../members/MembersTable.vue';
import DialogFrame from 'src/vueLib/dialog/DialogFrame.vue';
import type { Event } from 'src/vueLib/models/event';
import { ref } from 'vue';
import { useAttendeesTable } from './AttendeesTable';
import { useMemberTable } from '../members/MembersTable';
import { getLocalPageDefaults } from 'src/localstorage/localStorage';

//use constants and function of imports
const { attendees, updateAttendees } = useAttendeesTable();
const { setNewFilter, filteredMembers, updateMembers } = useMemberTable();

// declare emits
const emit = defineEmits(['update']);

// declarations
const dialog = ref();
const localEvent = ref<Event>();
const missingAttendanceAmount = ref(0);
const attendanceAmount = ref(0);
const eA = ref(0);
const tab = ref('attendance');

// opens attendace dialog of event
const open = async (eventArray: number, event: Event) => {
  // local declarations
  localEvent.value = event;
  attendanceAmount.value = event.attendees.length ?? [];
  eA.value = eventArray;

  // get attendance
  await updateAttendees(eventArray);
  //get missing attendance from member updateTable
  await updateMembers(event.attendees);

  // set custom filter
  const defaults = getLocalPageDefaults('attendance');
  setNewFilter(defaults?.filteredColumn || '', ...(defaults?.filteredValue ?? []));

  // set amount of missing attendace
  missingAttendanceAmount.value = filteredMembers.value.length;

  //open atttendance dialog
  dialog.value.open();
};

//updates amount of table display and both tables
async function updateTable(amount?: number) {
  // check wether amount is given and if it adds or substracts amount
  if (amount && amount < 0) {
    missingAttendanceAmount.value -= amount;
  } else if (amount) {
    missingAttendanceAmount.value = amount;
  }

  // update attendace table
  await updateAttendees(eA.value);
  // update for amoutn display in tab
  if (localEvent.value) localEvent.value.attendees = attendees.value;
  //emit to update event table
  emit('update');
}

defineExpose({ open });
</script>
