<script>
import { restaurantStore } from '@/PiniaStores/restaurantStore.js'
import { userStore } from '@/PiniaStores/UserStore.js'

export default {
  data() {
    return {
      userStore_: userStore(),
    }
  },
  props: {
    local: {
      required: true,
    },
  },

  methods: {
    handleClick() {
      let restaurantStore_ = restaurantStore()

      console.log(restaurantStore_)
      restaurantStore_.setRestaurant(
        this.local.id,
        this.local.name,
        this.local.description,
        this.local.address,
        this.local.workingHours,
        this.local.logo,
        this.local.averageRating,
      )
      console.log(restaurantStore().id)
    },
    async addToFavorites() {
      fetch(`http://localhost:8080/api/customer/favourite-locals/add/${this.local.id}`, {
        method: 'POST',
        headers: {
          Authorization: this.userStore_.getToken,
        },
      }).catch((error) => console.log(error))
    },
  },
}
</script>

<template>
  <div id="container" class="row my-3 p-2" @click="handleClick()">
    <div class="col info">
      <h3>{{ local.name }}</h3>
      <h5>{{ local.address }}</h5>
      <p>Rating: {{ local.averageRating }}</p>
    </div>
    <div class="col">
      <button class="btn btn-dark" @click="addToFavorites()">Add to favourites</button>
    </div>
  </div>
</template>

<style scoped>
#container {
  border-left: 3px solid #8377d1;
  background: #fbfff1;
  /*border-radius: 10px;*/
}
</style>
