<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'">
        <div class="d-flex justify-content-between align-items-center w-100">
          <div>
            <b-form-input v-model="settings.title.text" type="text" placeholder="Title"></b-form-input>
          </div>
          <div>
            <svg class="icon" id="popover-formatter">
              <use xlink:href="/assets/img/mads-common-icons.svg#text-format"></use>
            </svg>
            <b-popover
              target="popover-formatter"
              placement="bottom"
              title="Text Format"
              triggers="hover focus"
            >
              <text-formatter
              :defaultSettings="settings.title.text_settings"
              @formatter-updated="titleTextFormatter"
              ></text-formatter>
            </b-popover>
          </div>
        </div>
      </div>
    </div>
    <div class="setting-wrap background-position-wrap">
      <div class="header" @click="openSetting('background_and_position')">
        <div class="text-section">
          <span>Background & position</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="d-flex justify-content-between align-items-center w-100">
          <div>Widget Background Color/Gradient</div>
          <div><b-form-input v-model="settings.background_and_position.background" type="color" class="color"></b-form-input></div>
        </div>
      </div>
    </div>
    <div class="setting-wrap horizontal-lines-wrap">
      <div class="header" @click="openSetting('data_points')">
        <div class="text-section">
          <span>Data Point</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_points'">
        <div v-for="(data, index) in settings.data_point" :key="index">
          <div class="setting-wrap">
            <div class="header" @click="openDataSettings('data_point' + index)">
              <div class="text-section">
                <span>{{data.title.text}}</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="dataSetting === 'data_point' + index">
              <div><u>Advance Settings</u></div>
              <div class="advance-settings-wrap">
                <div class="advance-settings">
                <div><b-form-input v-model="data.title.text" type="text" placeholder="Unit" class="unit-input w-100"></b-form-input></div>
                <div>
                  <svg class="icon" :id="`popover-${index}`">
                    <use xlink:href="/assets/img/mads-common-icons.svg#text-format"></use>
                  </svg>
                </div>
                <b-popover
                  :target="`popover-${index}`"
                  placement="bottom"
                  title="Text Format"
                  triggers="hover focus"
                >
                  <text-formatter
                    :index="index"
                    :defaultSettings="data.title.text_settings"
                    @formatter-updated="dataPointTextFormatter"
                  ></text-formatter>
                </b-popover>
              </div>
              <div class="advance-settings mt-2">
                <div>Unit</div>
                <div><b-form-input v-model="data.unit" type="text" placeholder="Unit" class="unit-input"></b-form-input></div>
              </div>
              <div class="advance-settings mt-1">
                <div>Trend Line Color</div>
                <div>
                  <b-form inline>
                    <b-form-select class="unit-input pt-0" v-model="data.trend_line.line_type" :options="sparkLineTypeOptions"></b-form-select>
                    <b-form-select class="unit-input ml-2 pt-0 sparkline-width" v-model="data.trend_line.line_width" :options="sparkLineWidth"></b-form-select>
                    <b-form-input v-model="data.trend_line.color" type="color" class="color pr-0"></b-form-input>
                  </b-form>
                </div>
              </div>
              <div class="advance-settings">
                <div>Trend Line Background</div>
                <div><b-form-input v-model="data.trend_line.background_color" type="color" class="color pr-0"></b-form-input></div>
              </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="setting-wrap band-setting">
      <div class="header" @click="openSetting('dataValue')">
        <div class="text-section">
          <span>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 === 'dataValue'">
        <b-form-radio-group v-model="settings.aggregate_func" :options="options" stacked ></b-form-radio-group>
      </div>
    </div>
  </div>
</template>

<script>
import TextFormatter from './common/textFormatter.vue'
export default {
  components: { TextFormatter },
  data () {
    return {
      openedSetting: 'widget_title',
      dataSetting: 'data_point0',
      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: [],
        aggregate_func: 'LIVE'
      },
      options: [
        { text: 'LIVE (Current Live Data)', value: 'LIVE' },
        { text: 'AVG (Over the Time Range)', value: 'AVG' },
        { text: 'MIN  (Over the Time Range)', value: 'MIN' },
        { text: 'MAX  (Over the Time Range)', value: 'MAX' }
      ],
      sparkLineTypeOptions: [
        { value: 'Solid', text: 'Solid' },
        { value: 'ShortDash', text: 'Short Dash' },
        { value: 'ShortDot', text: 'Short Dot' },
        { value: 'ShortDashDot', text: 'Short Dash Dot' },
        { value: 'ShortDashDotDot', text: 'Short Dash Dot Dot' },
        { value: 'Dot', text: 'Dot' },
        { value: 'Dash', text: 'Dash' },
        { value: 'LongDash', text: 'Long Dash' },
        { value: 'DashDot', text: 'Dash Dot' },
        { value: 'LongDashDot', text: 'Long Dash Dot' },
        { value: 'LongDashDotDot', text: 'Long Dash Dot Dot' }
      ],
      sparkLineWidth: [
        { text: '1', value: 1 },
        { text: '2', value: 2 },
        { text: '3', value: 3 }
      ]

    }
  },
  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)
    },
    dataPointTextFormatter (data, index) {
      Object.assign(this.settings.data_point[index].title.text_settings, data)
    },
    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)
      this.setDataPoint()
    },
    setDataPoint () {
      this.settings.data_point = this.seriesData.map((obj) => ({
        unit: obj.unit,
        uuid: obj.axes[0].source_metadata.parameter,
        title: {
          text: obj.name,
          text_settings: {
            align: 'left',
            fontColor: '#495057',
            fontSize: '12px',
            decorations: {
              isBold: false,
              isItalic: false,
              isUnderline: false
            }
          }
        },
        trend_line: {
          color: obj.color,
          background_color: obj.background_color || '#FFFFFF',
          line_type: obj.line_type || 'Solid',
          line_width: obj.line_width || 1
        }
      }))
    },
    getSettings () {
      return this.settings
    },
    openSetting (setting) {
      this.openedSetting = setting
    },
    openDataSettings (setting) {
      this.dataSetting = setting
    },
    getSeriesData () {
      return this.seriesData
    },
    isValidate () {
      this.$emit('isValidate', true)
    }
  },
  watch: {
    selectedNodes () {
      this.createSeriesData()
    },
    visualProp () {
      if (!this.$_.isEmpty(this.visualProp)) {
        this.settings = this.$_.merge({}, this.visualProp)
      }
    },
    settings: {
      handler () {
        this.isValidate()
      },
      deep: true
    }
  },
  mounted () {
    if (!this.$_.isEmpty(this.visualProp)) {
      this.settings = this.$_.merge({}, this.visualProp)
    }
    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;
  }
  .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: 10px 10px 0px 10px;
    .icon {
      width: 20px;
      height: 20px;
    }
    .unit-input {
      height: 27px;
      width: 100px;
    }
    .advance-settings-wrap {
      padding: 10px 10px 10px;
      .advance-settings {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      .sparkline-width {
        padding-left: 2.375rem;
        background: url(./common/icons/sparkLIneWidth.svg) no-repeat 4% 50%;
        padding-left: 40px;
      }
    }
    }
  }
  input[type="color"] {
    border: none;
    &[type=text] {
      width: 90px;
      height: 38px;
    }
    &[type=color] {
      width: 35px;
      height: 35px;
      cursor: pointer;
    }
  }
</style>
