<template>
  <b-card bg-variant="primary" text-variant="white">
    <template v-slot:header>
      <b-row>
        <b-col class="text-left">
          <h4>MLTD</h4>
        </b-col>
        <b-col class="text-right">
          <b-dropdown size="sm" variant="primary" no-caret right>
            <template v-slot:button-content>
              <fa icon="cogs" />
            </template>
            <b-dropdown-item @click="start">
              Start new instance
            </b-dropdown-item>
          </b-dropdown>
        </b-col>
      </b-row>
    </template>
    <b-table v-if="items.length > 0" :fields="fields" :items="items" thead-class="text-white" tbody-class="text-white">
      <template v-slot:cell(created_at)="row">
        <running-for :date="new Date(row.item.created_at)" class="red">
          <template slot-scope="int">
            {{ int.minutes }} Minutes and {{ int.seconds }} Seconds
          </template>
        </running-for>
      </template>
      <template v-slot:cell(actions)="row">
        <b-button variant="danger"
                  size="sm"
                  title="Stop"
                  @click.stop="stop(row.item.process_id)"
        >
          <fa icon="stop" />
        </b-button>
      </template>
    </b-table>
    <b-row align-h="end">
      <b-form-group label-cols="3" label-cols-lg="3" label-size="sm" label="Top Events" label-for="input-sm">
        <b-input-group size="sm">
          <b-form-input v-model="top" type="number" />
          <b-input-group-append>
            <b-button variant="info" @click="train">
              Get
            </b-button>
          </b-input-group-append>
        </b-input-group>
      </b-form-group>
    </b-row>
    <b-row v-if="topResults.length > 0">
      <b-form-tags v-model="topResults" class="mb-2" disabled placeholder=""></b-form-tags>
      <h6>Timeframe: {{ topTimeframe }}</h6>
    </b-row>
  </b-card>
</template>

<script>
import axios from 'axios'
import RunningFor from './RunningFor'

export default {
  name: 'MltdCard',
  components: {
    RunningFor
  },
  data () {
    return {
      top: 10,
      topResults: [],
      topTimeframe: '',
      fields: [
        { key: 'process_id', label: 'Process' },
        { key: 'created_at', label: 'Running for' },
        { key: 'actions', label: 'Actions' }
      ],
      items: []
    }
  },
  created () {
    this.status()
  },
  methods: {
    async start () {
      try {
        await axios.get('/v1/mltd/start')
        this.status()
        this.$toasted.success('MTLD instance started!')
      } catch (e) {
        this.$toasted.error('There was an error!')
      }
    },
    async status () {
      try {
        const { data } = await axios.get('/v1/mltd/status')
        this.items = data
      } catch (e) {
        this.$toasted.error('There was an error while fetching running MLTD instances!')
      }
    },
    async stop (pid) {
      try {
        await axios.get('/v1/mltd/stop/' + pid)
        this.status()
        this.$toasted.success('MTLD instance stopped!')
      } catch (e) {
        this.$toasted.error('There was an error!')
      }
    },
    async train () {
      try {
        const { data } = await axios.get('/v1/mltd/1/' + this.top)
        this.topResults = data.important_events
        this.topTimeframe = data.timeframe
      } catch (e) {
        this.$toasted.error('There was an error!')
      }
    }
  }
}
</script>

<style scoped>

</style>