<template>
  <mads-modal
    ref="madsModal"
    :modalID="'edit-settings-modal'"
    :modalRef="'editSettingsModal'"
    :modalSections="modalSections"
    :selectedSection="selectedSection"
    :selectedSectionIndex="selectedSectionIndex"
    :editMode="editMode"
    :isHide="false"
    :header="'Dashboard Settings'"
    @select-section="selectSection($event)"
    @next-section="nextSection()"
    @on-cancel="onCancel()"
    @on-save="saveSettings()">
    <template v-slot:right-panel>
      <sections ref="sections"
      :modalSections="modalSections"
      :selectedSectionIndex="selectedSectionIndex"
      :editMode="editMode"
      :dashboardService="dashboardService"
      :currentUser="currentUser"
      :selectedDashboard="selectedDashboard"
      ></sections>
    </template>
  </mads-modal>
</template>

<script>
import madsModal from '../madsModal.vue'
import sections from './editSettingsSections'
import dasbhoardEventBus from '../../dashboardBus'

export default {
  components: {
    madsModal,
    sections
  },
  props: {
    dashboardService: {},
    currentUser: {},
    selectedDashboard: {}
  },
  data () {
    return {
      editMode: false,
      modalSections: [{
        index: 1,
        name: 'Visual',
        isError: false,
        key: 'visual',
        fields: ['name']
      }, {
        index: 2,
        name: 'Client',
        isError: false,
        key: 'client',
        fields: []
      }, {
        index: 3,
        name: 'Tabs',
        isError: false,
        key: 'tabs',
        fields: []
      }, {
        index: 4,
        name: 'Timezone',
        isError: false,
        key: 'timezone',
        fields: []
      }],
      selectedSection: {},
      selectedSectionIndex: 1
    }
  },
  methods: {
    edit () {
      this.resetModalSection()
      this.editMode = true
      this.$refs.madsModal.$refs.editSettingsModal.show()
    },
    resetModalSection () {
      this.modalSections = this.$_.map(this.modalSections, (section) => {
        return this.$_.merge({}, section, { isError: false })
      })
    },
    selectSection (index) {
      this.selectedSection = this.modalSections[index - 1]
      this.selectedSectionIndex = index
    },
    nextSection () {
      this.selectedSectionIndex++
    },
    onCancel () {
      this.selectedSectionIndex = 1
    },
    saveSettings () {
      let loader = this.$loading.show()
      let params = this.$refs.sections.getSettings()
      let config = { orgId: this.currentUser.org.id, id: this.selectedDashboard.id }

      this.dashboardService.update(config, params)
        .then((response) => {
          dasbhoardEventBus.$emit('reload-dashboards')
          dasbhoardEventBus.$emit('reload-dashboard')
          dasbhoardEventBus.$emit('reload-dashboard-panel')

          this.$refs.madsModal.$refs.editSettingsModal.hide()
        })
        .catch((error) => {
          let source = this.$_.keys(error.source)
          this.modalSections = this.$_.map(this.modalSections, (section) => {
            let sectionFieldsKey = this.$_.map(section.fields, field => field)
            let isError = this.$_.intersection(sectionFieldsKey, source).length > 0
            return this.$_.merge({}, section, { isError })
          })
          this.$refs.sections.handleAPIErrors(error.source)
          this.$toastr.error(error.title, 'Error', { closeButton: true, closeDuration: 0 })
        })
        .finally(() => {
          loader.hide()
        })
    }
  },
  mounted () {
    this.selectedSection = this.$_.merge({}, this.selectedSection)
  }
}
</script>

<style lang="scss" scoped>
</style>
