<template>
  <div class="app-container">
    <el-button type="primary" icon="el-icon-plus" @click="handleCreateToken">{{ $t('token.buttonNewToken') }}</el-button>

    <el-row :gutter="24">
      <el-col :xs="{span: 24}" :sm="{span: 24}" :md="{span: 24}" :lg="{span: 24}" :xl="{span: 24}" style="margin-top:15px">
        <el-table
          v-loading="tokenListLoading"
          :key="tokenTableKey"
          :data="tokenList"
          border
          fit
          highlight-current-row
          style="width: 100%;">
          <el-table-column :label="$t('token.colHeadingRole')" min-width="50px" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.role }}</span>
            </template>
          </el-table-column>
          <el-table-column :label="$t('token.colHeadingToken')" align="center" min-width="100px">
            <template slot-scope="scope">
              <el-link @click="handleGetToken(scope.row)">{{ scope.row.token }}<i class="el-icon-view el-icon--right"/></el-link>
            </template>
          </el-table-column>
          <el-table-column :label="$t('token.colHeadingDesc')" align="center" min-width="100px">
            <template slot-scope="scope">
              <span>{{ scope.row.description }}</span>
            </template>
          </el-table-column>
          <el-table-column :label="$t('table.actions')" align="center" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <el-button type="primary" size="mini" @click="handleUpdateToken(scope.row)">{{ $t('table.edit') }}</el-button>
              <el-button size="mini" type="danger" @click="handleDeleteToken(scope.row)">{{ $t('table.delete') }}</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>

    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" width="30%">
      <el-form ref="form" :rules="rules" :model="form" label-position="top">
        <el-form-item v-if="dialogStatus==='create'" :label="$t('token.colHeadingRole')" prop="role">
          <el-input v-model="form.role" :placeholder="$t('token.newTokenRolePlaceholder')"/>
        </el-form-item>
        <el-form-item v-if="dialogStatus==='create'" :label="$t('token.colHeadingDesc')">
          <el-input :rows="2" v-model="form.description" :placeholder="$t('token.newTokenDescPlaceholder')" type="textarea"/>
        </el-form-item>
        <el-form-item v-if="dialogStatus==='update'" :label="$t('token.colHeadingRole')">
          <el-tag type="primary" size="medium">{{ form.role }}</el-tag>
        </el-form-item>
        <el-form-item v-if="dialogStatus==='update'" :label="$t('token.colHeadingDesc')">
          <el-input v-model="form.description" :placeholder="$t('token.newTokenDescPlaceholder')" type="textarea"/>
        </el-form-item>
        <el-form-item v-if="dialogStatus==='delete'">
          <h4>Delete Role {{ form.role }}</h4>
        </el-form-item>
        <el-form-item v-if="dialogStatus==='get'" :label="$t('token.colHeadingRole')">
          <el-tag type="primary" size="medium">{{ form.role }}</el-tag>
        </el-form-item>
        <el-form-item v-if="dialogStatus==='get'" :label="$t('token.colHeadingToken')">
          <span type="primary" size="medium">{{ form.token }}</span>
        </el-form-item>
        <el-form-item v-if="dialogStatus==='get'" :label="$t('token.colHeadingDesc')">
          <span>{{ form.description }}</span>
        </el-form-item>
        <el-form-item v-if="dialogStatus!=='get'">
          <el-button type="primary" @click="handleOptions()">{{ $t('table.confirm') }}</el-button>
          <el-button @click="dialogFormVisible = false">{{ $t('table.cancel') }}</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { putToken, fetchTokens, updateToken, deleteToken, getToken } from '@/api/tokens'

export default {
  name: 'TokensInfo',
  data() {
    return {
      tokenList: [],
      tokenTableKey: 0,
      tokenListLoading: false,
      textMap: {
        create: 'New Token',
        delete: 'Delete Token',
        update: 'Update Token'
      },
      dialogFormVisible: false,
      dialogStatus: '',
      form: {
        token: '',
        role: '',
        description: ''
      },
      temp: {
        'token': '',
        'role': '',
        'description': ''
      },
      description: '',
      rules: {
        token: [{ required: true, message: this.$i18n.t('token.newTokenRequiredMessage'), trigger: 'blur' }]
      }
    }
  },
  created() {
    this.getTokens()
  },
  methods: {
    getTokens() {
      fetchTokens().then(response => {
        if (!response.data) return
        this.tokenList = []
        for (var i = 0; i < response.data.data.length; i++) {
          this.tokenList.push({
            'token': 'view',
            'role': response.data.data[i].role,
            'description': response.data.data[i].description
          })
        }
      })
    },
    handleCreateToken() {
      this.form.token = ''
      this.form.role = ''
      this.form.description = ''
      this.dialogFormVisible = true
      this.dialogStatus = 'create'
    },
    handleDeleteToken(row) {
      this.temp.token = row.token
      this.temp.role = row.role
      this.temp.description = row.description
      this.dialogFormVisible = true
      this.dialogStatus = 'delete'
    },
    handleUpdateToken(row) {
      this.form.role = row.role
      this.form.description = row.description
      this.dialogFormVisible = true
      this.dialogStatus = 'update'
    },
    handleOptions() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          switch (this.dialogStatus) {
            case 'create':
              this.createToken()
              break
            case 'delete':
              this.deleteToken()
              break
            case 'update':
              this.updateToken()
              break
          }
        }
      })
    },
    createToken() {
      const data = {
        'role': this.form.role,
        'token': '',
        'description': this.form.description
      }
      putToken(data).then(response => {
        if (!response.data) return
        if (response.data.hasOwnProperty('error')) {
          this.$notify({
            title: 'error',
            message: response.data.error,
            type: 'error',
            duration: 2000
          })
          return
        }
        this.$notify({
          title: 'success',
          message: this.$i18n.t('token.addTokenSuccessNotification'),
          type: 'success',
          duration: 2000
        })
        this.dialogFormVisible = false
        this.getTokens()
      })
    },
    deleteToken() {
      deleteToken(this.temp.role).then(response => {
        if (!response.data) return
        if (response.data.hasOwnProperty('error')) {
          this.$notify({
            title: 'error',
            message: response.data.error,
            type: 'error',
            duration: 2000
          })
          return
        }
        this.$notify({
          title: 'success',
          message: this.$i18n.t('token.deleteTokenSuccessNotification'),
          type: 'success',
          duration: 2000
        })
        this.getTokens()
        this.dialogFormVisible = false
      })
    },
    updateToken() {
      const data = {
        'role': this.form.role,
        'description': this.form.description
      }
      updateToken(data).then(response => {
        if (!response.data) return
        if (response.data.hasOwnProperty('error')) {
          this.$notify({
            title: 'error',
            message: response.data.error,
            type: 'error',
            duration: 2000
          })
          return
        }
        this.$notify({
          title: 'success',
          message: this.$i18n.t('token.updateTokenSucccessNotification'),
          type: 'success',
          duration: 2000
        })
        this.getTokens()
        this.dialogFormVisible = false
      })
    },
    handleGetToken(row) {
      getToken(row.role).then(response => {
        if (!response.data) return
        if (response.data.hasOwnProperty('error')) {
          this.$notify({
            title: 'error',
            message: response.data.error,
            type: 'error',
            duration: 2000
          })
          return
        }
        this.form.token = response.data.token
        this.form.role = response.data.role
        this.form.description = response.data.description
        this.dialogFormVisible = true
        this.dialogStatus = 'get'
      })
    }
  }
}
</script>