<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/Gradient</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 horizontal-lines-wrap">
      <div class="header" @click="openSetting('conditions')">
        <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 === 'conditions'">
        <div v-for="(condition, index) in settings.conditions" :key="index" class="range-wrap">
          <div class="range">
            <template v-if="settings.data_type === 'numerical' || settings.data_type === 'float'">
              <b-form-input v-model="condition.from" placeholder="From" type="number" class="value"></b-form-input>
              <b-form-input v-model="condition.to" placeholder="To" type="number" class="value"></b-form-input>
            </template>
            <template v-else>
              <b-form-input v-model="condition.case" placeholder="Case" type="text" class="value" :disabled="settings.data_type === 'boolean'"></b-form-input>
            </template>
            <svg class="icon" v-if="settings.data_type !== 'boolean'" @click="deleteRange(index)">
              <use xlink:href="/assets/img/mads-common-icons.svg#dustbin"></use>
            </svg>
          </div>
          <div class="range-text-indicator">
            <div class="d-flex justify-content-between">Label
              <svg class="icon" :id="`popover-${index}`">
                <use xlink:href="/assets/img/mads-common-icons.svg#text-format"></use>
              </svg>
              <b-popover
              :target="`popover-${index}`"
              placement="bottom"
              title="Text Format"
              triggers="hover focus"
            >
              <text-formatter
                :index="index"
                :defaultSettings="condition.text_settings"
                @formatter-updated="conditionTextFormatter"
              ></text-formatter>
            </b-popover>
            </div>
            <b-form-input v-model="condition.conditionText" type="text" placeholder="Condition Text"></b-form-input>
          </div>
          <div class="shapes-wrap">
            <span>Shape Type</span>
            <div class="shapes">
              <div class="shape" @click="selectConditionShape('circle', index)" :class="{selected: condition.shapeType === 'circle'}">
                <svg id="svg" width="50" height="50">
                  <circle cx="25" cy="25" r="20"/>
                </svg>
                <div class="selected-wrap">
                  <svg class="icon">
                    <use xlink:href="/assets/img/mads-common-icons.svg#tick-white"></use>
                  </svg>
                </div>
              </div>
              <div class="shape" @click="selectConditionShape('square', index)" :class="{selected: condition.shapeType === 'square'}">
                <svg id="svg" width="50" height="50">
                  <rect x="5" y="5" width="40" height="40" />
                </svg>
                <div class="selected-wrap">
                  <svg class="icon">
                    <use xlink:href="/assets/img/mads-common-icons.svg#tick-white"></use>
                  </svg>
                </div>
              </div>
              <div class="shape" @click="selectConditionShape('triangle', index)" :class="{selected: condition.shapeType === 'triangle'}">
                <svg height="50" width="50">
                  <polygon points="5,45 45,45 25,5" />
                </svg>
                <div class="selected-wrap">
                  <svg class="icon">
                    <use xlink:href="/assets/img/mads-common-icons.svg#tick-white"></use>
                  </svg>
                </div>
              </div>
              <!-- <div class="shape" @click="selectConditionShape('pentagon', index)" :class="{selected: condition.shapeType === 'pentagon'}">
                <svg height="50" width="50">
                  <polygon points="25,0 1,17 10,45 40,45 49,17 " />
                </svg>
                <div class="selected-wrap">
                  <svg class="icon">
                    <use xlink:href="/assets/img/mads-common-icons.svg#tick-white"></use>
                  </svg>
                </div>
              </div>
              <div class="shape" @click="selectConditionShape('hexagon', index)" :class="{selected: condition.shapeType === 'hexagon'}">
                <svg height="50" width="50">
                  <polygon points="38,3 12,3 0,25 13,47 37,47 50,25" />
                </svg>
                <div class="selected-wrap">
                  <svg class="icon">
                    <use xlink:href="/assets/img/mads-common-icons.svg#tick-white"></use>
                  </svg>
                </div>
              </div> -->
            </div>
          </div>
          <div class="shape-color-wrap">
            <span>Shape Color</span>
            <b-input type="color" v-model="condition.shapeColor"></b-input>
          </div>
        </div>
        <div v-if="settings.data_type !== 'boolean'">
          <b-button @click="addNewCondition()">Add New</b-button>
        </div>
      </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>
</template>

<script>
import TextFormatter from './common/textFormatter.vue'
export default {
  components: { TextFormatter },
  data () {
    return {
      openedSetting: 'widget_title',
      settings: {
        data_type: '',
        title: {
          text: '',
          text_settings: {
            'align': 'left',
            'decorations': {
              'isBold': false,
              'isItalic': false,
              'isUnderline': false
            },
            'fontColor': '#495057',
            'fontSize': '14px'
          }
        },
        background_and_position: {
          background: '#ffffff'
        },
        data_point: [],
        data_value: {
          show_data_value: true,
          unit: ''
        },
        conditions: []
      },
      seriesData: []
    }
  },
  props: {
    visualProp: {
      type: Object,
      required: true
    },
    selectedNodes: {
      type: Array,
      required: true
    },
    instanceSeriesData: {
      type: Array,
      required: true
    },
    seriesDataMapping: {
      type: Object,
      required: true
    }
  },
  methods: {
    titleTextFormatter (data) {
      Object.assign(this.settings.title.text_settings, data)
    },
    conditionTextFormatter (data, index) {
      Object.assign(this.settings.conditions[index].text_settings, data)
    },
    deleteRange (index) {
      this.settings.conditions.splice(index, 1)
    },
    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)
    },
    addNewCondition () {
      let condition = {
        conditionText: '',
        shapeType: 'circle',
        shapeColor: '#FFD748',
        text_settings: {
          'align': 'left',
          'decorations': {
            'isBold': false,
            'isItalic': false,
            'isUnderline': false
          },
          'fontColor': '#495057',
          'fontSize': '12px'
        }
      }

      if (this.settings.data_type === 'numerical' || this.settings.data_type === 'float') {
        condition.from = 'null'
        condition.to = 'null'
      } else {
        condition.case = ''
      }

      let conditions = this.$_.concat([], this.settings.conditions, condition)

      this.$set(this.settings, 'conditions', conditions)
    },
    getSettings () {
      return this.settings
    },
    getSeriesData () {
      return this.seriesData
    },
    openSetting (setting) {
      this.openedSetting = setting
    },
    selectConditionShape (type, index) {
      let condition = this.settings.conditions[index]
      condition.shapeType = type

      this.$set(this.settings.conditions, index, condition)
    },
    createBooleanConditions () {
      let conditions = [
        {
          case: 'True',
          conditionText: '',
          shapeType: 'circle',
          shapeColor: '#FFD748'
        },
        {
          case: 'False',
          conditionText: '',
          shapeType: 'circle',
          shapeColor: '#ED3128'
        }
      ]

      this.$set(this.settings, 'conditions', conditions)
    },
    isValidate () {
      this.$emit('isValidate', true)
    }
  },
  watch: {
    selectedNodes () {
      this.$set(this.settings, 'conditions', [])
      this.createSeriesData()
      if (this.selectedNodes[0]) {
        this.settings.data_type = this.selectedNodes[0].data_type
        if (this.settings.data_type === 'boolean') {
          this.createBooleanConditions()
        }
      }
    },
    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;
    .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: 42% !important;
          height: 40px !important;
        }
      }
      .shapes-wrap {
        margin-top: 15px;
        .shapes {
          display: flex;
          align-items: center;
          justify-content: space-around;
          .shape {
            position: relative;
            cursor: pointer;
            svg {
              fill: #BFF4FF;
              stroke: #23D0F6;
            }
            .selected-wrap {
              display: none;
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
              .icon {
                width: 15px;
                height: 15px;
              }
            }
            &.selected {
              svg {
                fill: #8db1b8;
                stroke: #2899b2;
              }
              .selected-wrap {
                display: block;
              }
            }
          }
        }
      }
      .shape-color-wrap {
        margin-top: 15px;
      }
    }
  }
  .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;
    }
    .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>
