<template>
  <div
    class="py-4 flex flex-col lg:flex-row items-center lg:items-start justify-center"
  >
    <article
      class="mb-4 inline-flex flex-col justify-between bg-gray-100 prose prose-sm rounded-md shadow-md transition-shadow duration-300 hover:shadow-xl"
    >
      <header class="p-4 rounded-t-md">
        <h1>
          {{ film.title + " (" + film.release_date + ")" }}
        </h1>
        <h2 class="text-gray-700 mt-0">{{ "by " + film.director }}</h2>
      </header>

      <section class="px-4 infos">
        <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>
    </article>

    <aside class="lg:inline-flex lg:ml-4">
      <section
        class="p-4 lg:mr-4 bg-gray-100 rounded-md shadow-md transition-shadow duration-300 hover:shadow-xl"
      >
        <h3 class="font-medium text-lg mb-4">People</h3>
        <ul v-if="people.length">
          <li :key="person.id" v-for="person in people">
            <Person :person="person" />
          </li>
        </ul>
      </section>

      <!-- <section
        v-if="Object.keys(film.vehicles).length"
        class="p-4 lg:mr-4 bg-gray-100 rounded-md shadow-md transition-shadow duration-300 hover:shadow-xl"
      >
        <h3 class="font-medium text-lg mb-4">Vehicles</h3>
        <div>{{ film.vehicles }}</div>
      </section>

      <section
        v-if="Object.keys(film.locations).length"
        class="p-4 lg:mr-4 bg-gray-100 rounded-md shadow-md transition-shadow duration-300 hover:shadow-xl"
      >
        <h3 class="font-medium text-lg">Locations</h3>
        <div>{{ film.locations }}</div>
      </section> -->
    </aside>
  </div>
</template>

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

export default {
  name: "Film",
  components: {
    Person: () => import("@/components/Person")
  },
  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: {
    people() {
      return this.$store.getters["people/getPeopleByFilmId"](this.film.id);
    },
    ...mapGetters({
      film: "films/film"
    })
  }
};
</script>

<style lang="css">
article header {
  background-color: #85ffbd;
  background-image: linear-gradient(45deg, #85ffbd 0%, #fffb7d 100%);
}

.film-score::before {
  content: "";
  background: url(~assets/svg/rotten-tomatoes.svg);
  background-repeat: no-repeat;
  background-size: 100%;
  width: 1.5rem;
  height: 1.5rem;
  display: inline-block;
  vertical-align: sub;
  margin-right: 0.5rem;
}
</style>
