<script setup lang="ts">

const { pb } = usePocketbase()

type playfieldButton = {
    id: number,
    title: string,
    icon: string,
    color: string,
    description: string,
    isPressed: boolean | null

}
type movie = {
    id: string,
    title: string,
    plot: string,
    poster_url: string,
    imdbid: string,
    isActive: boolean,
    created: string,
    updated: string
}

const sessionid = checkSession()

async function getCards() {
    const data = pb.collection('cards').getFullList()
    return data
}

async function get_session() {
    const data = pb.collection('game_sessions').getOne(sessionid as string, { expand: 'movie_title' })
    return data
}

const movie_data = ref<movie>()
movie_data.value = (await get_session()).expand?.movie_title

const cards_data = ref(await getCards())

const playfield = computed(() => {
    pb.collection('game_sessions').subscribe(sessionid as string, (e) => {
        console.log(e.action)
        console.log(e.record)
    })
})

function onButtonPress(id: string) {
    const card = cards_data.value.find((card) => card.id === id)
    if (card) {
        card.isPressed = !card.isPressed
    }
}
</script>

<template>
    <div class="game-room-container">
        <div>
            <h1>{{ movie_data?.title }}</h1>
        </div>
        <div class="playfield">
            <PlayFieldButton v-for="card in cards_data" :key="card.id" :icon="card.icon" :title="card.title"
                :description="card.description" :id="card.id" :isPressed="card.isPressed"
                @button-pressed="onButtonPress" />
        </div>
        <div class="end-game">
            <button class="btn btn-primary">Lopeta peli</button>
        </div>
    </div>
</template>

<style scoped lang="scss">
.game-room-container {
    padding: 1rem;
    display: grid;
    gap: 1rem;

}

h1 {
    text-align: center;
    margin-bottom: 1rem;
}

.playfield {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    width: fit-content;
    margin: auto;
    gap: 1.8rem;
    padding: 0.5rem;
    justify-content: center;
    justify-items: center;
    align-items: center;
    place-items: center;
    overflow-y: auto;
}

.end-game {
    justify-self: center;
    width: 100%;

    button {
        width: 100%;
    }
}
</style>
