<template>
  <div class="average-widget-wrap h-100" :id="'card' + widgetId">
    <div class="circular-dials-wrap" id="circular-dials-wrap" :style="{'height': circularDialsContainerHeight}">
      <div class="cicrle-wrap" v-if="radius > 0">
        <svg id="svg" :width="svgWidth" :height="svgWidth">
          <circle :r="radius" :cx="svgWidth/2" :cy="svgWidth/2" fill="transparent" :stroke-dasharray="circumference + ' ' + circumference" :stroke-width="stroke"></circle>
          <circle v-if="range1" id="bar1" :r="radius" :cx="svgWidth/2" :cy="svgWidth/2" fill="transparent" :stroke-dasharray="circumference + ' ' + circumference" :style="{ strokeDashoffset: strokeDashoffsetP1, stroke: (range1 ? range1.color : '#000') }" :stroke-width="stroke" stroke-linecap="round"></circle>
        </svg>
        <span class="parameter">
          <span class="parameter-name">{{series[0].name}}</span>
          <div class="data-wrap">
            <div class="data">{{Number(valueP1).toFixed(2)}}</div>
            <div class="unit" :style="getStyleSettings(visualProperties.data_value.text_settings)">{{visualProperties.data_value.unit}}</div>
          </div>
        </span>
      </div>
      <div class="cicrle-wrap" v-if="radius > 0">
        <svg id="svg" :width="svgWidth" :height="svgWidth">
          <circle :r="radius" :cx="svgWidth/2" :cy="svgWidth/2" fill="transparent" :stroke-dasharray="circumference + ' ' + circumference" :stroke-width="stroke"></circle>
          <circle v-if="range2" id="bar2" :r="radius" :cx="svgWidth/2" :cy="svgWidth/2" fill="transparent" :stroke-dasharray="circumference + ' ' + circumference" :style="{ strokeDashoffset: strokeDashoffsetP2, stroke: (range2 ? range2.color : '#000') }" :stroke-width="stroke" stroke-linecap="round"></circle>
        </svg>
        <span class="parameter">
          <span class="parameter-name">{{series[1].name}}</span>
          <div class="data-wrap">
            <div class="data">{{Number(valueP2).toFixed(2)}}</div>
            <div class="unit" :style="getStyleSettings(visualProperties.data_value.text_settings)">{{visualProperties.data_value.unit}}</div>
          </div>
        </span>
      </div>
    </div>
    <div class="sentence-wrap" id="sentence-wrap" :style="getStyleSettings(visualProperties.comparision_description.text_settings)">
      {{sentence}}
    </div>
  </div>
</template>

<script>
import $ from 'jquery'

export default {
  data () {
    return {
      valueP1: 0,
      valueP2: 0,
      radius: 0,
      stroke: 10,
      progressP1: 0,
      progressP2: 0,
      range1: null,
      range2: null,
      circularDialsContainerHeight: 0,
      svgWidth: 0
    }
  },
  props: {
    visualProperties: {
      type: Object,
      required: true
    },
    series: {
      type: Array,
      required: true
    },
    widgetId: {
      type: String,
      required: true
    }
  },
  methods: {
    addDataPoint (point, index) {
      if (point['y']) {
        this.setProgress(point, `P${index + 1}`)
        this.getRangeStatusByData(point, `P${index + 1}`)
      }
    },
    setProgress (data, parameter) {
      let range = this.visualProperties.range[parameter]

      let lastIndex = this.$_.size(range) - 1

      let min = range[0].from
      let max = range[lastIndex].to

      if (max && min) {
        if (parameter === 'P1') {
          this.progressP1 = (data['y'] / (max - min)) * 100
          this.valueP1 = data['y']
        } else {
          this.progressP2 = (data['y'] / (max - min)) * 100
          this.valueP2 = data['y']
        }
      }
    },
    getRangeStatusByData (data, parameter) {
      let paramterRange = this.visualProperties.range[parameter]

      let selectedRange = null
      this.$_.forEach(paramterRange, (range) => {
        if (!selectedRange && data['y'] >= range.from && data['y'] < range.to) {
          selectedRange = range
        }
      })
      if (selectedRange) {
        if (parameter === 'P1') {
          this.range1 = this.$_.merge({}, selectedRange)
        } else {
          this.range2 = this.$_.merge({}, selectedRange)
        }
      } else {
        if (parameter === 'P1') {
          this.range1 = null
        } else {
          this.range2 = null
        }
      }
    },
    getCircleDiameter () {
      let id = '#card' + this.widgetId
      let width = $(id + ' #circular-dials-wrap').width()
      let height = $(id + ' #circular-dials-wrap').height()

      let diameter = Math.min(width / 2, height)
      this.svgWidth = diameter
      this.radius = (diameter / 2) - (this.stroke * 2)
    },
    setCircleWrapHeight () {
      let id = '#card' + this.widgetId
      let height = $(id + ' #sentence-wrap').height() + 20
      this.circularDialsContainerHeight = `calc(100% - ${height}px)`
    },
    resizeWidget () {
      this.setCircleWrapHeight()
      this.getCircleDiameter()
    },
    getStyleSettings (style) {
      return {
        color: style.fontColor,
        fontSize: style.fontSize,
        textAlign: style.align,
        fontWeight: style.decorations.isBold ? 'bold' : '',
        fontStyle: style.decorations.isItalic ? 'italic' : '',
        textDecoration: style.decorations.isUnderline ? 'underline' : ''
      }
    }
  },
  computed: {
    circumference () {
      return this.radius * 2 * Math.PI
    },
    strokeDashoffsetP1 () {
      return this.circumference - this.progressP1 / 100 * this.circumference
    },
    strokeDashoffsetP2 () {
      return this.circumference - this.progressP2 / 100 * this.circumference
    },
    sentence () {
      let dynValString = this.visualProperties.comparision_description.value_type
      let sentence = this.visualProperties.comparision_description.sentence
      // eslint-disable-next-line no-unused-vars
      const P1 = this.valueP1
      // eslint-disable-next-line no-unused-vars
      const P2 = this.valueP2

      // eslint-disable-next-line no-eval
      let dynVal = eval(dynValString)

      return this.$_.replace(sentence, '{dynval}', dynVal.toFixed(2))
    }
  },
  mounted () {
    let seriesData1 = this.series[0] && this.series[0].data[0]
    let seriesData2 = this.series[1] && this.series[1].data[0]
    if (seriesData1 && seriesData1['y']) {
      this.setProgress(seriesData1, 'P1')
      this.getRangeStatusByData(seriesData1, 'P1')
    }
    if (seriesData2 && seriesData2['y']) {
      this.setProgress(seriesData2, 'P2')
      this.getRangeStatusByData(seriesData1, 'P2')
    }

    this.setCircleWrapHeight()
    this.getCircleDiameter()
  },
  updated () {
    this.$nextTick(() => {
      this.setCircleWrapHeight()
      this.getCircleDiameter()
    })
  }
}
</script>

<style lang="scss" scoped>
  .average-widget-wrap {
    text-align: center;
    .circular-dials-wrap {
      display: flex;
      align-items: center;
      justify-content: space-around;
      .cicrle-wrap {
        position: relative;
        #svg {
          transform: rotate(-90deg);
        }
        #svg circle {
          stroke-dashoffset: 0;
          stroke: #EEF2FF;
          transition: stroke-dashoffset 1s linear;
          // transform: rotate(-90deg);
          // transform-origin: 50% 50%;
        }
        #svg #bar1 {
          stroke: #2C5AFF;
        }
        #svg #bar2 {
          stroke: #D070FD;
        }
        .parameter {
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
          .parameter-name {
            color: #000;
            font-size: 18px;
          }
        }
        .data-wrap {
          .data {
            color: #000;
            font-size: 24px;
            font-weight: bold;
          }
        }
      }
    }
    .sentence-wrap {
      color: #798792;
      font-size: 15px;
      padding: 10px 0;
    }
  }
</style>
