// Licensed to the Apache Software Foundation (ASF) under one
// or more contributor license agreements.  See the NOTICE file
// distributed with this work for additional information
// regarding copyright ownership.  The ASF licenses this file
// to you under the Apache License, Version 2.0 (the
// "License"); you may not use this file except in compliance
// with the License.  You may obtain a copy of the License at
//
//   http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing,
// software distributed under the License is distributed on an
// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
// KIND, either express or implied.  See the License for the
// specific language governing permissions and limitations
// under the License.

<template>
  <a-row :gutter="12">
    <a-col :md="24">
      <a-card class="breadcrumb-card">
        <a-col :span="12" style="display: inline-flex">
          <breadcrumb style="padding-top: 6px; padding-left: 8px" />
          <a-button
            style="margin-left: 12px; margin-top: 4px"
            :loading="loading"
            size="small"
            shape="round"
            @click="fetchConfigurationData()" >
            <template #icon><ReloadOutlined /></template>
            {{ $t('label.refresh') }}
          </a-button>
        </a-col>
        <a-col :span="12" style="float: right">
          <a-input-search
          style="width: 25vw; float: right; margin-bottom: 10px; z-index: 8; display: flex"
          :placeholder="$t('label.search')"
          v-model:value="filter"
          @search="changePage()"
          v-focus="true" />
        </a-col>
      </a-card>
    </a-col>
    <a-col :span="24">
      <a-card style="margin-left: 10px;">
        <a-spin :spinning="configLoading">
          <a-tabs
            tabPosition="left"
            :animated="false"
            :activeKey="this.group || ''"
            @change="changeGroupTab" >
            <a-tab-pane
              key=''
              tab='All Settings' >
                <ConfigurationTable
                  :columns="columns"
                  :config="config"
                  :count="count"
                  :page="page"
                  :pagesize="pagesize"
                  @change-page="changePage" />
            </a-tab-pane>
            <a-tab-pane
              v-for="(group) in groups"
              :key="group.name"
              :tab="group.name" >
              <a-tabs
                :activeKey="this.subgroup || ''"
                :animated="false"
                @change="changeSubgroupTab" >
                <a-tab-pane
                  v-for="(subgroup) in group.subgroup"
                  :key="subgroup.name"
                  :tab="subgroup.name" >
                  <ConfigurationHierarchy
                    :columns="columns"
                    :config="config" />
                </a-tab-pane>
              </a-tabs>
            </a-tab-pane>
          </a-tabs>
        </a-spin>
      </a-card>
    </a-col>
  </a-row>
</template>

<script>
import { api } from '@/api'
import { mixin, mixinDevice } from '@/utils/mixin.js'
import Breadcrumb from '@/components/widgets/Breadcrumb'
import OsLogo from '@/components/widgets/OsLogo'
import Status from '@/components/widgets/Status'
import ActionButton from '@/components/view/ActionButton'
import InfoCard from '@/components/view/InfoCard'
import QuickView from '@/components/view/QuickView'
import TooltipButton from '@/components/widgets/TooltipButton'
import ConfigurationHierarchy from './ConfigurationHierarchy'
import ConfigurationTable from './ConfigurationTable'

export default {
  name: 'ConfigurationTab',
  components: {
    Breadcrumb,
    OsLogo,
    Status,
    ActionButton,
    InfoCard,
    QuickView,
    TooltipButton,
    ConfigurationHierarchy,
    ConfigurationTable
  },
  mixins: [mixin, mixinDevice],
  props: {
    loading: {
      type: Boolean,
      default: false
    },
    actions: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {
      groups: [],
      config: [],
      configLoading: true,
      page: 1,
      pagesize: this.$store.getters.defaultListViewPageSize,
      group: '',
      subgroup: '',
      filter: '',
      count: 0,
      apiName: 'listConfigurations',
      columns: [
        {
          title: 'name',
          dataIndex: 'name',
          key: 'name'
        },
        {
          title: 'value',
          dataIndex: 'value',
          key: 'value',
          width: '29%'
        }
      ]
    }
  },
  watch: {
    '$route.fullPath': function () {
      this.group = this.$route.query.group || ''
      this.subgroup = this.$route.query.subgroup || ''
      this.page = parseInt(this.$route.query.page) || 1
      this.pagesize = parseInt(this.$route.query.pagesize) || this.pagesize
      this.filter = this.$route.query.filter || ''
    },
    resource: {
      deep: true,
      handler (newItem) {
        if (!newItem || !newItem.id) {
          return
        }
        this.fetchConfigurationData()
      }
    }
  },
  created () {
    this.fetchConfigurationGroups()
  },
  methods: {
    fetchConfigurationGroups () {
      this.configLoading = true
      const params = {
        pagesize: -1
      }
      api('listConfigurationGroups', params).then(response => {
        this.groups = response.listconfigurationgroupsresponse.configurationgroup
      }).catch(error => {
        console.error(error)
        this.$message.error(this.$t('message.error.loading.setting'))
      }).finally(() => {
        this.group = this.$route.query.group || ''
        this.subgroup = this.$route.query.subgroup || ''
        this.fetchConfigurationData()
      })
    },
    fetchConfigurationData () {
      this.configLoading = true
      const params = {
        listAll: true
      }
      if (this.group.length > 0) {
        params.group = this.group
        params.pagesize = -1
      } else {
        params.pagesize = this.pagesize || 20
        params.page = this.page || 1
      }
      if (this.subgroup.length > 0) {
        params.subgroup = this.subgroup
      }
      if (this.filter) {
        params.keyword = this.filter
      }

      api('listConfigurations', params).then(response => {
        this.config = []
        let config = response.listconfigurationsresponse.configuration || []
        this.count = response.listconfigurationsresponse.count || 0
        if (this.group.length > 0) {
          config = this.convertConfigToHierarchy(config)
        }
        this.config = config
        window.scrollTo(0, 0)
      }).catch(error => {
        console.error(error)
        this.$message.error(this.$t('message.error.loading.setting'))
      }).finally(() => {
        this.configLoading = false
      })
    },
    convertConfigToHierarchy (config) {
      var hierarchy = {}
      for (var c of config) {
        if (c.parent && c.parent.length !== 0) {
          if (hierarchy[c.parent]) {
            hierarchy[c.parent].push(c)
          } else {
            hierarchy[c.parent] = [c]
          }
        }
      }
      for (c of config) {
        if (hierarchy[c.name]) {
          c.children = hierarchy[c.name]
        }
      }
      config = config.filter(c => !c.parent)
      return config
    },
    changePage (page, pagesize) {
      const query = {}
      if (page) {
        query.page = page
        this.page = page
      } else {
        this.page = 1
      }
      if (pagesize) {
        query.pagesize = pagesize
        this.pagesize = pagesize
      }
      if (this.filter) {
        query.filter = this.filter
      }
      if (this.group !== '') {
        query.group = this.group
      }
      if (this.subgroup !== '') {
        query.subgroup = this.subgroup
      }
      this.pushToHistory(query)
      this.fetchConfigurationData()
    },
    pushToHistory (query) {
      history.pushState(
        {},
        null,
        '#' + this.$route.path + '?' + Object.keys(query).map(key => {
          return (
            encodeURIComponent(key) + '=' + encodeURIComponent(query[key])
          )
        }).join('&')
      )
    },
    changeGroupTab (e) {
      this.group = e
      if (this.group.length > 0) {
        for (const groupIndex in this.groups) {
          if (this.groups[groupIndex].name === this.group) {
            const group = this.groups[groupIndex]
            this.subgroup = group.subgroup[0].name
          }
        }
      } else {
        this.group = ''
        this.subgroup = ''
        this.changePage(1, this.pagesize)
      }
      if (this.group.length > 0 && this.subgroup.length > 0) {
        const query = Object.assign({}, this.$route.query)
        delete query.page
        delete query.pagesize
        query.group = this.group
        query.subgroup = this.subgroup
        query.filter = this.filter
        // this.pagesize = -1
        this.page = 0
        this.pushToHistory(query)
        this.fetchConfigurationData()
      }
    },
    changeSubgroupTab (e) {
      this.subgroup = e || this.subgroup
      if (this.group.length > 0 && this.subgroup.length > 0) {
        const query = Object.assign({}, this.$route.query)
        delete query.page
        delete query.pagesize
        query.group = this.group
        query.subgroup = this.subgroup
        // this.pagesize = -1
        this.page = 0
        this.pushToHistory(query)
        this.fetchConfigurationData()
      } else {
        history.pushState(
          {},
          null,
          '#' + this.$route.path
        )
      }
    }
  }
}

</script>

<style scoped lang="scss">
  .breadcrumb-card {
    margin-left: -24px;
    margin-right: -24px;
    margin-top: -16px;
    margin-bottom: 12px;
  }

  .shift-btns {
    display: flex;
  }

  .shift-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    font-size: 12px;

    &:not(:last-child) {
      margin-right: 5px;
    }

    &--rotated {
      font-size: 10px;
      transform: rotate(90deg);
    }

  }

  .alert-notification-threshold {
    background-color: rgba(255, 231, 175, 0.75);
    color: #e87900;
    padding: 10%;
  }

  .alert-disable-threshold {
    background-color: rgba(255, 190, 190, 0.75);
    color: #f50000;
    padding: 10%;
  }
</style>