<template>
  <section class="py-4">
    <h1>
      {{ film.title + " (" + film.release_date + ")" }}
    </h1>
    <h2 class="text-gray-700 mt-0">{{ "by " + film.director }}</h2>
    <p>{{ film.description }}</p>
    <p
      class="film-score font-bold text-lg"
      :class="{
        'text-green-600': film.rt_score >= 75,
        'text-orange-600': film.rt_score >= 50 && film.rt_score < 75,
        'text-yellow-600': film.rt_score >= 25 && film.rt_score < 50,
        'text-red-600': film.rt_score >= 0 && film.rt_score < 25
      }"
    >
      {{ film.rt_score + "%" }}
    </p>
    <section class="people">
      <h3>People</h3>
      <div>{{ film.people }}</div>
    </section>

    <section class="vehicles">
      <h3>Vehicles</h3>
      <div>{{ film.vehicles }}</div>
    </section>

    <section class="locations">
      <h3>Locations</h3>
      <div>{{ film.locations }}</div>
    </section>
  </section>
</template>

<script>
import { mapGetters } from "vuex";

export default {
  name: "Film",
  head() {
    return {
      titleTemplate: `%s - ${this.film.title}`
    };
  },
  validate({ params }) {
    const uuid = new RegExp(
      /^[0-9A-Za-z]{8}-[0-9A-Za-z]{4}-4[0-9A-Za-z]{3}-[89ABab][0-9A-Za-z]{3}-[0-9A-Za-z]{12}$/
    );
    return uuid.test(params.id);
  },
  async asyncData({ params, store }) {
    if (!store.state.films.film.id !== params.id)
      await store.dispatch("films/getFilm", params.id);
  },
  computed: {
    ...mapGetters({
      film: "films/film"
    })
  },
  async mounted() {
    await this.$store.dispatch("films/getPeople");
    await this.$store.dispatch("films/getVehicles");
    await this.$store.dispatch("films/getLocations");
  }
};
</script>

<style></style>
