<template>
  <div class="dynamic-card-wrap h-100" :style="{backgroundColor: getCard().backgroundColor}">
    <div class="image-subtitle">
      <div class="data-wrap">
        <span v-if="value" :style="{color: activeThresholdColor, fontSize: getTitle().fontSize}">{{value.toFixed(2)}} {{getUnit().text}}</span>
        <span v-else :style="{fontSize: getTitle().fontSize}">No Data</span>
      </div>
    </div>
    <div class="image-wrap" v-if="getImageUrl()">
      <img :src="getImageUrl()" alt="">
    </div>
    <div class="description">
      <span :style="{fontSize: getDescription().fontSize, color: getDescription().fontColor}">{{getDescription().text}}</span>
    </div>
  </div>
</template>

<script>

export default {
  data () {
    return {
      value: '',
      activeThresholdColor: ''
    }
  },
  props: {
    widget: {
      type: Object,
      required: true
    }
  },
  methods: {
    getCard () {
      return this.widget.visual_properties.card || {}
    },
    getTitle () {
      return this.widget.visual_properties.title || {}
    },
    getSubtitle () {
      return this.widget.visual_properties.subtitle || {}
    },
    getDescription () {
      return this.widget.visual_properties.description || {}
    },
    getUnit () {
      return this.widget.visual_properties.unit
    },
    getImageUrl () {
      let imageUrl = (this.widget.visual_properties.image && this.widget.visual_properties.image.url) || (this.widget.visual_properties.icon && this.widget.visual_properties.icon.text)
      return imageUrl || ''
    },
    addDataPoint (seriesData) {
      let thresholds = this.widget.visual_properties.threshold
      this.value = seriesData['y']

      this.$_.forEach(thresholds || [], (threshold) => {
        if (this.value >= threshold.from && this.value <= threshold.to) {
          this.activeThresholdColor = threshold.color
        }
      })
    },
    resizeWidget () {
    }
  },
  mounted () {
    let seriesData = this.widget.series[0] && this.widget.series[0].data[0]
    if (seriesData) {
      this.addDataPoint(seriesData)
    }
  }
}
</script>

<style lang="scss" scoped>
  .dynamic-card-wrap {
    height: calc(100% - 28px);
    overflow: auto;
    .image-subtitle {
      margin-bottom: 10px;
      height: 75px;
      position: relative;
      > span {
        font-size: 14px;
        color: #74788d;
        height: 20px;
      }
      .data-wrap {
        color: #212529;
        height: 75px;
        display: flex;
        align-items: center;
        span {
          font-size: 21px;
        }
      }
      .icon-wrap {
        position: absolute;
        top: 0;
        right: 0;
        .icon {
          width: 75px;
          height: 75px;
          padding: 10px;
        }
      }
    }
    .image-wrap {
      margin-bottom: 20px;
      img {
        border-radius: 4px;
        width: 100%;
        height: auto;
      }
    }
  }
</style>
