<template>
  <div class="status-indicator-widget-wrap h-100" :id="'card' + widgetId">
    <div class="shapes-wrap h-100" v-if="condition" id="shapes-wrap">
      <div id="circle" v-if="shapeType === 'circle'" :style="circleStyles"></div>
      <div id="square" v-if="shapeType === 'square'" :style="squareStyles"></div>
      <div id="triangle" v-if="shapeType === 'triangle'" :style="triangleStyles"></div>
      <div id="pentagon" v-if="shapeType === 'pentagon'"></div>
      <div id="hexagon" v-if="shapeType === 'hexagon'"></div>
      <div class="condition-text-wrap">
        <div class="text">{{condition.conditionText}}</div>
        <div class="data-wrap" v-if="visualProperties.data_type === 'float' || visualProperties.data_type === 'number'">
          <div class="data">{{Number(value).toFixed(2)}}</div>
          <div class="unit">{{visualProperties.data_value.unit}}</div>
        </div>
      </div>
    </div>
    <div class="shapes-wrap h-100" v-else id="shapes-wrap">
      <div class="condition-text-wrap">
        <div class="text">No Condition Matched</div>
        <div class="data-wrap" v-if="visualProperties.data_type === 'float' || visualProperties.data_type === 'number'">
          <span class="data">{{Number(value).toFixed(2)}}</span>
          <span class="unit">{{visualProperties.data_value.unit}}</span>
        </div>
        <div v-else>
          <span class="data">{{value}}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import $ from 'jquery'

export default {
  data () {
    return {
      value: 0,
      condition: null,
      width: 200
    }
  },
  props: {
    visualProperties: {
      type: Object,
      required: true
    },
    series: {
      type: Array,
      required: true
    },
    widgetId: {
      type: String,
      required: true
    }
  },
  methods: {
    addDataPoint (point) {
      if (point['y']) {
        this.setCondition(point)
      }
    },
    setCondition (data) {
      this.value = data['y']
      switch (this.visualProperties.data_type) {
        case 'float':
        case 'integer':
          this.condition = this.getConditionByNumericData(data)
          break
        case 'string':
          this.condition = this.getConditionByStringData(data)
          break
        case 'boolean':
          this.condition = this.getConditionByBooleanData(data)
          break
      }
    },
    getConditionByNumericData (data) {
      let selectedCondition = null
      this.$_.forEach(this.visualProperties.conditions, (condition) => {
        if (!selectedCondition && data['y'] >= condition.from && data['y'] < condition.to) {
          selectedCondition = condition
        }
      })
      return selectedCondition
    },
    getConditionByStringData (data) {
      let selectedCondition = null
      this.$_.forEach(this.visualProperties.conditions, (condition) => {
        if (!selectedCondition && data['y'] === condition.case) {
          selectedCondition = condition
        }
      })
      return selectedCondition
    },
    getConditionByBooleanData (data) {
      let selectedCondition = null

      if (data['y']) {
        selectedCondition = this.visualProperties.conditions[0] // in case of boolean first is always true condition
      } else {
        selectedCondition = this.visualProperties.conditions[1] // in case of boolean second is always false condition
      }
      return selectedCondition
    },
    setShapesWidth () {
      let id = '#card' + this.widgetId
      let width = $(id + ' #shapes-wrap').width()
      let height = $(id + ' #shapes-wrap').height()

      this.width = Math.min(width, height) - 20
    },
    resizeWidget () {
      this.setShapesWidth()
    }
  },
  computed: {
    shapeType () {
      return this.condition.shapeType
    },
    triangleStyles () {
      let styles = {
        width: 0,
        height: 0,
        'border-left': (this.width / 2) + 'px solid transparent',
        'border-right': (this.width / 2) + 'px solid transparent',
        'border-bottom': (this.width) + 'px solid' + this.condition.shapeColor
      }

      return styles
    },
    circleStyles () {
      let styles = {
        width: this.width + 'px',
        height: this.width + 'px',
        'border-radius': '50%',
        'background-color': this.condition.shapeColor
      }

      return styles
    },
    squareStyles () {
      let styles = {
        width: this.width + 'px',
        height: this.width + 'px',
        'background-color': this.condition.shapeColor
      }

      return styles
    }
  },
  mounted () {
    let seriesData = this.series[0] && this.series[0].data[0]
    if (seriesData && seriesData['y']) {
      this.setCondition(seriesData)
    }

    setTimeout(() => {
      this.setShapesWidth()
    }, 500)
  },
  updated () {
    this.$nextTick(() => {
      this.setShapesWidth()
    })
  }
}
</script>

<style lang="scss" scoped>
  .status-indicator-widget-wrap {
    .shapes-wrap {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: scroll;
      .condition-text-wrap {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
        .text {
          color: #000;
          font-size: 18px;
        }
        .data-wrap {
          .data {
            color: #000;
            font-size: 24px;
            font-weight: bold;
          }
        }
      }
    }

    // #pentagon {
    //   position: relative;
    //   width: 54px;
    //   box-sizing: content-box;
    //   border-width: 50px 18px 0;
    //   border-style: solid;
    //   border-color: red transparent;
    // }
    // #pentagon:before {
    //   content: "";
    //   position: absolute;
    //   height: 0;
    //   width: 0;
    //   top: -85px;
    //   left: -18px;
    //   border-width: 0 45px 35px;
    //   border-style: solid;
    //   border-color: transparent transparent red;
    // }

    // #hexagon {
    //   width: 100px;
    //   height: 57.735px;
    //   background: red;
    //   position: relative;
    // }
    // #hexagon::before {
    //   content: "";
    //   position: absolute;
    //   top: -28.8675px;
    //   left: 0;
    //   width: 0;
    //   height: 0;
    //   border-left: 50px solid transparent;
    //   border-right: 50px solid transparent;
    //   border-bottom: 28.8675px solid red;
    // }
    // #hexagon::after {
    //   content: "";
    //   position: absolute;
    //   bottom: -28.8675px;
    //   left: 0;
    //   width: 0;
    //   height: 0;
    //   border-left: 50px solid transparent;
    //   border-right: 50px solid transparent;
    //   border-top: 28.8675px solid red;
    // }
  }
</style>
