<template>
  <div class="skote-header">
    <div class="dashboard-name-wrap">
      <div>
        <span
          class="name"
          @click="showDashboardOptions = !showDashboardOptions"
        >
          {{ selectedDashboard && selectedDashboard.name }}
          <span v-if="!viewMode && !isEditingDashboard">
            <font-awesome-icon icon="chevron-down" />
          </span>
        </span>
        <ul v-if="!isEditingDashboard && showDashboardOptions">
          <li
            v-for="dashboard in allDashboards"
            :key="dashboard.id"
            @click="onSelectDashboard(dashboard)"
          >
            {{ dashboard.name }}
          </li>
        </ul>
      </div>
      <div class="mode-wrap" v-if="!viewMode">
        <template v-if="isEditingDashboard">
          <!-- <span @click="cancelEditDashboard()">
            <svg class="icon">
              <use xlink:href="/assets/img/mads-common-icons.svg#close"></use>
            </svg>
            <span>Cancel</span>
          </span> -->
          <span @click="saveDashboard()">
            <svg class="icon">
              <use xlink:href="/assets/img/mads-common-icons.svg#save"></use>
            </svg>
            <span>Save</span>
          </span>
        </template>
        <template v-else>
          <span @click="onEditDashboard()">
            <svg class="icon">
              <use xlink:href="/assets/img/mads-common-icons.svg#edit"></use>
            </svg>
            <span>Edit</span>
          </span>
        </template>
      </div>
    </div>
    <div class="right-section">
      <span v-if="isEditingDashboard">
        <svg class="icon plus" v-tooltip="'Duplicate Dashboard'" @click.stop="onDuplicateDashboard()">
          <use xlink:href="/assets/img/mads-common-icons.svg#copy"></use>
        </svg>
        <svg class="icon plus" @click="addWidget()">
          <use xlink:href="/assets/img/mads-common-icons.svg#plus"></use>
        </svg>
        <span>New Widget</span>
      </span>
      <span v-else>
        <svg
          v-tooltip="'Share Dashboard'"
          class="icon"
          v-if="!viewMode"
          @click="exportDashboard()"
        >
          <use xlink:href="/assets/img/mads-dashboard-icons.svg#share"></use>
        </svg>
        <svg
          v-tooltip="'Download Dashboard'"
          class="icon"
          @click="downloadDashboard"
        >
          <use
            xlink:href="/assets/img/mads-common-icons.svg#download-circle"
          ></use>
        </svg>
        <svg
          v-tooltip="'Real Time History Settings'"
          class="icon clock"
          @click="openRealtimeHistoricalSettings()"
        >
          <use xlink:href="/assets/img/mads-common-icons.svg#clock"></use>
        </svg>
        <svg
          v-tooltip="'Dashboard Settings'"
          class="icon settings"
          v-if="!viewMode"
          @click="openSettings()"
        >
          <use xlink:href="/assets/img/mads-common-icons.svg#settings"></use>
        </svg>
        <svg
          v-tooltip="'Capture Dashboard'"
          class="icon"
          @click="captureDashboard()"
        >
          <use xlink:href="/assets/img/mads-common-icons.svg#screenshot"></use>
        </svg>
      </span>
    </div>
    <duplicate-dashboard-modal
      ref="duplicateDashboardModal"
      @on-save="duplicateDashboard"
    ></duplicate-dashboard-modal>
    <export-dashboard-modal
      :currentUser="currentUser"
      :selectedDashboard="selectedDashboard"
      :commonService="commonService"
      :dashboardService="dashboardService"
      ref="exportDashboard"
      v-if="!viewMode"
    ></export-dashboard-modal>
    <dashboard-settings
      ref="dashboardSettings"
      v-if="!viewMode"
      :currentUser="currentUser"
      :selectedDashboard="selectedDashboard"
      :dashboardService="dashboardService"
    ></dashboard-settings>
    <realtime-historical-settings
      ref="realTimeHistoricalSettings"
      :dashboardType="dashboardType"
      :currentUser="currentUser"
      :selectedDashboard="selectedDashboard"
      :selectedPanel="selectedPanel"
      @save-panel-realtime-historical-settings="
        savePanelRealtimeHistoricalSettings
      "
    >
    </realtime-historical-settings>
    <add-widget ref="addWidget" v-if="!viewMode"
      :dashboardService="dashboardService"
      :imageService="imageService"
      :currentUser="currentUser"
      :selectedDashboard="selectedDashboard"
      :selectedProject="selectedProject"
      :selectedPanel="selectedPanel"
      :treeService="treeService"
      :entityService="entityService"
      :orgService="orgService"
      :dataInsightService="dataInsightService"
    ></add-widget>
  </div>
</template>

<script>
import DuplicateDashboardModal from '../modals/duplicateDashboardModal.vue'
// import ExportDashboardModal from '../modals/exportDashboardModal.vue'
import ExportDashboardModal from '../modals/exportDahsboard/index.vue'
import dashboardSettings from '../modals/dashboardSettings/editSettings.vue'
import realtimeHistoricalSettings from '../modals/dashboardSettings/realTimeHistoricalSettings.vue'
import addWidget from '../widget/addEdit/addEditWidget.vue'
import dashboardEventBus from '../dashboardBus'

export default {
  components: {
    DuplicateDashboardModal,
    ExportDashboardModal,
    dashboardSettings,
    realtimeHistoricalSettings,
    addWidget
  },
  props: {
    viewMode: {
      default: false
    },
    dashboardType: {
      type: String
    },
    currentUser: {},
    selectedDashboard: {},
    selectedTheme: {},
    dashboardService: {},
    commonService: {},
    toastr: {},
    selectedPanel: {},
    imageService: {},
    selectedProject: {},
    treeService: {},
    entityService: {},
    orgService: {},
    dataInsightService: {}
  },
  data () {
    return {
      selectedMode: {},
      showDashboardOptions: false,
      isEditingDashboard: false,
      allDashboards: []
    }
  },
  methods: {
    addWidget () {
      this.$refs.addWidget.add()
    },
    onSelectDashboard (dashboard) {
      this.showDashboardOptions = false
      let config = { orgId: this.currentUser.org.id, id: dashboard.id }
      this.dashboardService.readId(config)
        .then((response) => {
          dashboardEventBus.$emit('set-dashboard', response)
          dashboardEventBus.$emit('load-dashboard', response)
        })
    },
    onEditDashboard () {
      this.isEditingDashboard = true
      this.$emit('on-change-mode', 'edit')
    },
    saveDashboard () {
      this.isEditingDashboard = false
      this.$emit('save-dashboard-panel')
    },
    cancelEditDashboard () {
      this.isEditingDashboard = false
      this.$emit('cancel-edit-dashboard')
    },
    openSettings () {
      this.$refs.dashboardSettings.edit()
    },
    exportDashboard () {
      this.$refs.exportDashboard.open()
    },
    openRealtimeHistoricalSettings () {
      this.$refs.realTimeHistoricalSettings.open()
    },
    captureDashboard () {
      this.$emit('capture-dashboard')
    },
    downloadDashboard () {
      this.toastr.info(
        'This feature is in progress, please check back later. Thanks!',
        'Info',
        { closeButton: true, closeDuration: 0 }
      )
    },
    savePanelRealtimeHistoricalSettings (params) {
      this.$emit('save-panel-realtime-historical-settings', params)
    },
    loadAllDashboards () {
      let orgId = this.currentUser.org.id
      let config = { orgId: orgId }
      const params = {
        page_size: 100,
        page_number: 0
      }
      this.dashboardService.read(config, params).then((response) => {
        this.allDashboards = response.dashboards
      })
    },
    onDuplicateDashboard () {
      this.$refs.duplicateDashboardModal.show()
    },
    duplicateDashboard (data) {
      let dashboardData = { name: data }
      let config = { dashboardId: this.selectedDashboard.id, orgId: this.currentUser.org.id }
      this.dashboardService.dashboardDuplicate(config, dashboardData)
        .then((res) => {
          this.$refs.duplicateDashboardModal.onCancel()
          this.loadAllDashboards()
        })
        .catch((e) => {
          this.toastr.error(e.title, 'Error', {
            closeButton: true,
            closeDuration: 0
          })
        })
    }
  },
  mounted () {
    if (this.dashboardType === 'userDashboard') {
      this.loadAllDashboards()
    }
  }
}
</script>

<style lang="scss" scoped>
  .skote-header {
    height: 70px;
    background-color: #fff;
    box-shadow: 0 0.75rem 1.5rem rgba(18, 38, 63, 0.03);
    display: flex;
    align-items: center;
    .name {
      color: #495057;
      font-size: 16px;
      font-weight: bold;
      display: flex;
      align-items: center;
      cursor: pointer;
      svg {
        margin-left: 10px;
      }
    }
    ul {
      position: absolute;
      background: #fff;
      z-index: 99;
      overflow: auto;
      height: 180px;
      border: 1px solid #e2e2e2;
      border-radius: 4px;
      top: 60px;
      left: 10px;
      padding-left: 0;
      list-style: none;
      li {
        padding: 10px;
        font-weight: 100;
        cursor: pointer;
        &:hover {
          background-color: #e2e2e2;
        }
      }
    }
    .mode-wrap {
      display: flex;
      align-items: center;
      margin-left: 15px;
      border-left: 1px solid #e2e2e2;
      cursor: pointer;
      span {
        font-size: 15px;
        padding-left: 5px;
      }
    }
  }
  .dashboard-name-wrap {
    display: flex;
    padding-left: 10px;
  }
  .dashboard-name-input {
    width: 300px;
    margin-left: 30px;
  }
  .right-section {
    margin: 0 20px 0 auto;
    display: flex;
    align-items: center;
    > span {
      display: flex;
      align-items: center;
      span {
        padding-left: 5px;
        font-size: 15px;
        cursor: pointer;
      }
    }
  }
  .icon {
    width: 21px;
    height: 21px;
    margin-left: 15px;
    cursor: pointer;
    fill: #212529;
    &:focus {
      outline: none;
    }
  }
</style>

<style lang="scss">
.skote-header {
  .select-dashboard,
  .select-mode {
    cursor: pointer;
    margin-left: 12px;
    .multiselect__tags {
      background: #ffffff;
      font-size: 14px;
      line-height: 17px;
    }
    .multiselect__single {
      font-size: 14px;
    }
    .multiselect__element {
      .multiselect__option {
        font-size: 14px;
        &:hover {
          color: #ffffff;
        }
      }
    }
  }
}
</style>
