<script lang="ts" setup>
import { Ref, ref } from "vue";
import { fetchRoom } from "@/api/fetchRoom.ts";
import RoomOccupation from "@/components/RoomOccupation.vue";

const rooms = async () => {
  return await fetchRoom();
};

const roomsList: Ref<{ name: string }[]> = ref([]);
const selectedRoom: Ref<{ name: string }> = ref({ name: "" });

rooms().then(
  (data) =>
    (roomsList.value = data.map((room) => {
      return { name: room };
    })),
);
</script>

<template>
  <div class="flex flex-column">
    <div class="flex align-items-center justify-content-center h-4rem m-2">
      <h3 class="text-4xl">{{$t('roomFinderPage.headline')}}</h3>
      <i
        class="pi pi-search vertical-align-baseline ml-3"
        style="font-size: 2rem"
      ></i>
    </div>
    <div
      class="flex align-items-center justify-content-center h-4rem border-round m-2"
    >
      <h5 class="text-2xl">{{$t('roomFinderPage.detail')}}</h5>
    </div>
    <div
      class="flex align-items-center justify-content-center border-round m-2"
    >
      <Dropdown
        v-model="selectedRoom"
        :options="roomsList"
        class="w-full md:w-25rem mx-2"
        filter
        option-label="name"
        :placeholder="$t('roomFinderPage.dropDownSelect')"
        :empty-message="$t('roomFinderPage.noRoomsAvailable')"
        :autoFilterFocus="true"
      />
    </div>
    <div class="m-6">
      <RoomOccupation :room="selectedRoom.name" />
    </div>
  </div>
</template>
