<!--

    Licensed 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>
  <div class="app-container">
    <div class="createPost-container">
      <el-form :inline="true" :model="postForm" class="form-container">
        <el-form-item :label="$t('tenant.label')">
          <el-select v-model="postForm.tenant" placeholder="select tenant" style="width: 150px;" @change="getNamespacesList(postForm.tenant)">
            <el-option v-for="(item,index) in tenantsListOptions" :key="item+index" :label="item" :value="item"/>
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('namespace.label')">
          <el-select v-model="postForm.namespace" placeholder="select namespace" style="width: 150px;" @change="getTopicsList()">
            <el-option v-for="(item,index) in namespacesListOptions" :key="item+index" :label="item" :value="item"/>
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('topic.label')">
          <el-select v-model="postForm.topic" placeholder="select topic" style="width: 150px;" @change="generatePartitions()">
            <el-option v-for="(item,index) in topicsListOptions" :key="item+index" :label="item" :value="item"/>
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('topic.partition')">
          <el-select v-model="postForm.partition" :disabled="partitionDisabled" placeholder="select partition" style="width: 150px;" @change="getSubscriptionsList()">
            <el-option v-for="(item,index) in partitionsListOptions" :key="item+index" :label="item" :value="item"/>
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('topic.subscription.label')">
          <el-select v-model="postForm.subscription" placeholder="select subscription" style="width: 150px;" @change="getSubscriptionsInfo()">
            <el-option v-for="(item,index) in subscriptionsListOptions" :key="item+index" :label="item" :value="item"/>
          </el-select>
        </el-form-item>
      </el-form>
      <el-form v-if="replicatedClusters.length > 0" :inline="true" :model="clusterForm" class="form-container">
        <el-form-item :label="$t('table.cluster')">
          <el-radio-group v-model="clusterForm.cluster" @change="onClusterChanged()">
            <el-radio-button
              v-for="cluster in replicatedClusters"
              :key="cluster"
              :label="cluster"/>
          </el-radio-group>
        </el-form-item>
      </el-form>
    </div>
    <el-tabs v-model="topActiveName" @tab-click="handleClick">
      <el-tab-pane :label="$t('topic.consumer.consumers')" name="consumers">
        <el-row :gutter="24">
          <el-col :xs="{span: 24}" :sm="{span: 24}" :md="{span: 24}" :lg="{span: 24}" :xl="{span: 24}">
            <el-table
              v-loading="consumersListLoading"
              :key="consumerTableKey"
              :data="consumersList"
              border
              fit
              highlight-current-row
              style="width: 100%;">
              <el-table-column :label="$t('topic.consumer.name')" min-width="30px" align="center">
                <template slot-scope="scope">
                  <span>{{ scope.row.consumerName }}</span>
                </template>
              </el-table-column>
              <el-table-column :label="$t('common.outMsg')" min-width="30px" align="center">
                <template slot-scope="scope">
                  <span>{{ scope.row.outMsg }}</span>
                </template>
              </el-table-column>
              <el-table-column :label="$t('common.outBytes')" min-width="30px" align="center">
                <template slot-scope="scope">
                  <span>{{ scope.row.outBytes }}</span>
                </template>
              </el-table-column>
              <el-table-column :label="$t('topic.consumer.avgMsgSize')" min-width="30px" align="center">
                <template slot-scope="scope">
                  <span>{{ scope.row.avgMsgSize }}</span>
                </template>
              </el-table-column>
              <el-table-column :label="$t('topic.consumer.address')" min-width="30px" align="center">
                <template slot-scope="scope">
                  <span>{{ scope.row.address }}</span>
                </template>
              </el-table-column>
              <el-table-column :label="$t('topic.consumer.since')" min-width="30px" align="center">
                <template slot-scope="scope">
                  <span>{{ scope.row.since }}</span>
                </template>
              </el-table-column>
            </el-table>
          </el-col>
        </el-row>
      </el-tab-pane>
      <el-tab-pane :label="$t('topic.backlogOpeartion')" name="backlogOperation">
        <el-tabs v-model="leftActiveName" :tab-position="tabPosition" @tab-click="handleLeftTabClick">
          <!-- <el-tab-pane label="INSPECT" name="inspect">
            <el-form :inline="true" :model="form">
              <el-button type="primary" @click="handlePeekMessages">Peek</el-button>
              <el-form-item>
                <el-input v-model="form.peekNumMessages" placeholder="messages"/>
              </el-form-item>
              <span>messages</span>
            </el-form>
            <el-row :gutter="24" style="margin-top:15px">
              <el-col :xs="{span: 24}" :sm="{span: 24}" :md="{span: 24}" :lg="{span: 24}" :xl="{span: 24}" style="padding-right:8px;margin-bottom:30px;">
                <el-table
                  v-loading="inspectListLoading"
                  :key="inspectTableKey"
                  :data="inspectsList"
                  border
                  fit
                  highlight-current-row
                  style="width: 100%;">
                  <el-table-column label="Message ID" min-width="10px" align="center">
                    <template slot-scope="scope">
                      <span>{{ scope.row.messageId }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="data" min-width="30px" align="center">
                    <template slot-scope="scope">
                      <span>{{ scope.row.data }}</span>
                    </template>
                  </el-table-column>
                </el-table>
              </el-col>
            </el-row>
          </el-tab-pane> -->
          <el-tab-pane :label="$t('topic.subscription.skip')" name="skip">
            <el-form :inline="true" :model="form">
              <el-button type="primary" @click="handleSkipMessages">{{ $t('topic.subscription.skip') }}</el-button>
              <el-form-item>
                <el-input v-model="form.skipNumMessages" placeholder="messages"/>
              </el-form-item>
              <span>{{ $t('topic.subscription.skipMessage') }}</span>
            </el-form>
          </el-tab-pane>
          <el-tab-pane :label="$t('topic.subscription.expire')" name="expire">
            <el-form :inline="true" :model="form">
              <el-button type="primary" @click="handleExpireMessages">{{ $t('topic.subscription.expire') }}</el-button>
              <el-form-item>
                <el-input v-model="form.expireNumMessages" placeholder="messages"/>
              </el-form-item>
              <span>{{ $t('topic.subscription.expireMessage') }}</span>
            </el-form>
          </el-tab-pane>
          <el-tab-pane :label="$t('topic.subscription.clear')" name="clear">
            <el-form :inline="true" :model="form">
              <el-button type="primary" @click="handleClearBacklog">{{ $t('topic.subscription.clear') }}</el-button>
              <span>{{ $t('topic.subscription.clearMessage') }}</span>
            </el-form>
          </el-tab-pane>
          <el-tab-pane :label="$t('topic.subscription.reset')" name="reset">
            <el-form :inline="true" :model="form">
              <el-button type="primary" @click="handleResetCursorByTime">{{ $t('topic.subscription.resetByTimeMessage') }}</el-button>
              <span>The cursor to</span>
              <el-form-item>
                <el-input v-model="form.minutes" placeholder="minutes"/>
              </el-form-item>
              <span>{{ $t('topic.subscription.mins') }}</span>
              <br>
              <el-button type="primary" @click="handleResetCursorByMessageId">{{ $t('topic.subscription.resetById') }}</el-button>
              <span>{{ $t('topic.subscription.messageId') }}</span>
              <el-form-item>
                <el-select v-model="form.ledgerValue" :placeholder="$t('topic.segment.ledgerId')" style="width:150px">
                  <el-option
                    v-for="item in ledgerOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"/>
                </el-select>
                <el-input v-model="form.messagesId" :placeholder="$t('topic.subscription.messageId')" style="width: 150px"/>
              </el-form-item>
            </el-form>
          </el-tab-pane>
        </el-tabs>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { fetchTenants } from '@/api/tenants'
import { fetchNamespaces, getClusters } from '@/api/namespaces'
import {
  fetchTopicsByPulsarManager,
  fetchTopicStats,
  // peekMessages,
  skipOnCluster,
  expireMessageOnCluster,
  clearBacklogOnCluster,
  fetchTopicStatsInternal,
  resetCursorByTimestampOnCluster,
  resetCursorByPositionOnCluster
} from '@/api/topics'
import { fetchSubscriptions } from '@/api/subscriptions'
import { formatBytes } from '@/utils/index'
import { numberFormatter } from '@/filters/index'

const defaultForm = {
  persistent: '',
  tenant: '',
  namespace: '',
  topic: '',
  partition: '',
  subscription: ''
}
const defaultClusterForm = {
  cluster: ''
}
export default {
  name: 'SubscriptionInfo',
  data() {
    return {
      postForm: Object.assign({}, defaultForm),
      clusterForm: Object.assign({}, defaultClusterForm),
      subscriptionsListOptions: [],
      replicatedClusters: [],
      topActiveName: 'consumers',
      leftActiveName: '',
      currentTopTabName: 'consumers',
      currentLeftTabName: 'skip',
      tenantsListOptions: [],
      namespacesListOptions: [],
      topicsListOptions: [],
      consumersListLoading: false,
      consumerTableKey: 0,
      consumersList: [],
      consumersTotal: 0,
      consumersListQuery: {
        page: 0,
        limit: 1
      },
      inspectsList: [],
      inspectTableKey: 0,
      inspectListLoading: false,
      tabPosition: 'left',
      form: {
        peekNumMessages: 0,
        skipNumMessages: 0,
        expireNumMessages: 10,
        minutes: '0',
        messagesId: '',
        ledgerValue: ''
      },
      firstInitNamespace: false,
      firstInitTopic: false,
      firstInitSubscription: false,
      ledgerOptions: [],
      partitionsListOptions: [],
      topicPartitions: {},
      partitionDisabled: false
    }
  },
  created() {
    this.postForm.persistent = this.$route.params && this.$route.params.persistent
    this.postForm.tenant = this.$route.params && this.$route.params.tenant
    this.postForm.namespace = this.$route.params && this.$route.params.namespace
    this.postForm.topic = this.$route.params && this.$route.params.topic
    if (this.postForm.topic.indexOf('-partition-') > 0) {
      var splitTopic = this.postForm.topic.split('-partition-')
      this.postForm.partition = splitTopic[1]
      this.postForm.topic = splitTopic[0]
    } else {
      this.postForm.partition = '-1'
      this.partitionDisabled = true
    }
    this.tenantNamespaceTopic = this.postForm.tenant + '/' + this.postForm.namespace + '/' + this.postForm.topic
    this.postForm.subscription = this.$route.params && this.$route.params.subscription
    this.firstInitNamespace = true
    this.firstInitTopic = true
    this.firstInitSubscription = true
    if (this.$route.query && this.$route.query.topTab) {
      this.topActiveName = this.$route.query.topTab
      this.currentTopTabName = this.$route.query.topTab
      if (this.$route.query.leftTab) {
        this.leftActiveName = this.$route.query.leftTab
      }
    }
    this.getRemoteTenantsList()
    this.getNamespacesList(this.postForm.tenant)
    this.getReplicatedClusters()
    this.getTopicsList()
    this.initTopicStats()
    this.handleStatsInternal()
  },
  methods: {
    generatePartitions() {
      var partitions = parseInt(this.topicPartitions[this.postForm.topic])
      this.partitionsListOptions = []
      if (partitions > 0) {
        this.partitionDisabled = false
        if (this.postForm.partition === '-1') {
          this.postForm.partition = ''
        }
        for (var i = 0; i < partitions; i++) {
          this.partitionsListOptions.push(i)
        }
        if (this.firstInitSubscription) {
          this.getSubscriptionsList()
        } else {
          this.subscriptionsListOptions = []
          this.postForm.subscription = ''
        }
      } else {
        this.partitionDisabled = true
        this.postForm.partition = '-1'
        this.partitionsListOptions.push('-1')
        this.getSubscriptionsList()
      }
    },
    getRemoteTenantsList() {
      fetchTenants().then(response => {
        if (!response.data) return
        for (var i = 0; i < response.data.total; i++) {
          this.tenantsListOptions.push(response.data.data[i].tenant)
        }
      })
    },
    getReplicatedClusters() {
      if (this.postForm.tenant && this.postForm.namespace) {
        getClusters(this.postForm.tenant, this.postForm.namespace).then(response => {
          if (!response.data) {
            return
          }
          this.replicatedClusters = response.data
          if (response.data.length > 0) {
            this.clusterForm.cluster = this.routeCluster || this.replicatedClusters[0]
          }
        })
      }
    },
    getCurrentCluster() {
      return this.clusterForm.cluster || ''
    },
    getNamespacesList(tenant) {
      let namespace = []
      this.namespacesListOptions = []
      this.topicsListOptions = []
      this.partitionsListOptions = []
      this.subscriptionsListOptions = []
      if (this.firstInitNamespace) {
        this.firstInitNamespace = false
      } else {
        this.postForm.namespace = ''
        this.postForm.topic = ''
        this.postForm.partition = ''
        this.postForm.subscription = ''
      }
      fetchNamespaces(tenant, this.query).then(response => {
        if (!response.data) return
        for (var i = 0; i < response.data.data.length; i++) {
          namespace = response.data.data[i].namespace
          this.namespacesListOptions.push(namespace)
        }
      })
    },
    getTopicsList() {
      this.getReplicatedClusters()
      this.topicsListOptions = []
      this.partitionsListOptions = []
      this.subscriptionsListOptions = []
      if (this.firstInitTopic) {
        this.firstInitTopic = false
      } else {
        this.postForm.topic = ''
        this.postForm.partition = ''
        this.postForm.subscription = ''
      }
      fetchTopicsByPulsarManager(this.postForm.tenant, this.postForm.namespace).then(response => {
        if (!response.data) return
        for (var i in response.data.topics) {
          this.topicsListOptions.push(response.data.topics[i]['topic'])
          this.topicPartitions[response.data.topics[i]['topic']] = response.data.topics[i]['partitions']
          if (response.data.topics[i]['topic'] === this.postForm.topic) {
            this.generatePartitions()
          }
        }
      })
    },
    getSubscriptionsList() {
      fetchSubscriptions(this.postForm.persistent, this.getFullTopic()).then(response => {
        if (!response.data) return
        if (this.firstInitSubscription) {
          this.firstInitSubscription = false
        } else {
          this.subscriptionsListOptions = []
          this.postForm.subscription = ''
        }
        for (var i in response.data) {
          this.subscriptionsListOptions.push(response.data[i])
        }
      })
    },
    getSubscriptionsInfo() {
      this.$router.push({ path: '/management/subscriptions/' + this.postForm.persistent +
        '/' + this.getFullTopic() + '/' + this.postForm.subscription + '/subscription?topTab=' +
        this.currentTopTabName + '&leftTab=' + this.currentLeftTabName })
    },
    handleStatsInternal() {
      fetchTopicStatsInternal(this.postForm.persistent, this.getFullTopic()).then(response => {
        if (!response.data) return
        for (var i in response.data.ledgers) {
          this.ledgerOptions.push({
            value: response.data.ledgers[i]['ledgerId'],
            label: response.data.ledgers[i]['ledgerId']
          })
        }
      })
    },
    getFullTopic() {
      var fullTopic = this.postForm.tenant + '/' + this.postForm.namespace + '/' + this.postForm.topic
      if (parseInt(this.postForm.partition) >= 0) {
        fullTopic += '-partition-' + this.postForm.partition
      }
      return fullTopic
    },
    initTopicStats() {
      fetchTopicStats(this.postForm.persistent, this.getFullTopic()).then(response => {
        if (!response.data) return
        if (response.data.subscriptions.hasOwnProperty(this.postForm.subscription)) {
          var subscription = response.data.subscriptions[this.postForm.subscription]
          if (subscription.hasOwnProperty('consumers')) {
            var consumers = subscription['consumers']
            for (var s in consumers) {
              this.consumersList.push({
                'consumerName': consumers[s].consumerName,
                'outMsg': numberFormatter(consumers[s].msgRateOut, 2),
                'outBytes': formatBytes(consumers[s].msgThroughputOut),
                'avgMsgSize': formatBytes(response.data.averageMsgSize),
                'address': consumers[s].address,
                'since': consumers[s].connectedSince
              })
            }
          }
        }
      })
    },
    handleClick(tab, event) {
      this.currentTopTabName = tab.name
      if (this.currentTopTabName === 'backlogOperation') {
        this.$router.push({ query: { 'topTab': tab.name, 'leftTab': this.currentLeftTabName }})
      } else {
        this.$router.push({ query: { 'topTab': tab.name }})
      }
    },
    handleLeftTabClick(tab, event) {
      this.currentLeftTabName = tab.name
    },
    getConsumers() {
    },
    // To do, parse message
    // handlePeekMessages() {
    //   if (this.form.peekNumMessages <= 0) {
    //     this.$notify({
    //       title: 'error',
    //       message: 'Messages should greater than 0',
    //       type: 'error',
    //       duration: 3000
    //     })
    //     return
    //   }
    //   peekMessages(this.postForm.persistent, this.tenantNamespaceTopic, this.postForm.subscription, this.form.peekNumMessages).then(response => {
    //     if (!response.data) return
    //     console.log(response)
    //     console.log(response.data)
    //   })
    // },
    handleSkipMessages() {
      if (this.form.skipNumMessages <= 0) {
        this.$notify({
          title: 'error',
          message: 'Messages should greater than 0',
          type: 'error',
          duration: 3000
        })
        return
      }
      skipOnCluster(this.getCurrentCluster(), this.postForm.persistent, this.getFullTopic(), this.postForm.subscription, this.form.skipNumMessages).then(response => {
        this.$notify({
          title: 'success',
          message: 'Messages skip success',
          type: 'success',
          duration: 3000
        })
      })
    },
    handleExpireMessages() {
      if (this.form.expireMessages <= 0) {
        this.$notify({
          title: 'error',
          message: 'Messages should greater than 0',
          type: 'error',
          duration: 3000
        })
        return
      }
      expireMessageOnCluster(this.getCurrentCluster(), this.postForm.persistent, this.getFullTopic(), this.postForm.subscription, this.form.expireNumMessages).then(response => {
        this.$notify({
          title: 'success',
          message: 'Messages expire success',
          type: 'success',
          duration: 3000
        })
      })
    },
    handleClearBacklog() {
      clearBacklogOnCluster(this.getCurrentCluster(), this.postForm.persistent, this.getFullTopic(), this.postForm.subscription).then(response => {
        this.$notify({
          title: 'success',
          message: 'Clear messages success',
          type: 'success',
          duration: 3000
        })
      })
    },
    handleResetCursorByTime() {
      if (parseInt(this.form.minutes) <= 0) {
        this.$notify({
          title: 'error',
          message: 'Minutes cannot be less than 0',
          type: 'error',
          duration: 3000
        })
        return
      }
      var dateTime = new Date().getTime()
      var timestamp = Math.floor(dateTime) - parseInt(this.form.minutes) * 60 * 1000
      resetCursorByTimestampOnCluster(
        this.getCurrentCluster(),
        this.postForm.persistent,
        this.getFullTopic(),
        this.postForm.subscription, timestamp).then(response => {
        this.$notify({
          title: 'success',
          message: 'Reset cursor success',
          type: 'success',
          duration: 3000
        })
      })
    },
    handleResetCursorByMessageId() {
      if (this.form.messagesId.length <= 0 && this.form.ledgerValue != null) {
        this.$notify({
          title: 'error',
          message: 'Message Id cannot be less than 0',
          type: 'error',
          duration: 3000
        })
        return
      }
      var data = {
        'ledgerId': this.form.ledgerValue,
        'entryId': parseInt(this.form.messagesId)
      }
      resetCursorByPositionOnCluster(this.getCurrentCluster(), this.postForm.persistent, this.getFullTopic(), this.postForm.subscription, data).then(response => {
        this.$notify({
          title: 'success',
          message: 'Reset cursor success',
          type: 'success',
          duration: 3000
        })
      })
    },
    handleFilterConsumer() {

    }
  }
}
</script>