<template>
  <div id="app">
      <div class='card'>
          <!-- Show the count -->
          <h1 :style="{ color: numberColor }">{{ count }}</h1>
    </div>
      <!-- If the count is done, show message and reset button -->
      <div v-if="count === 0">
          <h3>{{ message }}</h3>
          
          <!-- Button has an @click listener to restart the countdown -->
          <button @click="startCountdown">Restart the Clock</button>
    </div>
      <div v-else>
          <h3>Counting...</h3>
    </div>
  </div>
</template>

<script>
export default {
    props: {
        start: {
            type: Number,
            default: 10,
            required: false
        }
    },
  data() {
    return {
      count: 10,
        message: "And we're done!",
        timer: null // Tracks the setInterval timer
    };
  },
    computed: {
      numberColor(){
          if(this.count < (this.start * 0.33)){
              return "var(--color-danger)"
          }
          else if (this.count < (this.start * 0.66)){
              return "var(--color-warning)"
          }
          else {
              return "var(--color-success)"
          }
      }  
    },
  mounted(){
        // When the Vue component mounts, start the countdown
        this.startCountdown()
    },
  methods: {
      
      // Handler within setInterval
    countDown(){
         if(this.count === 0){
             clearInterval(this.timer)
         }
         else {
             this.count--
         }
    },
     startCountdown(){
         this.count = this.start // 
         this.timer = setInterval(this.countDown, 500)
     }
  }
};
</script>

<!-- Use preprocessors via the lang attribute! e.g. <style lang="scss"> -->
<style lang="scss">
        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;900&display=swap');
    :root {
        --color-text: #2c3e50;
        --color-primary: #0496ff;
        
        --color-success: #2a9d8f;
        --color-warning: #e9c46a;
        --color-danger: #e76f51;
        --body-background: #f9f9f9;
    }
    
#app {
    background: var(--body-background);
    font-family: 'Poppins', Avenir, Helvetica, Arial, sans-serif;
    text-align: center;
    color: var(--color-text);
    padding-top: 60px;
    height: 100vh;
    width: 100vw;
}

    h1 {
        font-size: 4rem;
    }
    
    h3 {
        letter-spacing: 1px;
        text-transform: uppercase;
    }
    
    .card {
        box-shadow: rgba(17, 17, 26, 0.05) 0px 4px 16px, rgba(17, 17, 26, 0.05) 0px 8px 32px;
        border-radius: 25px;
        display: inline-flex;
        margin: 0 auto 45px;
        padding: 60px 60px;
        height: 300px;
        width: 300px;
        align-items: center;
        justify-content: center;
    }

button {
    color: var(--color-primary);
    background: none;
    border: solid 1px;
    border-radius: 2em;
    font: inherit;
    padding: 0.75em 2em;
    
    &:hover,
    &:focus {
        background: var(--color-primary);
        color: #fff;
        cursor: pointer;
    }
}
</style>