<template>
    <div>
    <v-container justify="center">
      <v-banner>
        <h4>Gestion des files d'attente</h4>
      </v-banner>
      
      <v-container grid-list-md align="center">
        <v-layout row>
          <v-flex v-for="item in queues" :key="item.id">
            <v-card style="max-width: 400px">
              <v-card-title>
                {{ item.name }}
              </v-card-title>
              <v-alert :type="alert_type(item)" >{{ queue_status(item) }}</v-alert>
              
              <v-slider v-model="item.weight" @change="update_weight(item)" thumb-label prepend-icon="mdi-weight"></v-slider>
              <v-card-actions>
                <v-btn @click="toggle_queue_state(item)">
                  Activer/Désactiver
                </v-btn>
                <v-btn color="red" @click="delete_queue(item)">
                  Supprimer
                </v-btn>
                
              </v-card-actions>
              <v-card-subtitle align="left">
                Printers: 
                <div v-for="printer in item.printers" :key="printer">
                  <div>- {{ printer.name }}</div>
                </div>
              </v-card-subtitle>
              <v-card-subtitle align="left">
                In Queue: 
                <div v-for="elem in item.elements" :key="elem.id">
                  <div><v-icon>mdi-folder-cog</v-icon> {{ elem.title }} 
                  <v-btn @click="dequeue(elem.id)"><v-icon color="red">mdi-close-octagon</v-icon></v-btn>
                  </div>
                </div>
              </v-card-subtitle>
            </v-card>
            <!-- <v-icon>mdi-account</v-icon> {{ elem.author }} -->
          </v-flex>
        </v-layout>
        <v-card>
          <v-card-title>Ajouter une file d'attente</v-card-title>
          <form >
              <v-text-field style="padding: 20px;" v-model="newQueueName" label="Nom"></v-text-field>
              <v-btn color="green" class="mr-4" @click="new_queue">Ajouter</v-btn>
            </form>
      </v-card>
      </v-container>
    </v-container>
    
  </div>
</template>

<script>
import axios from 'axios'
export default {
    data() {
        return {
            newQueueName: "",
            weight: 0
        }
    },
    methods: {
      update_weight(item, value) {
        console.log(value)
        axios.put("/queues/"+item.id, {
            weight: item.weight
        }).then(resp => {
            this.$store.dispatch("load_queues")
        }).catch(err => {
            this.$store.dispatch("display_error", err)
        })
      },
      dequeue(id) {
        axios.get("/requests/" + id + "/dequeue")
        .then((resp) => {
          this.reload()
        }).catch((error) => {
          console.log("[DEBUG] Could not dequue, ignoring")
          this.reload()
        })
      },
      alert_type(item) {
        return item.enabled? 'info':'error'
      },
      queue_status(item) {
        return item.enabled? "En fonction": "Désactivée"
      },
      delete_queue(item) {
        axios.delete("/queues/"+item.id,)
        .then(resp => {
            this.$store.dispatch("load_queues")
        }).catch(err => {
            this.$store.dispatch("display_error", err)
        })
      },
      toggle_queue_state(item) {
        axios.put("/queues/"+item.id, {
            enabled: ! item.enabled
        }).then(resp => {
            this.$store.dispatch("load_queues")
        }).catch(err => {
            this.$store.dispatch("display_error", err)
        })
      },
      new_queue() {
          axios.post('/queues', {
              name: this.newQueueName,
              weight: 1,
              meta: {}
          }).then(resp => {
              this.$store.dispatch("load_queues")
          }).catch(err => {
              this.$store.dispatch("display_error", err)
          })
      },
      reload() {
        this.$store.dispatch("load_queues")
      }
    },
    mounted() {
      this.reload()
    },
    computed: {
        queues() {
            return this.$store.state.queues
        }
    }
}
</script>