<template>
  <div
    class="skote-sidebar h-100"
    :style="{
      background: selectedDashboard
        ? selectedDashboard.settings.sidebar_color
        : '#2a3042',
    }"
  >
    <ul class="tabs-list">
      <div class="client-logo">
        <img :src="getClientLogo()" alt="" class="logo" />
      </div>
      <div v-for="panel in getDashboardPanels()" :key="panel.id">
        <li>
          <div class="tab-wrap" :style="{color: getPanelBackgroundColor(panel)}">
            <div class="name-wrap flex-grow-1" @click="selectPanel(panel)">
              <font-awesome-icon class="icon-tab" :icon="panel.icon" />
              <span class="tab-name">{{panel.name}}</span>
            </div>
            <div class="icon-wrap" v-if="selectedPanel && isSelected(panel) && dashboardType === 'userDashboard'">
              <svg class="icon icon-duplicate" v-if="showIcons" @click="onDuplicatePanel(panel)">
                  <use xlink:href="/assets/img/mads-common-icons.svg#copy"></use>
              </svg>
              <svg class="icon pencil ml-2" v-if="showIcons" @click="editTab(panel)" style="margin-right: 5px;">
                <use xlink:href="/assets/img/mads-common-icons.svg#pencil"></use>
              </svg>
              <svg class="icon plus" @click="addNewTab(panel.id)">
                <use xlink:href="/assets/img/mads-common-icons.svg#plus"></use>
              </svg>
            </div>
            <div class="icon-wrap panel-icons" v-if="selectedPanel && !isSelected(panel) && dashboardType === 'userDashboard' && showIcons">
              <svg class="icon icon-duplicate" @click="onDuplicatePanel(panel)">
                  <use xlink:href="/assets/img/mads-common-icons.svg#copy"></use>
              </svg>
              <svg class="icon pencil ml-2" @click="editTab(panel)">
                <use xlink:href="/assets/img/mads-common-icons.svg#pencil"></use>
              </svg>
            </div>
          </div>
          <ul class="subtabs-list" v-if="selectedPanel && isSelected(panel)">
              <li v-for="subPanel in panel.subpanels" :key="subPanel.id">
                <div class="tab-wrap" :style="{color: getPanelBackgroundColor(subPanel)}">
                  <div class="flex-grow-1" @click="selectPanel(subPanel)">
                    <font-awesome-icon class="icon-tab" :icon="subPanel.icon" />
                    <span>{{subPanel.name}}</span>
                  </div>
                  <div class="icon-wrap sub-icons" v-if="dashboardType === 'userDashboard' && showIcons">
                    <svg class="icon icon-duplicate" id="subpanel" @click="onDuplicatePanel(subPanel)">
                      <use xlink:href="/assets/img/mads-common-icons.svg#copy"></use>
                    </svg>
                    <span>
                      <svg class="icon pencil" @click="editTab(subPanel)">
                        <use xlink:href="/assets/img/mads-common-icons.svg#pencil"></use>
                      </svg>
                    </span>
                  </div>
                </div>
              </li>
          </ul>
        </li>
      </div>
    </ul>
    <ul class="sidebar-options">
      <li @click="downloadReport()" v-if="!viewMode">
        <svg class="icon plus">
          <use
            xlink:href="/assets/img/mads-common-icons.svg#download-circle"
          ></use>
        </svg>
        <span>
          Download Report
        </span>
      </li>
      <li @click="addNewTab()" v-if="!viewMode">
        <svg class="icon plus">
          <use xlink:href="/assets/img/mads-common-icons.svg#plus"></use>
        </svg>
        <span>
          New Panel
        </span>
      </li>
      <li @click="goBack()">
        <svg class="icon back">
          <use xlink:href="/assets/img/mads-common-icons.svg#back"></use>
        </svg>
        <span>Back</span>
      </li>
    </ul>
    <duplicate-panel-modal
      ref="duplicatePanelModal"
      @on-save="duplicatePanel"
      :displayPanels="displayPanels"
      :panelType="panelType"
      :currentUser="currentUser"
      :selectedDashboard="selectedDashboard"
      :dashboardService="dashboardService"
    ></duplicate-panel-modal>
    <new-tab-modal
      ref="newTabModal"
      @panel-created="selectPanel"
      v-if="!viewMode"
      :currentUser="currentUser"
      :selectedDashboard="selectedDashboard"
      :dashboardService="dashboardService"
    ></new-tab-modal>
    <download-report-modal
      :dashboardType="dashboardType"
      :currentUser="currentUser"
      :selectedDashboard="selectedDashboard"
      :selectedProject="selectedProject"
      :compareTreeData="compareTreeData"
      :dashboardService="dashboardService"
      :treeService="treeService"
      :entityService="entityService"
      :orgService="orgService"
      :dataInsightService="dataInsightService"
      ref="downloadReportModal"
      @on-success="showMessage"
      @on-error="showErrorMessage"
    ></download-report-modal>
  </div>
</template>

<script>
import dasbhoardEventBus from '../dashboardBus'
import duplicatePanelModal from '../modals/duplicatePanelModal.vue'
import downloadReportModal from '../modals/downloadReportModal.vue'
import newTabModal from '../modals/newTabModal.vue'

export default {
  components: {
    duplicatePanelModal,
    newTabModal,
    downloadReportModal
  },
  props: {
    viewMode: {
      default: false
    },
    dashboardType: {
      type: String
    },
    showIcons: {
      type: Boolean
    },
    currentUser: {},
    selectedDashboard: {},
    selectedPanel: {},
    selectedProject: {},
    compareTreeData: {},
    dashboardService: {},
    treeService: {},
    entityService: {},
    orgService: {},
    dataInsightService: {},
    toastr: {}
  },
  data () {
    return {
      displayPanels: null,
      panelId: null,
      panelType: null
    }
  },
  methods: {
    isSelected (panel) {
      return (this.selectedPanel.id === panel.id) || this.isChidSelected(panel)
    },
    isChidSelected (panel) {
      let subpanelsId = this.$_.map(panel.subpanels, (subpanel) => subpanel.id)
      return this.$_.includes(subpanelsId, this.selectedPanel.id)
    },
    goBack () {
      this.$emit('go-back')
    },
    addNewTab (panelId = null) {
      this.$refs.newTabModal.show(panelId)
    },
    editTab (panel) {
      this.$refs.newTabModal.show(null, panel)
    },
    selectPanel (panel) {
      this.$emit('set-panel', panel)
      this.$emit('select-panel', panel)
    },
    getDashboardPanels () {
      let panels = this.selectedDashboard
        ? this.selectedDashboard.panels || []
        : []
      let panelOrders = this.getPanelOrders()

      if (panelOrders) {
        panels = this.$_.sortBy(panels, (panel) => {
          return panelOrders[panel.id]
        })
      }
      return panels
    },
    getPanelOrders () {
      return (
        (this.selectedDashboard &&
          this.selectedDashboard.settings.panels_order) ||
        null
      )
    },
    getSidebarBackgroundColor () {
      return this.selectedDashboard && this.selectedDashboard.settings
        ? this.selectedDashboard.settings['sidebar_color']
        : '#000000'
    },
    getPanelBackgroundColor (panel) {
      if (this.selectedPanel && (panel.id === this.selectedPanel.id)) {
        return (this.selectedDashboard && this.selectedDashboard.settings) ? this.selectedDashboard.settings['selected_panel_color'] : '#ffffff'
      }
    },
    getClientLogo () {
      return this.selectedDashboard &&
        this.selectedDashboard.settings.client_logo
        ? this.selectedDashboard.settings.client_logo
        : 'https://i.imgur.com/l900wlE.png'
    },
    downloadReport () {
      this.$refs.downloadReportModal.open()
    },
    showMessage (message) {
      this.toastr.success(message, 'Success', {
        closeButton: true,
        closeDuration: 0
      })
    },
    showErrorMessage (message) {
      this.toastr.error(message, 'Error', {
        closeButton: true,
        closeDuration: 0
      })
    },
    onDuplicatePanel (panel) {
      this.panelId = panel.id
      if (panel.panel_id === -1) {
        this.panelType = true
        if (panel.subpanels.length === 0) {
          this.displayPanels = true
        } else {
          this.displayPanels = false
        }
      } else {
        this.displayPanels = true
        this.panelType = false
      }
      this.$refs.duplicatePanelModal.show()
    },
    duplicatePanel (data) {
      let panelData = {
        'parent_id': data.parent_id,
        'panel_id': this.panelId,
        'target_dashboard_id': data.target_dashboard_id,
        'name': data.name,
        'icon': this.selectedPanel.icon
      }
      let config = { orgId: this.currentUser.org.id, dashboardId: this.selectedDashboard.id }
      this.dashboardService.panelDuplicate(config, panelData)
        .then(() => {
          dasbhoardEventBus.$emit('reload-dashboard')
          this.showMessage('Panel created successfully')
          this.$refs.duplicatePanelModal.onCancel()
          this.$refs.duplicatePanelModal.resetModal()
        })
        .catch((e) => {
          this.$refs.duplicatePanelModal.clearForm()
          this.showErrorMessage(e.title)
        })
    }
  }
}
</script>

<style lang="scss" scoped>
  .skote-sidebar {
    background: #2a3042;
    .tabs-list {
      height: calc(100% - 127.5px);
      overflow: auto;
      padding-left: 0;
      margin-bottom: 0;
      li {
        color: #a6b0cf;
        transition: all .4s;
        font-weight: bold;
        cursor: pointer;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 10px 15px;
        .icon {
          fill: #a6b0cf;
          width: 18px;
          height: 18px;
        }
        svg {
          fill: #fff;
        }
        span {
          padding-left: 10px;
          font-size: 14px;
        }
        &.active {
          span {
            color: #fff;
          }
          .icon, svg {
            fill: #fff;
          }
        }
        .tab-wrap {
          .tab-name {
            font-size: 15px;
            font-weight: bold;
            text-transform: capitalize;
          }
          &:hover {
            > span {
              color: #fff;
            }
            .icon, svg {
              fill: #fff;
            }
            .panel-icons {
              visibility: visible;
            }
            ul {
              li {
                .icon, svg {
                  fill: #a6b0cf;
                }
              }
            }
          }
        }
        .subtabs-list {
          list-style: none;
          padding-left: 0;
          li {
            display: flex;
            padding: 10px 30px;
            span {
              font-size: 14px;
            }
            &:first-of-type {
              padding-top: 15px;
            }
            &:last-of-type {
              padding-bottom: 0;
            }
            &:hover {
              .icon, svg {
                fill: #fff;
              }
              .sub-icons {
                visibility: visible;
              }
            }
          }
        }
      }
      .client-logo {
        .logo {
          height: auto;
          max-width: 175px;
          padding: 15px;
        }
      }
      .tab-wrap {
        display: flex;
        align-items: center;
        .name-wrap, .icon-wrap {
          display: flex;
          align-items: center;
        }
        .icon-wrap {
          margin: 0 0 0 auto;
        }
        .panel-icons {
          visibility: hidden;
        }
        .icon-duplicate {
          height: 18px;
          width: 18px;
        }
        .sub-icons {
          visibility: hidden;
        }
      }
    }
    .sidebar-options {
      height: 127.5px;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      padding-left: 0;
      margin-bottom: 0;
      li {
        color: #a6b0cf;
        transition: all .4s;
        font-weight: bold;
        cursor: pointer;
        display: flex;
        padding: 10px 15px;
        max-width: 200px;
        .icon {
          fill: #a6b0cf;
          width: 21px;
          height: 21px;
        }
        svg {
          fill: #a6b0cf;
          width: 16px;
          height: auto;
        }
        span {
          padding-left: 10px;
          font-size: 15px;
        }
        &:hover {
          > span {
            color: #fff;
          }
          .icon, svg {
            fill: #fff;
          }
        }
      }
    }
  }
</style>
