<script setup>
const auth = useAuthStore()
const config = useMyConfigStore()
const token = useCookie('_auth')
const menuShow = ref()
const router = useRouter()
const user = computed(() => {
    return auth.user
})

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) {

}

function logOut(){
    token.value = null
    auth.user = null
    router.push({path:'/login'})
}
</script>
<template>
    <div class="min-h-12 bg-neutral-800 flex justify-between items-center pe-2">
        <div @click="$router.push({ path: '/' })"
            class="bg-neutral-800 h-12 flex items-center shadow-lg bg-gradient-to-r from-neutral-800 dark:from-neutral-900 to-transparent">
            <img src="/euro_cars_rent_a_car_logo.png" class="h-8 mx-3" />
        </div>
        <div>
            <Drawer v-model:visible="menuShow" header=" " position="right" :pt="{ root: 'border-0' }">
                <template #header>
                    <div class="flex flex-col">
                        <div>{{ auth.user.nev }}</div>
                        <div class="text-xs">{{ auth.user.email }}</div>
                    </div>

                </template>
                <div class="flex flex-col space-y-3 text-sm">
                    <NuxtLink to="/profile">Adataim</NuxtLink>
                    <Divider />
                    <NuxtLink :to="'/page/'+p.id" v-for="p in config?.config.menu">{{ p.label }}</NuxtLink>
                    <!-- <NuxtLink to="/page/72">GYIK</NuxtLink>
                    <NuxtLink to="/page/66">Autóbérlés feltételei</NuxtLink>
                    <NuxtLink to="/page/69">Általános Szerződési Feltételek</NuxtLink>
                    <NuxtLink to="/page/68">Adatvédelmi nyilatkozat</NuxtLink>
                    <NuxtLink to="/page/70">Lemondási és távolmaradási feltételek</NuxtLink>
                    <NuxtLink to="/page/65">Elérhetőség</NuxtLink> -->
                    <Divider />
                    <NuxtLink @click="logOut()">Kijelentketés</NuxtLink>

                </div>
            </Drawer>
            <Button variant="link" icon="pi pi-user" @click="$router.push({ path: '/profile' })"></Button>
            <Button variant="link" icon="pi pi-bars" @click="menuShow = true"></Button>
        </div>
    </div>

    <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>

    <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>
