<template>
  <div class="Places">
    <v-subheader>Place</v-subheader>
    <v-data-table
      :headers="headers"
      :items="places"
      :items-per-page="5"
      :search="search"
      sort-by="place"
      class="elevation-1"
    >
      <template v-slot:item.placeImage="{ item }">
        <v-img aspect-ratio="1" style="width: 200px; height:auto;" :src="item.placeImage"></v-img>
      </template>
      <template v-slot:top>
        <v-toolbar flat color="white">
          <v-toolbar-title>Places</v-toolbar-title>
          <v-divider class="mx-4" inset vertical></v-divider>
          <v-spacer></v-spacer>
          <v-text-field
            v-model="search"
            append-icon="search"
            label="Search"
            single-line
            hide-details
          ></v-text-field>
          <v-divider class="mx-4" inset vertical></v-divider>
          <v-dialog v-model="dialog" max-width="500px">
            <template v-slot:activator="{ on }">
              <v-btn color="secondary" dark class="mb-2" v-on="on">New Item</v-btn>
            </template>
            <v-card>
              <v-card-title>
                <span class="headline">{{ formTitle }}</span>
              </v-card-title>
              <v-card-text>
                <v-container grid-list-md>
                  <v-layout wrap>
                    <v-flex xs12 sm6 md4>
                      <v-text-field v-model="editedItem.place" label="Place"></v-text-field>
                    </v-flex>
                    <v-flex xs12 sm6 md4>
                      <v-text-field v-model="editedItem.city" label="City"></v-text-field>
                    </v-flex>
                    <v-flex xs12 sm6 md4>
                      <!-- <v-text-field v-model="editedItem.placeImage" label="Image"></v-text-field> -->
                      <v-file-input
                        :rules="rules"
                        accept="image/png, image/jpeg, image/bmp"
                        placeholder="Pick an image"
                        prepend-icon="mdi-camera"
                        v-model="editedItem.placeImage"
                        label="Image"
                      ></v-file-input>
                      <!-- <v-file-input
                        :rules="rules"
                        v-model="editedItem.placeImage"
                        accept="image/png, image/jpeg, image/bmp"
                        placeholder="Pick an image"
                        prepend-icon="mdi-camera"
                        label="Image"
                      ></v-file-input>-->
                    </v-flex>
                  </v-layout>
                </v-container>
              </v-card-text>

              <v-card-actions>
                <v-spacer></v-spacer>
                <v-btn color="secondary darken-1" text @click="close">Cancel</v-btn>
                <v-btn color="secondary darken-1" text @click="save">Save</v-btn>
              </v-card-actions>
            </v-card>
          </v-dialog>
        </v-toolbar>
      </template>
      <template v-slot:item.action="{ item }">
        <v-icon small class="mr-2" @click="editItem(item)">edit</v-icon>
        <v-icon small @click="deleteItem(item)">delete</v-icon>
      </template>
      <template v-slot:no-data>
        <v-btn color="secondary" @click="initialize">Reset</v-btn>
      </template>
    </v-data-table>
  </div>
</template>

<script>
import { mapState } from "vuex";
import axios from "axios";

export default {
  data: () => ({
    search: "",
    dialog: false,
    headers: [
      { text: "Place", value: "place" },
      { text: "City", value: "city" },
      { text: "Image", value: "placeImage", sortable: false },
      { text: "Actions", value: "action", sortable: false }
    ],
    places: [],
    rules: [
      value =>
        !value || value.size < 2000000 || "Image size should be less than 2 MB!"
    ],
    editedIndex: -1,
    editedItem: {
      place: "",
      city: "",
      placeImage: []
    },
    defaultItem: {
      place: "",
      city: "",
      placeImage: []
    }
  }),

  computed: {
    formTitle() {
      return this.editedIndex === -1 ? "New Item" : "Edit Item";
    },
    ...mapState(["placesData"])
  },
  mounted: function() {
    this.$store.dispatch("loadPlacesData");
  },
  watch: {
    placesData: function() {
      this.places = this.placesData.data;
    },
    dialog(val) {
      val || this.close();
    }
  },
  created() {
    this.initialize();
  },
  methods: {
    initialize() {
      this.places;
    },
    editItem(item) {
      this.editedIndex = this.places.indexOf(item);
      this.editedItem = Object.assign({}, item);
      this.dialog = true;
    },
    deleteItem(item) {
      const index = this.places.indexOf(item);
      confirm("Are you sure you want to delete this item?") &&
        this.places.splice(index, 1);
      axios.delete("/api/places/" + item._id).then(response => {
        console.log(response);
      });
    },
    close() {
      this.dialog = false;
      setTimeout(() => {
        this.editedItem = Object.assign({}, this.defaultItem);
        this.editedIndex = -1;
      }, 300);
    },
    save() {
      if (this.editedIndex > -1) {
        axios
          .patch("/api/places/" + this.editedItem._id, {
            place: this.editedItem.place,
            city: this.editedItem.city,
            placeImage: this.editedItem.placeImage
          })
          .then(response => {
            console.log(reseponse);
          });
        Object.assign(this.places[this.editedIndex], this.editedItem);
      } else {
        // axios
        //   .post("/api/places/", {
        //     place: this.editedItem.place,
        //     city: this.editedItem.city,
        //     image: this.editedItem.image
        //   })
        //   .then(response => {
        //     console.log(reseponse);
        //   });
        // this.places.push(this.editedItem);
        axios
          .post(
            "/api/places",
            {
              place: this.editedItem.place,
              city: this.editedItem.city,
              placeImage: this.editedItem.placeImage
            },
            {
              headers: {
                "Content-Type": "multipart/form-data"
              }
            }
          )
          .then(response => {
            console.log(response);
          });
        this.places.push(this.editedItem);
      }
      this.close();
    }
  }
};
</script>