<template>
  <div class="c-progress"
       :class="`c-progress__fill--${fillStatus} c-progress__remaining--${remainingStatus}`">

    <div v-if="type === 'bar'">
      <progress
        class="c-progress__bar"
        :max="maxValue"
        :value="value"
      >
      </progress>
      <span class="c-progress-bar__message">
        <slot name="message">{{percentFilled}}</slot>
      </span>
    </div>

    <div
      class="c-progress-circle__wrapper"
      v-else-if="type === 'circle'">
      <svg
        viewBox="0 0 100 100"
        preserveAspectRatio="xMidYMid meet"
      >
        <circle
          class="c-progress__circle c-progress__circle--background"
          :stroke-dasharray="circumference + ' ' + circumference"
          :style="{ strokeDashoffset: remainingStrokeDashoffset }"
          :stroke-width="stroke"
          fill="transparent"
          :r="normalizedRadius"
          :cx="radius"
          :cy="radius"
        />
        <circle
          v-if="value > 0 || (maxValue === 0 && value === 0)"
          class="c-progress__circle c-progress__circle--active"
          :stroke-dasharray="circumference + ' ' + circumference"
          :style="{ strokeDashoffset: strokeDashOffset }"
          :stroke-width="stroke"
          fill="transparent"
          :r="normalizedRadius"
          :cx="radius"
          :cy="radius"
        />
      </svg>
      <span class="c-progress-circle__message u-text--center">
        <slot name="message">{{percentFilled}}</slot>
      </span>
    </div>
  </div>
</template>

<script>

export default {
  name: 'ElProgress',
  props: {
    type: {
      type: String,
      default: 'bar',
      validator: type => ['bar', 'circle'].includes(type)
    },
    fillStatus: {
      type: String,
      default: 'default',
      validator: status => ['default', 'success', 'warning', 'danger'].includes(status)
    },
    remainingStatus: {
      type: String,
      default: 'default',
      validator: status => ['default', 'success', 'warning', 'danger'].includes(status)
    },
    value: {type: Number, default: 0},
    maxValue: {type: Number, default: 100},
    stroke: {type: Number, default: 6}
  },
  data() {
    return {
      radius: 50
    };
  },
  computed: {
    normalizedRadius() {
      return this.radius - (this.stroke * 2);
    },
    circumference() {
      return this.normalizedRadius * 2 * Math.PI;
    },
    strokeDashOffset() {
      return this.circumference - ((this.value / this.maxValue) * this.circumference) + 1;
    },
    remainingStrokeDashoffset() {
      return this.circumference + (((this.maxValue - this.value) / this.maxValue) * this.circumference);
    },
    percentFilled() {
      const percent = parseInt((this.value / this.maxValue) * 100, 10);
      return `${percent}%`;
    }
  }
};
</script>
