<template>
  <div class="new-settings-wrap">
    <div class="setting-wrap title-wrap">
      <div class="header" @click="openSetting('widget_title')">
        <div class="text-section">
          <span>Widget Title</span>
        </div>
        <div class="icon-section">
          <svg class="icon">
            <use xlink:href="/assets/img/mads-common-icons.svg#arrow-down"></use>
          </svg>
        </div>
      </div>
      <div class="content" v-if="openedSetting === 'widget_title'">
        <b-form-input v-model="settings.title.text" type="text" placeholder="Title"></b-form-input>
        <svg class="icon text-format" id="formatter-popover">
          <use xlink:href="/assets/img/mads-common-icons.svg#text-format"></use>
        </svg>
        <b-popover
          target="formatter-popover"
          placement="bottom"
          triggers="hover focus"
        >
          <text-formatter
          :defaultSettings="settings.title.text_settings"
          @formatter-updated="titleTextFormatter"
          ></text-formatter>
        </b-popover>
      </div>
    </div>
    <div class="setting-wrap background-position-wrap">
      <div class="header" @click="openSetting('background_and_position')">
        <div class="text-section">
          <span>Background</span>
        </div>
        <div class="icon-section">
          <svg class="icon">
            <use xlink:href="/assets/img/mads-common-icons.svg#arrow-down"></use>
          </svg>
        </div>
      </div>
      <div class="content" v-if="openedSetting === 'background_and_position'">
        <div class="background-color-wrap">
          <span>Widget Background Color</span>
          <b-form-input v-model="settings.background_and_position.background" type="color" class="color"></b-form-input>
        </div>
      </div>
    </div>
    <!-- <div class="data-point-wrap">
      <div>Data Point</div>
      <div>
        <span>Data Point 1</span>
      </div>
    </div> -->
    <div class="setting-wrap">
      <div class="header" @click="openSetting('data_value')">
        <div class="text-section">
          <span>Data Value</span>
        </div>
        <div class="icon-section">
          <svg class="icon">
            <use xlink:href="/assets/img/mads-common-icons.svg#arrow-down"></use>
          </svg>
        </div>
      </div>
      <div class="content" v-if="openedSetting === 'data_value'">
        <div class="unit-wrap">
          <div class="range-text-indicator">
            <b-form-input v-model="settings.data_value.unit" type="text" placeholder="Unit"></b-form-input>
          </div>
        </div>
      </div>
    </div>
    <div class="setting-wrap horizontal-lines-wrap">
      <div class="header" @click="openSetting('range')">
        <div class="text-section">
          <span>Range</span>
        </div>
        <div class="icon-section">
          <svg class="icon">
            <use xlink:href="/assets/img/mads-common-icons.svg#arrow-down"></use>
          </svg>
        </div>
      </div>
      <div class="content" v-if="openedSetting === 'range'">
        <div class="min-max-wrap">
          <b-form-input v-model="settings.min" placeholder="Min" type="number" class="value"></b-form-input>
          <b-form-input v-model="settings.max" placeholder="Max" type="number" class="value"></b-form-input>
        </div>
        <div v-for="(rangeItem, index) in settings.range" :key="index" class="range-wrap">
          <div class="range">
            <b-form-input v-model="rangeItem.from" placeholder="From" type="number" class="value"></b-form-input>
            <b-form-input v-model="rangeItem.to" placeholder="To" type="number" class="value"></b-form-input>
            <b-form-input v-model="rangeItem.color" type="color" class="color"></b-form-input>
            <svg class="icon mr-1" :id="`popover-${index}`">
              <use xlink:href="/assets/img/mads-common-icons.svg#text-format"></use>
            </svg>
            <svg class="icon" @click="deleteRange(index)">
              <use xlink:href="/assets/img/mads-common-icons.svg#dustbin"></use>
            </svg>
            <b-popover
              :target="`popover-${index}`"
              placement="bottom"
              title="Text Format"
              triggers="hover focus"
            >
              <text-formatter
                :index="index"
                :defaultSettings="rangeItem.text_settings"
                @formatter-updated="rangeTextFormatter"
              ></text-formatter>
            </b-popover>
          </div>
          <div class="range-text-indicator">
            <b-form-input v-model="rangeItem.rangeText" type="text" placeholder="Range Text"></b-form-input>
          </div>
        </div>
        <div>
          <b-button @click="addNewRange()">Add New Range</b-button>
        </div>
      </div>
    </div>
    <div class="setting-wrap">
      <div class="header" @click="openSetting('out_of_range')">
        <div class="text-section">
          <span>Out of Range</span>
        </div>
        <div class="icon-section">
          <svg class="icon">
            <use xlink:href="/assets/img/mads-common-icons.svg#arrow-down"></use>
          </svg>
        </div>
      </div>
      <div class="content" v-if="openedSetting === 'out_of_range'">
        <div>
          <span>
            If the value is received lower than MIN and higher than MAX. Please add the range text
          </span>
        </div>
        <div class="out-of-range-wrap">
          <svg class="icon text-format" id="out-of-range-popover">
          <use xlink:href="/assets/img/mads-common-icons.svg#text-format"></use>
        </svg>
        <b-popover
          target="out-of-range-popover"
          placement="bottom"
          triggers="hover focus"
        >
          <text-formatter
          :defaultSettings="settings.out_of_range.text_settings"
          @formatter-updated="outOfRangeTextFormatter"
          ></text-formatter>
        </b-popover>
          <div class="range-text-indicator">
            <b-form-input v-model="settings.out_of_range.text" type="text" placeholder="Text"></b-form-input>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import TextFormatter from './common/textFormatter.vue'
export default {
  components: { TextFormatter },
  data () {
    return {
      openedSetting: 'widget_title',
      settings: {
        title: {
          text: '',
          text_settings: {
            'align': 'left',
            'decorations': {
              'isBold': false,
              'isItalic': false,
              'isUnderline': false
            },
            'fontColor': '#495057',
            'fontSize': '14px'
          }
        },
        background_and_position: {
          background: '#ffffff'
        },
        data_point: [],
        min: null,
        max: null,
        data_value: {
          show_data_value: true,
          unit: ''
        },
        range: [],
        out_of_range: {
          text: '',
          text_settings: {
            'align': 'left',
            'decorations': {
              'isBold': false,
              'isItalic': false,
              'isUnderline': false
            },
            'fontColor': '#495057',
            'fontSize': '14px'
          }
        }
      },
      seriesData: []
    }
  },
  props: {
    visualProp: {
      type: Object,
      required: true
    },
    selectedNodes: {
      type: Array,
      required: true
    },
    instanceSeriesData: {
      type: Array,
      required: true
    },
    seriesDataMapping: {
      type: Object,
      required: true
    }
  },
  methods: {
    createSeriesData () {
      let seriesData = []
      let colors = ['#2980b9', '#2ecc71', '#f1c40f', '#2c3e50', '#7f8c8d']

      this.$_.forEach(this.selectedNodes, (node, index) => {
        let mappingKey = node.parentId + '.' + node.uuid
        let serieNameMapping = this.seriesDataMapping[mappingKey]

        let axes = [
          {
            'name': 'y',
            'source_type': 'pds',
            'source_metadata': {
              'entity_type': 'sensor',
              'entity_id': node.parentId,
              'parameter': node.uuid,
              'path': node.path
            }
          }
        ]
        seriesData.push({
          axes: axes,
          color: serieNameMapping ? serieNameMapping['color'] : colors[index % 5],
          name: serieNameMapping ? serieNameMapping['name'] : node.name,
          unit: serieNameMapping ? serieNameMapping['unit'] : ''
        })
      })

      this.seriesData = this.$_.concat([], seriesData)
    },
    addNewRange () {
      let range = this.$_.concat([], this.settings.range, {
        from: null,
        to: null,
        color: '#41C967',
        rangeText: '',
        text_settings: {}
      })

      this.settings = this.$_.merge({}, this.settings, {
        range: range
      })
    },
    getSettings () {
      return this.settings
    },
    getSeriesData () {
      return this.seriesData
    },
    openSetting (setting) {
      this.openedSetting = setting
    },
    isValidate () {
      this.$emit('isValidate', true)
    },
    deleteRange (index) {
      this.settings.range.splice(index, 1)
    },
    titleTextFormatter (data) {
      Object.assign(this.settings.title.text_settings, data)
    },
    outOfRangeTextFormatter (data) {
      Object.assign(this.settings.out_of_range.text_settings, data)
    },
    rangeTextFormatter (data, index) {
      Object.assign(this.settings.range[index].text_settings, data)
    }
  },
  watch: {
    selectedNodes () {
      this.createSeriesData()
    },
    visualProp () {
      if (!this.$_.isEmpty(this.visualProp)) {
        this.settings = this.$_.merge({}, this.visualProp)
      }
    },
    settings: {
      handler () {
        this.isValidate()
      },
      deep: true
    }
  },
  mounted () {
    this.seriesData = this.$_.map(this.instanceSeriesData || [], (series) => {
      let axes = this.$_.map(series.axes || [], (axis) => {
        return {
          name: axis.name,
          source_metadata: axis.source_details,
          source_type: axis.source_type
        }
      })

      return {
        axes: axes,
        color: series.color,
        name: series.name,
        unit: series.unit
      }
    })
  }
}
</script>

<style lang="scss" scoped>
  .new-settings-wrap {
    margin-right: 10px;
  }
  .setting-wrap {
    margin-top: 10px;
    margin-bottom: 15px;
    .min-max-wrap {
      margin-bottom: 10px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .value {
        width: 48% !important;
        height: 40px !important;
      }
    }
    .range-wrap {
      margin-bottom: 15px;
      border-bottom: 1px solid rgba(212, 217, 219, 0.5);
      background: #F8F9FA;
      padding: 10px;
      border-radius: 5px;
      .range {
        display: flex;
        margin-bottom: 10px;
        align-items: center;
        justify-content: space-between;
        .value, .line-type {
          width: 35% !important;
          height: 40px !important;
        }
      }
    }
  }
  .header {
    border-bottom: 1px solid rgba(212, 217, 219, 0.5);
    padding-bottom: 4px;
    display: flex;
    align-items: center;
    .text-section {
      width: calc(100% - 20px);
      span {
        font-weight: bold;
        font-size: 15px;
        color: #000000;
        cursor: pointer;
      }
    }
    .icon-section {
      width: 20px;
      cursor: pointer;
      .icon {
        width: 12px;
        height: 11px;
        fill: #727272;
      }
    }
  }
  .content {
    position: relative;
    color: #495057;
    padding-top: 10px;
    padding-right: 20px;
    .icon {
      width: 20px;
      height: 20px;
      cursor: pointer;
    }
    .text-format {
      position: absolute;
      top: -24px;
      right: 30px;
      cursor: icon;
    }
    .background-color-wrap {
      display: flex;
      align-items: center;
    }
  }
  input[type="color"] {
    border: none;
    &[type=text] {
      width: 90px;
      height: 38px;
    }
    &[type=color] {
      width: 35px;
      height: 35px;
      cursor: pointer;
    }
  }
</style>
