<template>
  <div class="data-series">
    <div v-for="(serie, seriesIndex) in selectedNodes" :key="seriesIndex" class="settings-wrap">
      <div class="header setting-header">{{$_.join(serie.path, ' > ')}}</div>
      <div class="setting" v-for="(setting, index) in dataSettings[1].properties" :key="index">
        <div v-if="(setting.key !== 'multiple') && dataSeries[seriesIndex]">
          <span class="setting-key">{{setting.key}}</span>
          <b-form-input :type="dataTypeMap[setting.data_type]" class="setting-input" :class="setting.data_type" v-model="dataSeries[seriesIndex][setting.key]"></b-form-input>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
const dataTypeMap = {
  'string': 'text',
  'boolean': 'checkbox',
  'color': 'color'
}

export default {
  props: {
    selectedNodes: {
      type: Array,
      required: true
    },
    dataProp: {
      type: Object,
      required: true
    },
    dataSettings: {
      type: Array,
      required: true
    },
    seriesDataMapping: {
      type: Object,
      required: true
    }
  },
  data () {
    return {
      dataSeries: [],
      dataTypeMap: dataTypeMap
    }
  },
  methods: {
    setDataSeries () {
      let colors = ['#2980b9', '#2ecc71', '#f1c40f', '#2c3e50', '#7f8c8d']
      this.dataSeries = []

      this.$_.forEach(this.selectedNodes, (selectedData, index) => {
        let axes = []
        this.$_.forEach(this.dataProp.axes, (_, axis) => {
          if (axis !== 'multiple') {
            axes = this.$_.concat(axes, {
              'name': axis,
              'source_type': 'pds',
              'source_metadata': {
                'entity_type': 'sensor',
                'entity_id': selectedData.parentId,
                'parameter': (axis === 'x') ? 'inserted_timestamp' : selectedData.uuid,
                'path': selectedData.path
              }
            })
          }
        })

        let dataSerie = {
          axes: axes
        }

        this.$_.forEach(this.dataProp.series, (value, key) => {
          let mappingKey = selectedData.parentId + '.' + selectedData.uuid
          let serieNameMapping = this.seriesDataMapping[mappingKey]
          if (key !== 'multiple') {
            if (key === 'name') {
              dataSerie[key] = serieNameMapping ? serieNameMapping[key] : selectedData.name
            } else if (key === 'color') {
              dataSerie[key] = serieNameMapping ? serieNameMapping[key] : colors[index % 5]
            } else if (key === 'unit') {
              dataSerie[key] = serieNameMapping ? serieNameMapping[key] : ''
            } else {
              dataSerie[key] = value || ''
            }
          }
        })

        this.dataSeries = this.$_.concat(this.dataSeries, dataSerie)
      })
    },
    getDataSeries () {
      return this.dataSeries
    }
  },
  watch: {
    selectedNodes () {
      this.setDataSeries()
    }
  },
  mounted () {
    this.setDataSeries()
  }
}
</script>

<style lang="scss" scoped>
  .data-series {
      text-transform: capitalize;
      // height: 360px;
      // overflow-x: auto;
      border-bottom: none;
      display: flex;
      flex-direction: column;
      .settings-wrap {
        padding: 10px 10px 0px;
      }
      .header {
        padding: 5px 10px;
        .icon {
          display: none;
        }
        span {
          color: #000000;
          font-weight: bold;
        }
      }
      .setting-header {
        background-color: #e2e2e2;
        border-radius: 4px;
        cursor: pointer;
        min-height: 30px;
        display: flex;
        align-items: center;
        font-size: 14px;
        .icon {
          display: inline-block;
          width: 12px;
          height: 12px;
        }
        span {
          padding-left: 8px;
          font-size: 15px;
        }
      }
      .setting {
        font-size: 15px;
        padding: 5px 0;
        .setting-key {
          display: inline-block;
          width: 175px;
          color: #000000;
          padding-left: 15px;
        }
        .setting-input {
          display: inline-block;
          width: calc(100% - 185px);
          font-size: 15px;
          background: #F5FBFF;
          &.color {
            width: 35px;
            padding: 2px 3px !important;
            cursor: pointer;
          }
        }
        .setting-thumbnail-preview {
          display: flex;
          justify-content: flex-end;
          padding: 10px 10px 0 0;
          width: calc(100% - 185px);
          margin-left: 185px;
          img {
            width: 100%;
            height: auto;
          }
        }
      }
    }
</style>
