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

export default {
  data() {
    return {
      locals: [],
      userStore_: userStore(),
    }
  },
  beforeMount() {
    fetch(`http://localhost:8080/api/customer/favourite-locals`, {
      method: 'GET',
      headers: {
        Authorization: this.userStore_.getToken,
      },
    })
      .then((res) => res.json())
      .then((data) => (this.locals = data))
      .catch((err) => console.log(err))
  },
  methods: {
    removeRestaurant(id) {
      fetch(`http://localhost:8080/api/customer/favourite-locals/remove/${id}`, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          Authorization: this.userStore_.getToken,
        },
      }).then(()=>{
        this.locals = this.locals.filter(local => local.id !== id)
      })
        .catch((err) => console.log(err))
    }
  },
}
</script>

<template>
  <div class="container" v-for="local in locals" :key="local">
    <div class="row border mt-4">
      <div class="col-8">
      <h3>{{ local.name }}</h3>
      <h3>{{ local.address }}</h3>
      </div>
      <div class="col-4">
        <button class="btn btn-primary" @click="removeRestaurant(local.id)">X</button>
      </div>
    </div>
  </div>
</template>

<style scoped></style>
