<script setup lang="ts">
import { ref, watch } from "vue";
import { pb } from "../pocketbase";

const props = defineProps({
  restaurant: { type: Object },
});

const reviews = ref<Object[]>([]);

watch(
  () => props.restaurant,
  async (newval, oldval) => {
    console.log("fetch");
    if (props.restaurant === undefined) {
      reviews.value = [];
    } else {
      reviews.value = await pb
        .collection("reviews")
        .getFullList({ filter: pb.filter("restaurant ~ {:id}", { id: props.restaurant.id }), expand: "user" });
    }
  }
);
</script>

<template>
  <template v-for="review in reviews" :key="review.id">
    <div class="card card-compact bg-base-100 shadow-xl">
      <div class="card-body">
        <h2 class="card-title">{{ review.expand.user.username }}</h2>
        <div class="flex flex-row">
          <p class="text-left">{{ review.text }}</p>
        </div>

        <div class="flex flex-row items-center">
          <div class="flex-1"></div>
          <p class="flex-0 align-bottom flex-grow-0 mx-3">{{ review.rating }}/5</p>
          <div class="rating align-bottom flex-0 flex-grow-0">
            <input type="radio" disabled name="rating-1" class="mask mask-star" :checked="false" />
            <input type="radio" disabled name="rating-1" class="mask mask-star" :checked="false" />
            <input type="radio" disabled name="rating-1" class="mask mask-star" :checked="true" />
            <input type="radio" disabled name="rating-1" class="mask mask-star" :checked="false" />
            <input type="radio" disabled name="rating-1" class="mask mask-star" :checked="false" />
          </div>
        </div>
      </div>
    </div>
  </template>
</template>
