<template>
    <v-card dark class="pa-5" max-width="600px">
        <v-card-title class="text-h3 mb-1">
            {{this.item.name}}
        </v-card-title>
        <v-card-subtitle>
            Size: {{this.item.size}}
            <br/>
            Unit: {{this.units[this.item.unit]}}
        </v-card-subtitle>

        <v-card-text>
            <p>
                {{this.item.description}}
            </p>
            <p>
                Barcode: {{this.item.barcode}}
            </p>
        </v-card-text>

        <v-list>
            <v-subheader>LOCATIONS</v-subheader>
            <v-list-item
                v-for="location in locations"
                :key="location.name + location.count"
            >
                <v-list-item-content>
                    <v-list-item-title>{{location.name}} - {{location.count}}</v-list-item-title>
                </v-list-item-content>
                <v-btn fab dark small @click="addItem(item.id, location.id)">
                <v-icon>mdi-plus</v-icon>
                </v-btn>
                <v-btn fab dark small @click="removeItem(item.id, location.id)">
                <v-icon>mdi-close</v-icon>
                </v-btn>
            </v-list-item>
        </v-list>
    </v-card>
</template>

<script>
import { API } from '../utils/api_common';

export default {
  name: "ItemCard",
  props: ["item"],
  data: () => ({
      units: [
        "Teaspoon",
        "Tablespoon",
        "Cup",
        "Ounce",
        "Gram",
        "Pound",
        "Individual",
      ],
      locations: [],
  }),
  created() {
      this.getLocations()
  },
  methods: {
    async getLocations() {
        let response = await API.get("api/v1/items/" + this.item.id + "/getLocationCount",
            {
                headers: {
                    Authorization: localStorage.getItem("token"),
                }
            }
        )
        if (response.status == 200) {
            let locs = []
            for (const locID in response.data) {
                let count = response.data[locID]
                let locResp = await API.get("api/v1/locations/" + locID,
                    {
                        headers: {
                            Authorization: localStorage.getItem("token"),
                        }
                    }
                )
                if (locResp.status == 200) {
                    locs.push({
                        id: locResp.data.id,
                        name: locResp.data.name,
                        count: count,
                    })
                }
            }
            locs.sort(function(a,b) {
                if (a.name < b.name) {
                    return -1
                } else if (a.name > b.name) {
                    return 1
                }
                    return 0
            })

            this.locations = locs
        }
    },
    addItem(id, loc) {
          API
            .post("api/v1/locations/" + loc + "/addItem/" + id, {},
              {
                headers: {
                  Authorization: localStorage.getItem("token"),
                }
              }
            )
            .then((response) => {
              if (response.status == 201) {
                this.getLocations()
              }
            })
    },
    removeItem(id, loc) {
          API
            .post("api/v1/locations/" + loc + "/removeItem/" + id, {},
              {
                headers: {
                  Authorization: localStorage.getItem("token"),
                }
              }
            )
            .then((response) => {
              if (response.status == 201) {
                this.getLocations()
              }
            })
        }
  }
}
</script>
