<template>
  <div class="select-car overflow-hidden">
    <div class="select-car-form rounded text-center">
      <Header
        :text="year + ' ' + make + ' ' + model"
      />
      <radioQuestion
        :questionText="'What style is your ' + model + '?'"
        :answers="styles"
        :chooseAnswer="selectStyle"
      />
    </div>
  </div>
</template>

<script>
import radioQuestion from "@/commonComponents/radioQuestion/radioQuestion";
import Header from "@/uxComponents/header/header";
import store from "@/store";
import router from "@/router";
import { mapState } from "vuex";

export default {
  name: "SelectCar",
  computed: {
    ...mapState(["year", "make", "model", "styles"]),
  },
  methods: {
    selectStyle(style) {
        store.commit("updateStyle", { style });
        router.push(
          `/select-damage?year=${store.year}&make=${store.make}&model=${store.model}&style=${style}`
        );
    },
    goBack() {
      this.$store.state.slideTransition = "slide_reverse";
      this.$router.push(
        `/select-model?year=${store.year}&make=${store.make}`
      );
    },
  },
  components: {
    radioQuestion,
    Header,
  },
};
</script>
