<template>
  <header>
    <div class="user">
      <img class="photo" src="../assets/placeholder.jpeg" />
      <br />
      <div class="name">
        <h1>Jeanne Dupont</h1>
      </div>
    </div>
  </header>
  <div class="like">
    <h4 class="texte">Films que vous avez aimés ></h4>
  </div>
  <div class="likeList">
    <div v-for="movie in likedFilms" :key="movie.id">
      <p class="film">
        <router-link :to="'/movie/'+ movie.id + '?uid=' + userId"><img
          :src="'https://image.tmdb.org/t/p/original/' + movie.poster_path"
          withd="100"
          height="300"
        />
        </router-link>
      </p>
    </div>
  </div>
</template>

<script>
import axios from "axios";
const backendURL = process.env.VUE_APP_BACKEND_BASE_URL;

export default {
  data: function () {
    return {
      likedFilms: [],
      userId: "",
    };
  },
  methods: {
    getLiked: async function () {
      try {
        const likedFilms = await axios.get(
          backendURL + "/users/likedMovies/" + this.userId
        );
        return likedFilms.data;
      } catch (error) {
        console.log(error);
      }
    },
  },
  created() {
    this.userId = this.$route.query.uid;
    this.getLiked().then((results) => {
      console.log(results);
      this.likedFilms = results;
    });
    console.log(this.userId);
    console.log(this.likedFilms);
  },
};
</script>

<style scoped>
.user {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
}
.photo {
  width: 200px;
  height: 200px;
  border-radius: 100px;
  align-items: center;
  margin-right: 20px;
  margin-top: 10px;
}
.like {
  text-align: center;
  display: flex;
  background-color: #912f56;
  color: white;
  max-height: 100px;
  justify-content: center;
  max-width: 250px;
  border-radius: 10px;
  margin-left: 20px;
}
.texte {
  justify-items: flex-end;
  margin-left: 5px;
}
.name {
  background-color: #eaf2ef;
}
.likeList {
  display: flex;
  justify-content: space-around;
  flex-flow: row nowrap;
}
</style>