Vue.config.keyCodes.e = 69

const clockBattery = {
  template: '#battery',
  data () {
    return {
      top: 70,
      bottom: 620,
      yHandlerMax: 31,

      halfDistance: null,
      middle: null
    }
  },
  props: ['running', 'progress'],
  created () {
    const top = this.top

    this.middle = (this.bottom - top) / 2 + top
    this.halfDistance = this.middle - top
  },
  computed: {
    fromTop () {
        const pathHeight = this.bottom - this.top

        return this.top + pathHeight * this.progress
      },
      curveCoeff () {
        const middle = this.middle

        return (this.fromTop - middle) / middle
      },
      innerPath () {
        const yHandler = this.yHandlerMax * this.curveCoeff

        return `M0 ${this.fromTop}` +
               `c62.5 ${yHandler} 187.5 ${yHandler} 250 0` +
               'V620' +
               'c-62.5 25-187.5 25-250 0'
      },
      innerColor () {
        const getColor = (from, to, point) => {
          const getChanell = (from, to) => ~~(from + (to - from) * topCoeff)

          const relativeFromTop = this.fromTop - point,
            topCoeff = relativeFromTop / this.halfDistance

          return Object.keys(from).map(ch => getChanell(from[ch], to[ch]))
        }

        // battery colors
        const good = { r: 0,   g: 128, b: 0 },
               mid = { r: 255, g: 165, b: 0 },
               low = { r: 255, g: 0,   b: 0 }

        const args = this.fromTop <= this.middle
          ? [good, mid, this.top]
          : [mid, low, this.middle]
        
        return `rgb(${getColor(...args)})`
      },
      sectionPath () {
        const curveCoeff = this.curveCoeff,
          yHandlerMax = this.yHandlerMax,
          bottomYHandler = curveCoeff * yHandlerMax,
          topYHandler = -curveCoeff * yHandlerMax

        return `M0 ${this.fromTop}` +
               `c62.5 ${topYHandler} 187.5 ${topYHandler} 250 0` +
               `-62.5 ${bottomYHandler}-187.5 ${bottomYHandler}-250 0`
      }
  }
}

const clockTime = {
  template: '#time',
  props: ['min', 'max', 'value', 'label', 'disabled'],
  methods: {
    increaseTime () {
        if (this.value < this.max) this.value++

        this.$emit('input', this.value)
      },
      decreaseTime () {
        if (this.value > this.min) this.value--

        this.$emit('input', this.value)
      },
      onChange (value) {
        value = Number(value)

        if (!value || value < this.min) value = this.min
        else if (value > this.max) value = this.max

        this.value = value
        this.$emit('input', value)
      }
  }
}

const playBtn = {
  template: '#play-btn',
  props: ['running', 'duration'],
  methods: {
    // Custom shape morphing
    onClick () {
      const triangle = '0 0 4 2 4 2 0 4', 
          rect = '0 0 4 0 4 4 0 4',
          polygon = this.$refs.polygon,
          backwards = this.running,
          duration = 200,
          d = {}, r = {}           // diff (f - s), result
      
      let lastTime = 0, 
        s = parsePoints(triangle), // start shape
        f = parsePoints(rect)      // final shape
      
      if (backwards) {
        const temp = s
        s = f
        f = temp
      }

      for (const point in s) 
        d[point] = f[point] - s[point]
      
      const animate = time => {
        if (!lastTime) lastTime = time

        const progress = time - lastTime
        
        for (const point in s)
          r[point] = s[point] + d[point] * (progress / duration)
        
        polygon.setAttribute(
          'points', 
          Object.keys(r).reduce((str, prop, i) => (
            str + (i ? ' ' : '') + r[prop]
          ), '')
        )

        if (progress < duration) 
          requestAnimationFrame(animate)
        else 
          polygon.setAttribute('points', (backwards ? triangle : rect))
      }

      requestAnimationFrame(animate)
      
      this.$emit('click')
    }
  }
}

new Vue({
  el: '#pomodoro',
  data: {
    sessionTime: 25,
    breakTime: 5,
    timer: 0,
    progress: 0,
    time: null,
    recess: false,
    isRunning: false
  },
  components: {
    clockBattery,
    clockTime,
    playBtn
  },
  methods: {
    run () {
        let time = this.sessionTime
        let deadline = addMinutes(new Date(), time)
        let initialMs = time * 60000

        const countdown = () => {
          let { minutes, seconds, remainingMs } = getTimeRemaining(deadline)
          
          if (!minutes && !seconds) {
            if (!this.recess) {
              this.recess = true
              time = this.breakTime
            } else {
              this.recess = false
              time = this.sessionTime
            }

            initialMs = time * 60000

            deadline = addMinutes(new Date(), time);

            ({ minutes, seconds, remainingMs } = getTimeRemaining(deadline))
          }
          
          this.progress = (this.recess 
                             ? remainingMs 
                             : initialMs - remainingMs) / initialMs
          
          if (minutes < 10) minutes = '0' + minutes
          if (seconds < 10) seconds = '0' + seconds

          this.time = `${minutes}:${seconds}`
          this.timer = setTimeout(countdown, 100)
        }

        this.isRunning = true

        countdown()
      },
      stop () {
        this.recess = this.isRunning = false
        this.progress = 0

        clearTimeout(this.timer)
      }
  }
})

const addMinutes = (date, minutes) =>
  new Date(date.getTime() + minutes * 60000)

function getTimeRemaining (deadline) {
  const t = Date.parse(deadline) - Date.now()
  const seconds = Math.floor(t / 1000 % 60)
  const minutes = Math.floor(t / 1000 / 60 % 60)
          
  return { minutes, seconds, remainingMs: t }
}

function parsePoints (str) {
  let x = 1, y = 1
        
  return str.split(' ').map(Number).reduce((o, p, i) => {
    const prop = ((i + 1) % 2 === 0) ? `y${y++}` : `x${x++}`
    o[prop] = p
    return o
  }, {})
}