<template>
  <div class="parent">
    <div class="child">
      <h1>{{ movieTitle }}</h1>
      <div class="mark">
        <h2>{{ movieVoteAverage * 0.5 }} ★</h2>
      </div>
    </div>
    <h4>Genres : {{ genreArray.join(", ") }}</h4>
    <h4>{{ movieOverview }}</h4>
    <div class="like_button" v-on:click="handleLike">
      <h2>{{ liking }}</h2>
    </div>
  </div>
</template>

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

export default {
  data: function () {
    return {
      genreArray: [],
      liking: "Unlike",
      userId: "toto",
    };
  },
  props: {
    movieId: Number,
    movieTitle: String,
    movieDate: String,
    movieGenres: Array,
    movieOverview: String,
    movieVoteAverage: Number,
  },
  methods: {
    developGenre: async function (genreId) {
      try {
        const response = await axios
          .get(backendURL + "/genres/genre/id/" + genreId)
          .then();
        return response.data;
      } catch (error) {
        console.log(error);
      }
    },
    developGenres: function (genreIdArray) {
      try {
        const genreArray = genreIdArray.map(this.developGenre);
        return Promise.all(genreArray);
      } catch (error) {
        console.log("e");
        console.log(error);
      }
    },
    handleLike: async function () {
      console.log("clic");
      await axios.put(backendURL + "/users/like/", {
        userId: this.userId,
        movieId: this.movieId,
      });
    },
  },
  created() {
    this.developGenres(this.movieGenres).then((results) => {
      this.genreArray = results;
    });
    this.userId = this.$route.query.uid;
    console.log(this.userId);
  },
};
</script>

<style scoped>
.parent {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.child {
  display: flex;
  justify-content: flex-start;
}
.mark {
  text-align: center;
  vertical-align: center;
  width: 10%;
  height: auto;
  background-color: #912f56;
  border-radius: 25%;
  margin-left: auto;
}
.like_button {
  text-align: center;
  vertical-align: center;
  background-color: #912f56;
  border-radius: 2%;
  width: 90%;
  margin-top: auto;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: auto;
  cursor: pointer;
}
</style>
