<script setup>
const auth = useAuthStore()
const config = useMyConfigStore()

const rentals = computed(() => {
    return auth.rentals
})

const states = computed(() => {
    return config.states
})

function getStateName(id) {
    if (id == '0') {
        return 'Visszaigazolásra vár'
    }
    let match = states.value?.filter(x => { if (x.id == id) { return true } })
    if (match?.length > 0) {
        return match[0].name
    }
}

function getYear(date) {

}

function getMont(date) {

}

import { Device } from '@capacitor/device';
const deviceInfo = await Device.getInfo();
const deviceId = await Device.getId();
</script>
<template>
    <AppMenu />
    <div v-if="!rentals">
        <div class="p-3 text-center">
            <div class="py-5">
                <Icon name="ph:calendar-slash-thin" size="68" class="opacity-30" />
            </div>
            Jelenleg nincs foglalásod
        </div>
    </div>
    <pre>{{deviceId}}</pre>
    <pre>{{deviceInfo}}</pre>

    <div v-for="rent in rentals" class="p-2">
        <div class="p-card border-t border-t-4 border-primary">
            <div class="ps-3">{{ getStateName(rent.status) }}</div>
            <div v-if="rent.jaratszam" class="text-end text-xs pe-3"><span class="">járatszám:</span><b>{{
                    rent.jaratszam
                    }}</b></div>
            <div class="flex items-baseline flex-row">
                <div class="text-center p-2 w-full items-top">
                    <div class="text-xs">{{ rent.auto_felvetel_datum }}</div>
                    <div class="text-2xl">{{ rent.auto_felvetel_idopont }}</div>
                    <div class="text-xs">{{ rent.auto_felvetel_hely }}</div>
                </div>
                <div class="w-4"></div>
                <div class="text-center p-2 w-full">
                    <div class="text-xs">{{ rent.auto_leadas_datum }}</div>
                    <div class="text-2xl">{{ rent.auto_leadas_idopont }}</div>
                    <div class="text-xs">{{ rent.auto_leadas_hely }}</div>
                </div>
            </div>
        </div>
    </div>

    <div class="py-5 px-3 ">
        <Button class="w-full" variant="success" icon="pi pi-plus" @click="$router.push({ path: '/rent' })">Új
            foglalás</Button>

    </div>

</template>
