<template>
<div id ="item">
    <img src="src/components/icons/logo.png" alt="">
    <div id="itemInfo">
        <p id="fridgeItemName">{{ itemName }} {{ quantity }}{{quantityUnit}}</p>
        <p :style="{color:expirationTextColor}">{{expirationText}}</p>
    </div>
    <div @click="appleBtnPressed">
      <Icon  icon="game-icons:apple-core" :color="iconColor" :style="{ fontSize: iconSize }" />
    </div>

</div>
    <hr>
</template>

<script>
import {Icon} from "@iconify/vue";

export default {
    name: "FridgeItem",
    components: {Icon},
    emits: ['appleBtnPressed'],
    computed: {
        iconColor(){
            return 'black';
        },
        iconSize() {
            return '3rem'
        },
        expirationTextColor(){
            if(this.expirationText.split("Utgikk").length===2){
                return '#EE6D6D';
            }
            else{
                return 'black';
            }
        },
        expirationText() {
            const expirationDays = this.getDateDifference();

            if(expirationDays<0) {
                return "Utgikk " + this.expiration
            }

            switch (expirationDays){
                case expirationDays < -1:
                    return "Utgikk " + this.expiration
                case 0:
                    return "Utgår i dag"
                case -0:
                    return "Utgår i dag"
                case 1:
                    return "Utgår i morgen"
                case 2:
                    return "Utgår om to dager"
                case 3:
                    return "Utgår om tre dager"
                default:
                    return "Utgår " + this.expiration
            }
        }
    },
    props: {
        fridgeItem: {
          type:Object,
          required: false,
        },
        itemName: String,
        expiration: String,
        image: String,
        quantity: String,
        quantityUnit: String,
    },
    methods: {
        getDateDifference(){ //returns the difference between two dates
            const date = this.expiration.split('.');
            const dateFormat = date[1] + "/" + date [0]+ "/"+date[2];
            const expDate = new Date(dateFormat);
            const today = new Date();
            const ms = expDate-today;
            const numOfDays = Math.ceil(ms/(86400000))

            return numOfDays;
        },
      appleBtnPressed(){
          this.$emit('appleBtnPressed', this.itemName); /*TODO: change to item Object*/
          //console.log("hai " + this.itemName)
      }

    }
}
</script>

<style scoped lang="scss">
#item {
    background-color: base.$white;
    color: black;
    border-radius: 10px;
    padding: 1em;
    padding-left: 2em;
    padding-right:2em;
    display:flex;
    align-items: center;
    justify-content: space-between;
}

#fridgeItemName {
    font-weight: bold;
    font-size: 1.2em;
}


img {
    width: 3rem;
    border-radius: 50%;
    background-color: #00663C;
    margin-right:.6em;

}

#itemInfo{
    width: 100%;
}

</style>