<template>
  <div class="list">
    <v-data-table :headers="headers" :items="itemlist" :items-per-page="20" class="elevation-1">
      <template v-slot:[`item.active`]="{ item }">
        <v-simple-checkbox v-model="item.active" disabled></v-simple-checkbox>
      </template>
      <template v-slot:[`item.actions`]="{ item }">
        <v-icon small class="mr-2" @click="editItem(item)">
          mdi-pencil
        </v-icon>
        <v-icon small @click="deleteItem(item)">
          mdi-delete
        </v-icon>
      </template>
    </v-data-table>
    <v-dialog v-model="dialog" max-width="500px">
      <v-card>
        <v-card-title>
          <span class="headline">{{ formTitle }}</span>
        </v-card-title>
        <v-card-text>
          <v-container>
            Edit Entry
            <v-row v-for="item in headers" :key="item">
              <template v-if="item.editable">
                <v-col cols="16" sm="8" md="6">
                  <v-checkbox v-if="typeof editedItem[item.value] == 'boolean'" v-model="editedItem[item.value]"
                    v-bind:label="item.text"></v-checkbox>
                  <v-text-field v-if="typeof editedItem[item.value] == 'string'" v-model="editedItem[item.value]"
                    v-bind:label="item.text"></v-text-field>
                </v-col>
              </template>
            </v-row>
          </v-container>
        </v-card-text>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn color="blue darken-1" text @click="close">Cancel</v-btn>
          <v-btn color="blue darken-1" text @click="save">Save</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
    <v-snackbar v-model="snackbarshow" :timeout="snackbartimeout">
      {{ snackbartext }}

      <template v-slot:action="{ attrs }">
        <v-btn color="blue" text v-bind="attrs" @click="snackbarshow=false">
          Close
        </v-btn>
      </template>
    </v-snackbar>
  </div>
</template>

<script>
  export default {
    name: 'List',
    data() {
      return {
        snackbarshow: false,
        snackbartext: "",
        snackbartimeout: 10000,
        colsize: 3,
        editedItem: {}
      }
    },
    computed: {
      position() {
        return this.itemlist.length() + 1
      }
    },
    methods: {
      /*createItem(name) {
        this.editedIndex = this.itemlist.indexOf(item);
        this.editedItem = Object.assign({}, item);
        this.dialog = true;
      },*/
      editItem(item) {
        this.editedIndex = this.itemlist.indexOf(item);
        this.editedItem = Object.assign({}, item);
        this.dialog = true;
      },
      deleteItem(item) {
        const index = this.itemlist.indexOf(item);
        // Assuming that first elem of item is the primary key
        confirm('Are you sure you want to delete this item?') && this.object.DeleteItem(item[Object.keys(item)[0]])
          .then(() => {
            this.itemlist.splice(index, 1);
          });
      },
      close() {
        this.dialog = false
        this.$nextTick(() => {
          this.editedItem = Object.assign({}, this.defaultItem)
          this.editedIndex = -1
        })
      },
      save() {
        if (this.editedIndex > -1) {
          Object.assign(this.itemlist[this.editedIndex], this.editedItem)
        } else {
          this.itemlist.push(this.editedItem)
        }
        this.object.ModifyItem(this.editedItem.id, this.editedItem).then((response) => {
          this.snackbarshow = true;
          this.snackbartext = response;
          this.$parent.RefreshData();
        });
        this.close();
      },
    },
    props: ["headers", "itemlist", "object"]
  }
</script>

<style scoped>
  h3 {
    margin: 40px 0 0;
  }

  ul {
    list-style-type: none;
    padding: 0;
  }

  li {
    display: inline-block;
    margin: 0 10px;
  }

  a {
    color: #42b983;
  }
</style>