<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>
          {{ vehicle.name + " (" + vehicle.vehicle_class + ")" }}
        </h1>
        <h2 class="text-gray-700 mt-0" v-if="pilot">
          piloted by
          <nuxt-link
            :to="`/people/${pilot.id}`"
            class="inline-block rounded text-md font-semibold bg-gray-400 py-2 px-4 border-b-4 border-gray-500"
          >
            {{ pilot.name }}
          </nuxt-link>
        </h2>
      </header>

      <section class="px-4 pb-4 infos">
        <p>{{ vehicle.description }}</p>

        <h3>
          Appears in
        </h3>
        <nuxt-link
          v-if="film"
          :to="`/films/${film.id}`"
          class="inline-block rounded text-md font-semibold bg-gray-400 py-2 px-4 border-b-4 border-gray-500"
        >
          {{ film.title }}
        </nuxt-link>
      </section>
    </article>
  </div>
</template>

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

export default {
  name: "Vehicle",
  head() {
    return {
      titleTemplate: `%s - ${this.vehicle.name}`
    };
  },
  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.vehicles.vehicle.id !== params.id)
      await store.dispatch("vehicles/getVehicle", params.id);
  },
  computed: {
    pilot: function() {
      return this.$store.getters["vehicles/getPilot"];
    },
    film: function() {
      return this.$store.getters["vehicles/getFilm"];
    },
    ...mapGetters({
      vehicle: "vehicles/vehicle"
    })
  }
};
</script>

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