<template>
  <div class="visual-settings">
    <new-settings
      v-if="isNewWidget"
      ref="newSettings"
      :category="category"
      :visualProp="visualProp"
      :selectedNodes="selectedNodes"
      :seriesData="seriesData"
      :seriesDataMapping="seriesDataMapping"
      @isValidate="isValidate"
    >
    </new-settings>
    <settings
      v-else
      ref="newSettings"
      :settings="visualSettings"
      :visualProp="visualProp"
      @on-setting-upate="onVisualSettingsUpdate"
      @on-file-upload="onFileUpload"
      @on-new-threshold="newThreshold"
      @on-edit-threshold="editThreshold"
      @on-save-threshold="saveThreshold"
      @on-delete-threshold="deleteThreshold"
      @on-new-plot-band="newPlotBand"
      @on-edit-plot-band="editPlotBand"
      @on-save-plot-band="savePlotBand"
      @on-delete-plot-band="deletePlotBand"
      @on-new-stop="newStop"
      @on-edit-stop="editStop"
      @on-save-stop="saveStop"
      @on-delete-stop="deleteStop">
    </settings>
  </div>
</template>

<script>
import Settings from './settings'
import NewSettings from './newSettings'

export default {
  components: {
    Settings,
    NewSettings
  },
  props: {
    vProps: {
      type: Object,
      required: true
    },
    settings: {
      type: Array,
      required: true
    },
    isNewWidget: {
      type: Boolean,
      default: false
    },
    category: {
      type: Array,
      required: true
    },
    selectedNodes: {
      type: Array,
      required: true
    },
    seriesData: {
      type: Array,
      default: () => {
        return []
      }
    },
    seriesDataMapping: {
      type: Object,
      default: () => {
        return []
      }
    },
    imageService: {}
  },
  data () {
    return {
      visualSettings: [],
      visualProp: {}
    }
  },
  methods: {
    onVisualSettingsUpdate (value, key) {
      if (this.$_.includes(key, '.center.x')) {
        this.visualProp.pane.center[0] = value
      } else if (this.$_.includes(key, '.center.y')) {
        this.visualProp.pane.center[1] = value
      } else {
        this.$_.set(this.visualProp, key, value)
      }
    },
    onFileUpload (file, key) {
      let formData = new FormData()
      formData.append('image', file, file.name)
      formData.append('path', 'dashboard')

      this.imageService.create(formData)
        .then((res) => {
          this.$_.set(this.visualProp, key, res.url)
        })
    },
    newThreshold (_) {
      let thresholds = this.$_.get(this.visualProp, 'threshold') || []
      let newIndex = thresholds.length
      this.$set(thresholds, newIndex, { color: '', from: '', to: '', edit: true })
    },
    editThreshold (_, index) {
      let thresholds = this.$_.get(this.visualProp, 'threshold')
      this.$set(thresholds, index, this.$_.merge({}, thresholds[index], { 'edit': true }))
    },
    saveThreshold (_, threshold, index) {
      let thresholds = this.$_.get(this.visualProp, 'threshold')

      thresholds[index] = threshold
      thresholds = this.$_.sortBy(thresholds, (item) => {
        return item['from']
      })
      this.$_.set(this.visualProp, 'threshold', thresholds)
    },
    deleteThreshold (_, index) {
      let thresholds = this.$_.get(this.visualProp, 'threshold')
      thresholds.splice(index, 1)
    },
    newPlotBand (_) {
      let plotBands = this.$_.get(this.visualProp, 'yAxis.plotBands') || []
      let newIndex = plotBands.length
      this.$set(plotBands, newIndex, { color: '', from: '', to: '', edit: true })
    },
    editPlotBand (_, index) {
      let plotBands = this.$_.get(this.visualProp, 'yAxis.plotBands')
      this.$set(plotBands, index, this.$_.merge({}, plotBands[index], { 'edit': true }))
    },
    savePlotBand (_, plotBand, index) {
      let plotBands = this.$_.get(this.visualProp, 'yAxis.plotBands')

      plotBands[index] = plotBand
      plotBands = this.$_.sortBy(plotBands, (item) => {
        return item['from']
      })
      this.$_.set(this.visualProp, 'yAxis.plotBands', plotBands)
    },
    deletePlotBand (_, index) {
      let plotBands = this.$_.get(this.visualProp, 'yAxis.plotBands')
      plotBands.splice(index, 1)
    },
    newStop (_) {
      let stops = this.$_.get(this.visualProp, 'yAxis.stops') || []
      let newIndex = stops.length
      this.$set(stops, newIndex, ['', '', 'edit'])
    },
    editStop (_, index) {
      let stops = this.$_.get(this.visualProp, 'yAxis.stops')
      let editStop = this.$_.concat(stops[index], 'edit')
      this.$set(stops, index, editStop)
    },
    saveStop (_, stop, index) {
      let stops = this.$_.get(this.visualProp, 'yAxis.stops')
      stops[index] = stop
      stops = this.$_.sortBy(stops, (item) => {
        return item[0]
      })
      this.$_.set(this.visualProp, 'yAxis.stops', stops)
    },
    deleteStop (_, index) {
      let stops = this.$_.get(this.visualProp, 'yAxis.stops')
      stops.splice(index, 1)
    },
    getVisualProps () {
      if (this.isNewWidget) {
        return this.$refs.newSettings.getSettings()
      } else {
        return this.visualProp
      }
    },
    getSeriesData () {
      return this.$refs.newSettings.getSeriesData()
    },
    isValidate (isValidate) {
      this.$emit('isValidate', isValidate)
    }
  },
  watch: {
    settings () {
      this.visualSettings = this.settings
    },
    vProps () {
      this.visualProp = this.$_.merge({}, this.vProps)
    }
  },
  mounted () {
    this.visualSettings = this.settings
    this.visualProp = this.$_.merge({}, this.vProps)
  }
}
</script>

<style lang="scss" scoped>
  .visual-settings {
    text-transform: capitalize;
    margin-top: 10px;
    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;
      }
    }
    &::-webkit-scrollbar{
        width: 6px;
      }
    &::-webkit-scrollbar-track {
      background: #f1f1f1;
    }
    &::-webkit-scrollbar-thumb {
      background: #2469a0;
      height: 45px;
      border-radius: 10px;
    }
    &::-webkit-scrollbar-thumb:hover {
      background: #555;
    }
    .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;
        }
      }
    }
    .upload-input {
      margin-top: 10px;
    }
    .color-wrap {
      display: inline-flex;
      align-items: center;
      border: 1px solid #d7d7d7;
      background: #F5FBFF;
      width: 140px;
      height: 40px;
      border-radius: 4px;
      cursor: pointer;
      span {
        display: inline-block;
        color: #303033;
        width: 60px;
        text-transform: uppercase;
      }
      input {
        border: none;
        &[type=text] {
          width: 90px;
          height: 38px;
        }
        &[type=color] {
          width: 30px;
          height: 32px;
          cursor: pointer;
          padding: 0;
          margin: 0 10px 0 auto;
        }
      }
    }
    .mads-table {
      table {
        box-shadow: none;
      }
      thead, tbody {
        th, td {
          padding-top: 12px;
          padding-bottom: 10px;
          &.display-flex {
            display: flex;
            align-items: center;
          }
        }
        input {
          height: 40px;
          width: 105px;
        }
      }
      .icon {
        width: 18px;
        height: 18px;
        cursor: pointer;
        margin: 0 5px;
      }
    }
    .color-indicator {
      width: 14px;
      height: 14px;
      display: inline-block;
      border-radius: 50%;
      margin-right: 5px;
    }
    .add-plot-bands-btn {
      float: right;
      margin-bottom: 10px;
      height: 40px !important;
    }
  }
</style>
