Vue.component('progress-arc', {
  template: `
		<div class="progress-arc">
			<slot></slot>
			<svg viewBox="0 0 100 100" width="100%">
				<mask id="ring-mask">
					<rect fill="white" width="100%" height="100%" />
					<circle class="progress-arc--value--mask" r="12" cx="83.25%" cy="16.75%" />
				</mask>
				<g mask="url(#ring-mask)">
					<path v-once class="progress-arc--ring" :d="ringArc" />
					<path v-if="hasValidValue" class="progress-arc--ring progress-arc--ring--current" :d="arc" />
				</g>
				<circle class="progress-arc--value--bg" r="9" cx="83.25%" cy="16.75%" />
				<text class="progress-arc--value" x="83.5%" y="16.5%">{{ currentValue }}</text>
			</svg>
		</div>
  `,
  props: [
    'value',
    'max',
  ],
  data () {
    return {
      currentValue: 0,
    }
  },
  created () {
    this.precision = 2
    this.maxArc = 335
    this.duration = 350
  },
  mounted () {
    this.currentValue = this.value
  },
  watch: {
    value (newValue) {
      if(newValue === null || newValue === undefined) {
        this.currentValue = 0 //newValue
      } else {
        this.animateValue('currentValue', newValue, this.duration)
      }
    },
  },
  computed: {
    maxValue () {
      return this.max
    },
    pulse () {
      return this.setPulse(this.currentValue)
    },
    ringArc () {
      return this.setArc(this.maxArc)
    },
    arc () {
      return this.setArc(this.pulse)
    },
    hasValidValue () {
      return (this.currentValue !== null && this.currentValue !== undefined)
    },
  },
  methods: {
    setPulse (value) {
      return parseFloat(value / this.maxValue * this.maxArc).toFixed(this.precision)
    },
    setArc (value) {
      return this.describeVectorArc(50, 50, 47, 0, value)
    },
    polarToCartesian (centerX, centerY, radius, angleInDegrees) {
      let angleInRadians = (angleInDegrees) * Math.PI / 180.0

      return {
        x: (centerX + (radius * Math.cos(angleInRadians))).toFixed(this.precision),
        y: (centerY + (radius * Math.sin(angleInRadians))).toFixed(this.precision)
      }
    },
    describeVectorArc (x, y, radius, startAngle, endAngle) {
      const start = this.polarToCartesian(x, y, radius, endAngle);
      const end = this.polarToCartesian(x, y, radius, startAngle);
      const largeArcFlag = endAngle - startAngle <= 180 ? 0 : 1;

      return [
        'M', start.x, start.y,
        'A', radius, radius, 0, largeArcFlag, 0, end.x, end.y
      ].join(' ')
    },
    animateValue (thing, end, duration) {
      let range = end - this[thing]

      // calc step time to show all intermediate values
      let stepTime = Math.abs(Math.floor(duration / range))

      // get current time and calculate desired end time
      let startTime = new Date().getTime()
      let endTime = startTime + duration
      let timer

      let run = () => {
        let now = new Date().getTime()
        let remaining = Math.max((endTime - now) / duration, 0)
        let step = Math.round(end - (remaining * range))
        this[thing] = step
        if(step === end) {
          clearInterval(timer)
        }
      }

      // never go below minTimer
      stepTime = Math.max(stepTime, 50)
      timer = setInterval(run, stepTime)
      run()
    },
  }
})


// host app implementation - talks to component
let vm = new Vue({
  el: 'main',

  data: {
    value: 29,
    maxValue: 100,
		info: 'Snackwave vinyl helvetica artisan, tote bag man-braid photo booth unicorn.',
  },
	
	computed: {
		heading() {
			return this.info.length > 0 ? this.info.split(' ')[0] : ''
		},
	},

	methods: {
    setValue(event) {
      this.value = parseInt(event.target.value)
    },
    setMaxValue(event) {
      this.maxValue = parseInt(event.target.value)
    },
  },
})