<template>
    <div>
        <baseTemplate
            :currentCarInfo="year + ' ' + make + ' ' + model"
            neededCarInfo="What is your damage?"
        >
           <div class="damage-section text-center">
                <div class="choose-damage row">
                    <div class="col">
                        <imageButton
                                btnImg="windshield-damage.svg"
                                altText="Windshield"
                                damageTitle="Windshield"
                                ariaLabel="Windshield"
                                v-on:click="chooseDamage('windshield')"
                        />
                    </div>
                    <div class="col">
                        <imageButton
                                btnImg="side-window-damage.svg"
                                altText="Side Window"
                                damageTitle="Side door"
                                ariaLabel="Side door"
                                v-on:click="chooseDamage('side-window')"
                        />
                    </div>
                    <div class="col">
                        <imageButton
                                btnImg="back-glass-damage.svg"
                                altText="Back Glass"
                                damageTitle="Back glass"
                                ariaLabel="Back glass"
                                v-on:click="chooseDamage('side-glass')"
                        />
                    </div>
                </div> 
                <transition name="fade">
                    <div v-if="damage" class="how-bad mt-3">
                        <span class="text-center fs-6 fw-bold">How bad is it?</span>
                        <div class="choose-how-bad row mt-2">
                                <div class="col">
                                    <imageButton
                                            btnImg="windshield-damage.svg"
                                            altText="Windshield"
                                            damageTitle="Windshield"
                                            ariaLabel="Windshield"
                                    />
                                </div>
                                <div class="col">
                                    <imageButton
                                            btnImg="side-window-damage.svg"
                                            altText="Side Window"
                                            damageTitle="Side door"
                                            ariaLabel="Side door"
                                    />
                                </div>
                            </div>
                    </div>
                </transition>
                <div class="next-action row">
                    <div class="col">
                        <div v-on:click="goBack" class="change">
                            <span>Change Vehicle</span>
                        </div>
                    </div>
                </div>
           </div>
           
        </baseTemplate>
    </div>
</template>

<script>
import baseTemplate from '../BaseTemplate';
import imageButton from '@/sharedcomponents/Buttons/ImageButton'
import { mapState } from 'vuex'

export default {
  name: 'SelectCar',
  computed: {
      ...mapState(['year', 'make', 'model'])
  },
  data(){
      return {
          damage: ''
      }
  },
  methods: {
      chooseDamage(damage){
          this.damage = damage
          console.log(this.damage)
      },
      goBack(){
          this.$store.state.slideTransition = 'slide_reverse';
          this.$store.commit('removeStyle')
          this.$router.push(`/select-style?year=${this.$store.state.year}&make=${this.$store.state.make}`);
      }
  }, 
  components: {
      baseTemplate,
      imageButton
  }
}
</script>