<template>
  <div class="box" style="padding-top: 40px;">
    <div class="d-flex flex-column align-items-center">
      <h3 class="title" style="margin-bottom: 40px;">Amenities</h3>
      <v-row class="container-chip">
        <v-col
          v-for="item in propertyData.property_amenities.slice(0,9)"
          :key="item.id"
          cols="12"
          lg="4"
          md="4"
          sm="6"
        >
          <div class="d-flex">
            <v-icon :icon="item.icon"></v-icon>
            <span>{{ item.name }}</span>
          </div>
        </v-col>
      </v-row>

      <v-btn
        style="background-color: black; color: white; max-width: fit-content; margin: 40px auto 0 auto;"
        variant="text"
        @click="showAllAmenities = true"
      >
        Show All Amenities
      </v-btn>
    </div>
    <br>

    <v-dialog v-model="showAllAmenities" height="100%" width="auto">
      <v-card class="pa-3" height="100%" max-width="700" width="100%">
        <template #title>
          <span class="font-weight-bold">Amenities</span>
        </template>
        <div v-for="(ac, i) in amenitiesCategories" :key="`ac_${i}`" class="mt-4 mb-5">
          <h4 class="border-b mb-2">{{ ac?.name }}</h4>
          <div v-for="(a,j) in getAmenitiesByCategory(ac?.id)" :key="`am_${j}`" class="my-2">
            {{ a.name }}
          </div>
        </div>
        <template v-slot:actions>
          <v-btn
              class="ms-auto"
              text="close"
              @click="showAllAmenities = false"
          />
        </template>
      </v-card>
    </v-dialog>
  </div>
</template>

<script setup>
const props = defineProps({ property: { type: Object, default: () => ({}) } });
const showAllAmenities = Vue.ref(false);
const propertyData = Vue.ref();
propertyData.value = window.useProperty(props.property);

const amenitiesCategories = Vue.computed(() => {
  try {
    let categories = [];
    propertyData.value?.property_amenities?.map((amenities, i) => {
      categories.push(amenities.amenity_category)
    });
    return [...new Map(categories.map(item => [item["id"], item])).values()];
  } catch (e) {
    console.error(e)
    return []
  }
});
const getAmenitiesByCategory = (category) => {
  return propertyData.value?.property_amenities?.filter((am, i) => am.amenity_category_id === category)
}
</script>