<template>
  <div class="home">
  <div class="carousel">
   <carousel :items-to-show="5.5" autoplay=1300>
    <slide v-for="movie in movies" :key="movie.id" autoplay='True' transition="100" >
        <router-link :to="'/movie/'+ movie.id">
        <img
          :src="'https://image.tmdb.org/t/p/original/' + movie.poster_path"
          withd="100"
          height="300"
        />
        </router-link>
    </slide>
    <template #addons>
      <navigation />
      <pagination />
    </template>
  </carousel>
  </div>
    <br />
  <div class="corps">
  <div class="type">
    <MovieType />
  </div>
  <div class="movie-affichage">
    <li v-for="reco in recos" :key="reco.id">
      <p class="name">
        <h5 class="center"> {{ reco.title }}</h5>
      </p>
      <p class="film">
        <router-link :to="'/movie/'+ reco.id">
        <img
          :src="'https://image.tmdb.org/t/p/original/' + reco.poster_path"
          withd="100"
          height="300"
        />
        </router-link>
      </p>
    </li>
    </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import "vue3-carousel/dist/carousel.css";
import { Carousel, Slide, Pagination, Navigation } from "vue3-carousel";
import MovieType from "../components/MovieType.vue";
const backendURL = process.env.VUE_APP_BACKEND_BASE_URL;


export default {
  name: "Home",
  components: {
    Carousel,
    Slide,
    Pagination,
    Navigation,
    MovieType,
  },
  data: function () {
    return {
      moviename: "",
      movies: [],
      recos: [],
      moviesLoadingError: "",
      userId:""
    };
  },
  methods: {
    fetchMovies: function () {
      axios
        .get(
           backendURL + "/movies/popular/20",
        )
        .then((response) => {
          this.movies = response.data;
          console.log(response.data)
        })
        .catch((error) => {
          this.moviesLoadingError = "An error occured while e ing movies.";
          console.error(error);
        });
    },
    fetchRecos: function () {
      axios
        .get(
           backendURL + "/reco/" + this.userId,
        )
        .then((response) => {
          console.log(backendURL + "/reco/" + this.userId)
          this.recos = response.data;
          console.log(response.data)
        })
        .catch((error) => {
          this.moviesLoadingError = "An error occured while e ing movies.";
          console.error(error);
        });
    },
            fetchGenres: function () {
      axios
        .get(
           backendURL + "/genres",
        )
        .then((response) => {
          this.genres = response.data;
          console.log(response.data)
        })
        .catch((error) => {
          this.genresLoadingError = "An error occured while e ing genres.";
          console.error(error);
        });
    },
  },
  created() {
    this.userId = this.$route.query.uid
    this.fetchMovies();
    this.fetchGenres();
    this.fetchRecos();
    console.log(this.userId)
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.logo {
  max-width: 100px;
}

h3 {
  margin: 40px 0 0;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}
.carousel {
  margin-top: 30px;
  margin-left: 5px;
  margin-right: 5px;
}
.film {
  display: flex;
  align-self: center;
}
.name {
  max-width: 200px;
  justify-content: center;
  align-items: center;
  background-color: #eaf2ef;
}
.corps {
  display: flex;
}
.center {
  text-align: center;
}
</style>