<template>
  <div class="timer">
    <p v-if="warning == false" class="timeleft reverse">{{ countDown.toString() }}</p>
    <p v-if="(warning == true) || (typeof warning == 'undefined')" class="timeout reverse">
      <img src="joker.png" alt="joker">
      <img src="joker.png" alt="joker">
      <img src="joker.png" alt="joker">
      <img src="joker.png" alt="joker">
      <img src="joker.png" alt="joker">
    </p>
    <button v-on:click="restartTimer" class="timerBtn"><span class="timerBtn-inner"></span></button>
    <p v-if="warning == false" class="timeleft">{{ countDown.toString() }}</p>
    <p v-if="warning == true || (typeof warning == 'undefined')" class="timeout">
      <img src="joker.png" alt="joker">
      <img src="joker.png" alt="joker">
      <img src="joker.png" alt="joker">
      <img src="joker.png" alt="joker">
      <img src="joker.png" alt="joker">
    </p>
  </div>
</template>

<script>
var Interval;
export default {
  name: "Timer",
  props: {
    time: Number,
  },
  data: function() {
    return {
      countDown: -2,
      warning: true,
    }
  },
  mounted: function() {
  },
  methods: {
    timeleft: function(){
      this.countDown--;
      if(this.countDown == 0) {
        this.warning = true
        clearInterval(Interval);
      }

    },
    restartTimer: function() {
      this.countDown = this.time;
      this.warning = false;
      clearInterval(Interval);
      Interval = setInterval(() => {
        this.timeleft()
      }, 1000);
    }
  },
}
</script>

<style scoped>
@import '/fonts/stylesheet.css';

.timer {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;

}
  .timeleft {
    font-size: 5rem;
    margin: 40px;
    font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
  }

  .timeout {
    margin: 40px;
    font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
  }

  .timeout img {
    height: 3rem;
  }


  .timerBtn {
    appearance: none;
    border: 1px solid #2c3e50;
    border-radius: 3px;
    font-size: 3rem;
    background: none;
    padding: 2rem;
    font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
  }

  .timerBtn-inner {
    display: inline-block;
    height: 2rem;
    width: 2rem;
    background-color: #2c3e50;
  }

  .reverse {
    transform: scale(-1, -1);
  }
</style>