<i18n>
{
  "en": {
    "efi": "EFI",
    "bios": "BIOS",
    "general": "general.h",
    "console": "console.h",
    "script": "Embedded script (EMBED=)",
    "trust": "Embedded certificate (TRUST=)",
    "ipxe": "iPXE",
    "buildIpxe": "Build iPXE",
    "scriptSaved": "Embedded script saved successfully",
    "certificateSaved": "Certificate saved successfully",
    "generalSaved": "general.h saved successfully",
    "consoleSaved": "console.h saved successfully",
    "buildingIpxe": "Building iPXE ...",
    "cleanIpxe": "Clean iPXE",
    "cleaningIpxe": "Cleaning iPXE ...",
    "alreadyBuiling": "The iPXE building process not finished",
    "cancelIpxe": "Cancel iPXE"
  },
  "de": {
    "efi": "EFI",
    "bios": "BIOS",
    "general": "general.h",
    "console": "console.h",
    "script": "Eingebettetes Skript (EMBED=)",
    "trust": "Eingebettetes Zertifikat (TRUST=)",
    "ipxe": "iPXE",
    "buildIpxe": "iPXE bauen",
    "scriptSaved": "Eingebettetes Skript wurde erfolgreich gespeichert",
    "certificateSaved": "Zertifikat wurde erfolgreich gespeichert",
    "generalSaved": "general.h wurde erfolgreich gespeichert",
    "consoleSaved": "console.h wurde erfolgreich gespeichert",
    "buildingIpxe": "iPXE wird gebaut ...",
    "cleanIpxe": "iPXE aufräumen",
    "cleaningIpxe": "iPXE wird aufgeräumt ..",
    "alreadyBuiling": "Der iPXE build-Prozess ist noch nicht abgeschlossen",
    "cancelIpxe": "iPXE stoppen"
  }
}
</i18n>

<template>
  <div>

    <v-subheader>{{ $t('ipxe') }}</v-subheader>
    <v-card style="height: 588px;" ref="log">
      <RecycleScroller :items="log" :item-size="21" style="height: 100%;">
        <div slot-scope="{ item }" style="height: 21px;">
          <pre :class="item.status + '--text'" style="margin-bottom: 0px"><span>{{ item.date }} {{ item.msg }}</span></pre>
        </div>
      </RecycleScroller>

      <!--
      <v-card style="padding-left: 24px;padding-right: 24px; padding-top: 12px; padding-bottom: 12px; height: 50vh; overflow: auto;" ref="log">
      <template v-for="(entry, index) in log">
      <pre :class="entry.status + '--text'" style="margin-bottom: 0px" :key="index"><span>{{ entry.date }} {{ entry.msg }}</span></pre>
      </template>-->
    </v-card>
    <div class="text-xs-right">
      <v-btn flat color="error" @click="cleanIpxe" :disabled=disableButtons><v-icon left>delete</v-icon>{{ $t('cleanIpxe') }}</v-btn>
      <v-btn flat color="warning" @click="cancelIpxe" :disabled=!disableButtons><v-icon left>cancel</v-icon>{{ $t('cancelIpxe') }}</v-btn>
      <v-btn flat color="primary" @click="buildIpxe" :disabled=disableButtons><v-icon left>gavel</v-icon>{{ $t('buildIpxe') }}</v-btn>
    </div>

    <v-subheader></v-subheader>
    <v-expansion-panel v-model="scriptExpanded">
       <v-expansion-panel-content>
        <div slot="header">{{ $t('script') }}</div>
        <v-card>
          <codemirror class="script-editor" ref="script" v-model="script"></codemirror>
        </v-card>
        <!--<v-divider></v-divider>-->
        <div class="text-xs-right">
          <v-btn flat color="error" @click="undo('script')"><v-icon left>undo</v-icon>{{ $t('undo') }}</v-btn>
          <v-btn flat color="success" @click="redo('script')"><v-icon left>redo</v-icon>{{ $t('redo') }}</v-btn>
          <v-btn color="primary" @click="save('script')"><v-icon left>save</v-icon>{{ $t('save') }}</v-btn>
        </div>
      </v-expansion-panel-content>
    </v-expansion-panel>

    <v-subheader></v-subheader>
    <v-expansion-panel v-model="certificateExpanded">
       <v-expansion-panel-content>
        <div slot="header">{{ $t('trust') }}</div>
        <v-card>
          <codemirror class="script-editor" ref="certificate" v-model="certificate"></codemirror>
        </v-card>
        <!--<v-divider></v-divider>-->
        <div class="text-xs-right">
          <v-btn flat color="error" @click="undo('certificate')"><v-icon left>undo</v-icon>{{ $t('undo') }}</v-btn>
          <v-btn flat color="success" @click="redo('certificate')"><v-icon left>redo</v-icon>{{ $t('redo') }}</v-btn>
          <v-btn color="primary" @click="save('certificate')"><v-icon left>save</v-icon>{{ $t('save') }}</v-btn>
        </div>
      </v-expansion-panel-content>
    </v-expansion-panel>

    <v-subheader></v-subheader>
    <v-expansion-panel v-model="generalExpanded">
       <v-expansion-panel-content>
        <div slot="header">{{ $t('general') }}</div>
        <v-card>
          <codemirror class="script-editor" ref="general" v-model="general"></codemirror>
        </v-card>
        <!--<v-divider></v-divider>-->
        <div class="text-xs-right">
          <v-btn flat color="error" @click="undo('general')"><v-icon left>undo</v-icon>{{ $t('undo') }}</v-btn>
          <v-btn flat color="success" @click="redo('general')"><v-icon left>redo</v-icon>{{ $t('redo') }}</v-btn>
          <v-btn color="primary" @click="save('general')"><v-icon left>save</v-icon>{{ $t('save') }}</v-btn>
        </div>
      </v-expansion-panel-content>
    </v-expansion-panel>

    <v-subheader></v-subheader>
    <v-expansion-panel v-model="consoleExpanded">
       <v-expansion-panel-content>
        <div slot="header">{{ $t('console') }}</div>
        <v-card>
          <codemirror class="script-editor" ref="console" v-model="console"></codemirror>
        </v-card>
        <!--<v-divider></v-divider>-->
        <div class="text-xs-right">
          <v-btn flat color="error" @click="undo('console')"><v-icon left>undo</v-icon>{{ $t('undo') }}</v-btn>
          <v-btn flat color="success" @click="redo('console')"><v-icon left>redo</v-icon>{{ $t('redo') }}</v-btn>
          <v-btn color="primary" @click="save('console')"><v-icon left>save</v-icon>{{ $t('save') }}</v-btn>
        </div>
      </v-expansion-panel-content>
    </v-expansion-panel>

  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import axios from 'axios'

export default {
  name: 'IpxeBuilderModuleConfig',
  props: ['ipxeVersion'],
  components: {
  },
  data () {
    return {
      tabs: 0,
      script: '',
      certificate: '',
      general: '',
      console: '',
      scriptExpanded: null,
      certificateExpanded: null,
      generalExpanded: null,
      consoleExpanded: null,
      log: [],
      disableButtons: false
    }
  },
  computed: {
    ...mapGetters(['tabsDark', 'tabsColor', 'tabsSliderColor'])
  },
  watch: {
    scriptExpanded: function () {
      if (this.scriptExpanded === 0) this.$refs.script.refresh()
    },
    certificateExpanded: function () {
      if (this.certificateExpanded === 0) this.$refs.certificate.refresh()
    },
    generalExpanded: function () {
      if (this.generalExpanded === 0) this.$refs.general.refresh()
    },
    consoleExpanded: function () {
      if (this.consoleExpanded === 0) this.$refs.console.refresh()
    }
  },
  methods: {
    save (apiPath) {
      axios.put('/api/ipxe/' + this.ipxeVersion + '/' + apiPath, { data: this[apiPath] }).then(result => {
        const saveMsg = apiPath + 'Saved'
        if (result.data.status === 'SUCCESS') this.$snackbar({ color: 'success', text: this.$tc(saveMsg) })
        else this.$snackbar({ color: 'error', text: result.data.error })
      })
    },
    undo (element) {
      this.$refs[element].codemirror.undo()
    },
    redo (element) {
      this.$refs[element].codemirror.redo()
    },
    buildIpxe () {
      axios.get('/api/ipxe/' + this.ipxeVersion + '/build').then(result => {
        if (result.data.status === 'SUCCESS') this.$snackbar({ color: 'primary', text: this.$tc('buildingIpxe') })
        else if (result.data.status === 'ALREADY_BUILDING') this.$snackbar({ color: 'error', text: this.$tc('alreadyBuiling') })
      })
    },
    cleanIpxe () {
      axios.get('/api/ipxe/' + this.ipxeVersion + '/clean').then(result => {
        if (result.data.status === 'SUCCESS') this.$snackbar({ color: 'primary', text: this.$tc('cleaningIpxe') })
        else if (result.data.status === 'ALREADY_BUILDING') this.$snackbar({ color: 'error', text: this.$tc('alreadyBuiling') })
      })
    },
    cancelIpxe () {
      axios.get('/api/ipxe/' + this.ipxeVersion + '/cancel').then(result => {
        if (result.data.status === 'SUCCESS') this.$snackbar({ color: 'primary', text: this.$tc('cleaningIpxe') }) // TODO:
      })
    }
  },
  created () {
    // Load the data.
    axios.get('/api/ipxe/' + this.ipxeVersion + '/script').then(result => {
      this.script = result.data
    })
    axios.get('/api/ipxe/' + this.ipxeVersion + '/certificate').then(result => {
      this.certificate = result.data
    })
    axios.get('/api/ipxe/' + this.ipxeVersion + '/general').then(result => {
      this.general = result.data
    })
    axios.get('/api/ipxe/' + this.ipxeVersion + '/console').then(result => {
      this.console = result.data
    })

    axios.get('/api/ipxe/' + this.ipxeVersion + '/log').then(result => {
      var lines = result.data.split('\n')
      // Limit the log to 500 lines, to prevent lagging
      lines = lines.slice(-500)
      for (var line in lines) {
        if (lines[line] === '') continue
        var attr = lines[line].split('\t')
        this.log.push({ id: this.log.length, date: attr[0], status: attr[1], msg: attr[2] })
      }
    })

    // Socket io event listeners
    this.$socket.on(this.ipxeVersion + ' log', entry => {
      this.log.push({ id: this.log.length, msg: entry.msg, status: entry.status, date: entry.date })
    })

    // Disable the buttons if a building process is running.
    axios.get('/api/ipxe/' + this.ipxeVersion + '/status').then(result => {
      this.disableButtons = result.data.data
    })

    this.$socket.on(this.ipxeVersion + ' inProgress', inProgress => {
      this.disableButtons = inProgress
    })
  },
  updated () {
    this.$refs.log.$el.firstElementChild.scrollTop = this.$refs.log.$el.firstElementChild.scrollHeight
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
