<template>
  <DialogFrame ref="dialog" :header-title="$t('attendees')" :width="700" :height="600">
    <q-card>
      <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-tab no-caps name="noneAttendees" :label="$t('noneAttendees')" />
      </q-tabs>

      <q-separator />

      <q-tab-panels v-model="tab" animated>
        <q-tab-panel name="attendance">
          <AttendeesTable :event="localEvent!" v-on:update="updateTable" />
        </q-tab-panel>
        <q-tab-panel name="noneAttendees">
          <MembersTable
            add-attendees
            :compare-members="attendees"
            v-on:update-event="updateTable"
            :event-id="localEvent?.id ?? 0"
          />
        </q-tab-panel>
      </q-tab-panels>
    </q-card>
  </DialogFrame>
</template>

<script setup lang="ts">
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';

const emit = defineEmits(['update']);

const dialog = ref();
const localEvent = ref<Event>();
const tab = ref('attendance');
const { attendees, updateAttendees } = useAttendeesTable();

const open = (event: Event) => {
  localEvent.value = event;
  attendees.value = event.attendees ?? [];
  dialog.value.open();
};

async function updateTable() {
  await updateAttendees();
  emit('update');
}

defineExpose({ open });
</script>
