<template>
  <div class="home">
    <div class="parent">
      <MoviePoster class="child" :posterPath="moviesInfos.poster_path" />
      <MovieInfos
        class="child"
        :movieId="moviesInfos.id"
        :movieTitle="moviesInfos.title"
        :movieDate="moviesInfos.release_date"
        :movieGenres="moviesInfos.genre_ids"
        :movieOverview="moviesInfos.overview"
        :movieVoteAverage="moviesInfos.vote_average"
      />
    </div>
  </div>
</template>

<script>
import axios from "axios";
import MoviePoster from "@/components/MoviePoster.vue";
import MovieInfos from "@/components/MovieInfos.vue";
const backendURL = process.env.VUE_APP_BACKEND_BASE_URL;

export default {
  name: "Home",
  components: {
    MoviePoster,
    MovieInfos,
  },
  data: function () {
    return {
      movieId: "",
      moviesInfos: {},
    };
  },
  methods: {
    fetchMovie: async function () {
      try {
        // Do something if call succeeded
        const response = await axios.get(
          backendURL + "/movies/movie/id/" + this.movieId
        );
        console.log("ok");
        console.log(response.data);
        await (this.moviesInfos = response.data);
        console.log("yo");
        console.log(this.moviesInfos);
      } catch (error) {
        // Do something if call failed
        this.usersLoadingError = "An error occured while fetching movies.";
        console.error(error);
      }
    },
  },
  created() {
    console.log("ok");
    this.movieId = this.$route.params.id;
    console.log(this.movieId);
    this.fetchMovie();
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.home {
  height: 100%;
  vertical-align: middle;
  display: inline;
}
.parent {
  vertical-align: middle;
  display: flex;
  height: 90%;
  margin-top: 3%;
  margin-bottom: 3%;
}
.child {
  width: 45%;
  margin-left: auto;
  margin-right: auto;
}
</style>
