<template>
    <div v-if="showSearch" id="wrapper">
        <h1>SØK ETTER VARE</h1>
        <input type="text" id="searchBox" v-model="itemSearch">
        <button @click="search">Søk</button>
        <p>Resultater: ({{searchResult.length}})</p>

        <select v-model="selectedItem" name="searchR" id="searchR">
            <option v-for ="item in searchResult" :value="item" :key="item.ean">{{item.name}} ({{item.amount.quantity}}{{item.amount.unit}})</option>
        </select>
        <p>Antall:</p>
        <input type="number" v-model="numOfItemsToAdd">

        <button @click="addToFridge">Legg i kjøleskap</button>

    </div>
</template>

<script>
import {API} from "@/util/API";

export default {
    name: "itemSearch",
    data(){
        return{
            itemSearch:'',
            searchResult: [],
            selectedItem: null,
            showSearch:true,
            numOfItemsToAdd:1,
        }
    },
    methods: {
        async search() {
            this.searchResult = await API.searchItems(this.itemSearch);
            this.selectedItem= this.searchResult[0];
        },
        addToFridge(){
            const num = this.numOfItemsToAdd;

            //const request = [{ingredient: this.selectedItem}]
            const ingr = {
                item: this.selectedItem,
                amount: this.selectedItem.amount //why?
            }

            const request = [{ingredient: JSON.stringify(ingr)}]
            console.log(request)
            API.addToFridge(request)
        }
    }
}
</script>

<style scoped>
select {
    width:100%;
}

#wrapper{
    background-color: #04be80;
}

/*let thisItem = {
               allergens : item.allergens,
               ean : item.ean,
               shelfLife : item.shelfLife,
               image_url : item.image_url,
               name : item.name,
               nutrition : item.nutrition,
               amount : item.amount,
           }*/
/*
//const sAmount = {quantity:item.amount.quantity,unit:item.amount.unit}
//const ingredient = {Item:thisItem, SerializedAmount:sAmount}

//console.log("ITEM::::" + thisItem.name)
//API.addToFridge({ingredient,num})
//const request = [{item: this.selectedItem, amount : this.selectedItem.amount}]*/
</style>