<template>
  <component v-bind:is="mappings[category[1]]"
  ref="dynamicComponent"
  :visualProp="visualProp"
  :selectedNodes="selectedNodes"
  :instanceSeriesData="seriesData"
  :seriesDataMapping="seriesDataMapping"
  @isValidate="isValidate">
  </component>
</template>

<script>
import MultiLineWidget from './multiLineWidget.vue'
import AverageCardWidget from './averageCardWidget.vue'
import AverageComparisionCardWidget from './averageComparisionCardWidget.vue'
import StatusIndicatorWidget from './statusIndicatorWidget.vue'
import StaticLocationWidget from './staticLocationWidget.vue'
import MultiDataPointWidget from './multiDataPointWidget.vue'

const mappings = {
  multi_line: 'MultiLineWidget',
  average_card: 'AverageCardWidget',
  average_comparison_card: 'AverageComparisionCardWidget',
  status_indicator_card: 'StatusIndicatorWidget',
  static_location: 'StaticLocationWidget',
  multi_data: 'MultiDataPointWidget'
}

export default {
  components: {
    MultiLineWidget,
    AverageCardWidget,
    AverageComparisionCardWidget,
    StatusIndicatorWidget,
    StaticLocationWidget,
    MultiDataPointWidget
  },
  data () {
    return {
      mappings: mappings
    }
  },
  props: {
    category: {
      type: Array,
      required: true
    },
    visualProp: {
      type: Object,
      required: true
    },
    selectedNodes: {
      type: Array,
      required: true
    },
    seriesData: {
      type: Array,
      required: true
    },
    seriesDataMapping: {
      type: Object,
      required: true
    }
  },
  methods: {
    getSettings () {
      return this.$refs.dynamicComponent.getSettings()
    },
    getSeriesData () {
      return this.$refs.dynamicComponent.getSeriesData()
    },
    isValidate (isValidate) {
      this.$emit('isValidate', isValidate)
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
