<script setup lang="ts">
import BaseBreadcrumb from '@/components/shared/BaseBreadcrumb.vue';
import TableAntrian from '@/components/pendaftaran/TableAntrian.vue';
import antreanOperasiData from '~/data/mock/antreanOperasi.json';
import kategoriOperasiData from '~/data/mock/kategoriOperasi.json';
import type { AntreanOperasi } from '~/types/antrean';

const route = useRoute();
const idKategori = parseInt(route.params.id as string);

// Find kategori info
const kategoriInfo = kategoriOperasiData.find(k => k.id === idKategori);

definePageMeta({
  middleware: 'auth'
});

const page = ref({
    title: kategoriInfo ? `List Antrian Kategori ${kategoriInfo.kategori}` : 'List Antrian Kategori'
});

const breadcrumbs = ref([
    {
        text: 'Antrean',
        disabled: false,
        href: '/antrean'
    },
    {
        text: 'List Kategori',
        disabled: false,
        href: '/antrean/list-kategori'
    },
    {
        text: kategoriInfo ? kategoriInfo.kategori : 'Kategori',
        disabled: true,
        href: '#'
    }
]);

const search = ref('');
const antreanList = ref<AntreanOperasi[]>(
    antreanOperasiData.filter(antrian => antrian.idKategoriOperasi === idKategori)
);

const headers = [
    { title: 'No Urut Kategori', key: 'noKategori', width: '180px', align: 'center' as const },
    { title: 'No Urut Spesialis', key: 'noSpesialis', width: '180px', align: 'center' as const },
    { title: 'No Urut Sub Spesialis', key: 'noSubSpesialis', width: '220px', align: 'center' as const },
    { title: 'Jenis Kelamin', key: 'jenisKelamin', sortable: true },
    { title: 'Nama Pasien', key: 'namaPasien', sortable: true },
    { title: 'No Ktp', key: 'noKtp', sortable: true },
    { title: 'No Rekam Medis', key: 'noRekamMedis', sortable: true, width: '250px' },
    { title: 'Status', key: 'status', sortable: true, width: '150px' }
];

// Function to get queue number per spesialis
const getNoPerSpesialis = (item: AntreanOperasi) => {
    const itemsWithSameSpesialis = antreanOperasiData
        .filter(a => a.idKategoriOperasi === idKategori && a.kodeSpesialis === item.kodeSpesialis)
        .sort((a, b) => a.id - b.id);
    return itemsWithSameSpesialis.findIndex(a => a.id === item.id) + 1;
};

// Function to get queue number per sub spesialis
const getNoPerSubSpesialis = (item: AntreanOperasi) => {
    const itemsWithSameSubSpesialis = antreanOperasiData
        .filter(a => a.idKategoriOperasi === idKategori && a.kodeSubSpesialis === item.kodeSubSpesialis)
        .sort((a, b) => a.id - b.id);
    return itemsWithSameSubSpesialis.findIndex(a => a.id === item.id) + 1;
};
</script>
<template>
    <v-row>
        <v-col cols="12">
            <BaseBreadcrumb :title="page.title" :button-back="true" :breadcrumbs="breadcrumbs"></BaseBreadcrumb>
        </v-col>
        <v-col cols="12">
            <v-card elevation="10">
                <v-card-text>
                    <div class="d-flex justify-space-between align-center mb-4">
                        <v-text-field v-model="search" placeholder="Search..." variant="outlined" density="comfortable"
                            hide-details prepend-inner-icon="mdi-magnify" style="max-width: 400px;"></v-text-field>

                        <!-- <v-btn color="primary" prepend-icon="mdi-plus" to="/antrean/pendaftaran">
                            Daftar Antrean Operasi Baru
                        </v-btn> -->
                    </div>
                    
                    <TableAntrian
                        :headers="headers"
                        :items="antreanList"
                        :search="search"
                        min-width="1200px"
                    >
                        <template #item.noKategori="{ index }">
                            <div class="text-center">
                                {{ index + 1 }}
                            </div>
                        </template>
                        <template #item.noSpesialis="{ item }">
                            <div class="text-center">
                                {{ getNoPerSpesialis(item) }}
                            </div>
                        </template>
                        <template #item.noSubSpesialis="{ item }">
                            <div class="text-center">
                                {{ getNoPerSubSpesialis(item) }}
                            </div>
                        </template>
                    </TableAntrian>
                </v-card-text>
            </v-card>
        </v-col>
    </v-row>
</template>
