<template>
  <canvas id="timer"></canvas>
</template>

<script>
export default {
  name: 'Timer',
  props: {
    backgroundColor: {
      type: String,
      default: "#ccc"
    },
    fillColor: {
      type: String,
      default: "#707070"
    },
    fontSize: {
      type: String,
      default: "35px"
    },
    scale: {
      type: Number,
      default: 1
    },
    maxTime: Number,
    currentTime: Number
  },
  data () {
    return {
      canvas: null,
      context: null
    }
  },
  methods: {
    createTimer () {
      let size = 50 * this.scale
      let devicePixelRatio = window.devicePixelRatio
      this.canvas = document.getElementById('timer')
      this.context = this.canvas.getContext('2d')
      this.canvas.style.width = size + 'px'
      this.canvas.style.height = size + 'px'
      this.canvas.width = size * devicePixelRatio
      this.canvas.height = size * devicePixelRatio
      this.updateTimer()
      // setInterval(this.updateTimer, 100)
    },
    updateTimer () {
      let circleCalc = Math.PI * 2 - (this.currentTime * ((Math.PI * 2)/this.maxTime))

      this.context.clearRect(0, 0, this.canvas.width, this.canvas.height)
      if (this.currentTime == this.maxTime) {
        this.context.beginPath()
        this.context.arc(this.canvas.width/2, this.canvas.height/2, this.canvas.height/2, 0, Math.PI * 2)
        this.context.closePath()
        this.context.fillStyle = this.backgroundColor
        this.context.fill()
      }
      if (this.currentTime != 0) {
        this.context.beginPath()
        this.context.moveTo(this.canvas.width/2, this.canvas.height/2)
        this.context.arc(this.canvas.width/2, this.canvas.height/2, this.canvas.height/2, 0, circleCalc, true)
        this.context.lineTo(this.canvas.width/2, this.canvas.height/2)
        this.context.closePath()
        this.context.fillStyle = this.backgroundColor
        this.context.fill()
      }
      this.context.beginPath()
      this.context.moveTo(this.canvas.width/2, this.canvas.height/2)
      this.context.arc(this.canvas.width/2, this.canvas.height/2, this.canvas.height/2, 0, circleCalc)
      this.context.lineTo(this.canvas.width/2, this.canvas.height/2)
      this.context.closePath()
      this.context.fillStyle = this.fillColor
      this.context.fill()

      this.context.fillStyle = 'black'
      this.context.font = 'bold ' + this.fontSize + ' Arial'
      this.context.textAlign = 'center'
      this.context.textBaseline = 'middle'
      this.context.fillText(this.currentTime, this.canvas.width/2, this.canvas.height/2)
    }
  },
  watch: {
    currentTime: function () {
      this.updateTimer()
      if (this.currentTime == 0) {
        this.$emit('ended')
      }
    }
  },
  mounted () {
    this.createTimer()
    this.$emit('started')
  }
}
</script>

<style lang="scss" scoped>
</style>