<template>
  <mads-modal
    ref="madsModal"
    :modalID="'add-widget-modal'"
    :modalRef="'addWidgetModal'"
    :modalSections="modalSections"
    :selectedSectionIndex="selectedSectionIndex"
    :editMode="editMode"
    :header="editMode ? 'Update Widget' : 'Add New Widget'"
    @select-section="selectSection($event)"
    @next-section="nextSection()"
    @on-cancel="onCancel()"
    @on-save="saveWidget()"
    :isHide="false">
    <template v-slot:right-panel>
      <sections ref="sections"
      :selectedSectionIndex="selectedSectionIndex"
      :editMode="editMode" :widgetData="widget"
      :dashboardService="dashboardService"
      :imageService="imageService"
      :currentUser="currentUser"
      :selectedDashboard="selectedDashboard"
      :selectedProject="selectedProject"
      :selectedPanel="selectedPanel"
      :treeService="treeService"
      :entityService="entityService"
      :orgService="orgService"
      :dataInsightService="dataInsightService"
      @hide-section="hideSection"
      @show-section="showSection"
      @on-update-widget-instance="onUpdateWidgetInstance"
      @isValidate="isValidate"
      ></sections>
    </template>
  </mads-modal>
</template>

<script>
import madsModal from '../../modals/madsModal.vue'
import sections from './addEditWidgetSections'

export default {
  components: {
    madsModal,
    sections
  },
  props: {
    dashboardService: {},
    imageService: {},
    currentUser: {},
    selectedDashboard: {},
    selectedProject: {},
    selectedPanel: {},
    treeService: {},
    entityService: {},
    orgService: {},
    dataInsightService: {}
  },
  data () {
    return {
      editMode: false,
      modalSections: [],
      selectedSectionIndex: 1,
      widget: null,
      validate: true
    }
  },
  methods: {
    initSections () {
      this.modalSections = this.$_.concat([], [{
        index: 1,
        name: 'Widget'
      }, {
        index: 2,
        name: 'Data'
      }, {
        index: 3,
        name: 'Settings'
      }])
    },
    add () {
      this.initSections()
      this.editMode = false
      this.$refs.madsModal.$refs.addWidgetModal.show()
      this.widget = null
    },
    edit (widget) {
      this.initSections()
      this.widget = widget
      let widgetCategory = this.widget.widget_category[1]
      this.editMode = true

      if (this.$_.includes(['image_card', 'static_card', 'user_card', 'static_location'], widgetCategory)) {
        this.hideSection(1)
        this.selectedSectionIndex = 3
      } else {
        this.selectedSectionIndex = 2
      }
      this.$refs.madsModal.$refs.addWidgetModal.show()
    },
    selectSection (index) {
      this.selectedSectionIndex = index
    },
    nextSection () {
      let isSectionValid = true
      if (this.selectedSectionIndex === 1) {
        isSectionValid = this.$refs.sections.isWidgetSelected()
      } else if (this.selectedSectionIndex === 2 && !this.modalSections[1].hidden) {
        isSectionValid = this.$refs.sections.isDataNodeSelected()
      }
      if (!isSectionValid) {
        return
      }

      this.selectedSectionIndex++
      if (this.modalSections[this.selectedSectionIndex - 1].hidden) {
        this.nextSection()
      }
    },
    hideSection (index) {
      let section = this.$_.merge(this.modalSections[index], { hidden: true })
      this.$set(this.modalSections, index, section)
    },
    showSection (index) {
      let section = this.$_.merge(this.modalSections[index], { hidden: false })
      this.$set(this.modalSections, index, section)
    },
    onCancel () {
      this.selectedSectionIndex = 1
    },
    saveWidget () {
      if (!this.validate) {
        return
      }
      if (this.editMode) {
        this.$refs.sections.updateWidgetInstance()
      } else {
        this.$refs.sections.saveWidgetInstance()
        this.$refs.madsModal.hide()
      }
    },
    onUpdateWidgetInstance () {
      this.$emit('on-update-widget-instance')
      this.$refs.madsModal.hide()
    },
    isValidate (isValidate) {
      this.validate = isValidate
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
