{% extends "base.html" %}
{% load django_tables2 %}
{% load crispy_forms_tags %}
{% load static %}
{% load i18n %}

{% block title %}{% trans "Shopping List" %}{% endblock %}

{% block extra_head %}
    {% include 'include/vue_base.html' %}

    <link rel="stylesheet" href="{% static 'css/vue-multiselect-bs4.min.css' %}">
    <script src="{% static 'js/vue-multiselect.min.js' %}"></script>

    <script src="{% static 'js/Sortable.min.js' %}"></script>
    <script src="{% static 'js/vuedraggable.umd.min.js' %}"></script>

    <link rel="stylesheet" href="{% static 'css/pretty-checkbox.min.css' %}">
{% endblock %}

{% block content %}

    <div class="row">
        <div class="col col-md-9">
            <h2>{% trans 'Shopping List' %}</h2>
        </div>
        <div class="col col-mdd-3 text-right">
            <b-form-checkbox switch size="lg" v-model="edit_mode"
                             @change="$forceUpdate()">{% trans 'Edit' %}</b-form-checkbox>
        </div>
    </div>

    <template v-if="shopping_list !== undefined">

        <div class="text-center" v-if="loading">
            <i class="fas fa-spinner fa-spin fa-8x"></i>
        </div>
        <div v-else-if="edit_mode">
            <div class="row">
                <div class="col col-md-6">

                    <div class="card">
                        <div class="card-header">
                            <i class="fa fa-search"></i> {% trans 'Search' %}
                        </div>
                        <div class="card-body">
                            <input type="text" class="form-control" v-model="recipe_query" @keyup="getRecipes"
                                   placeholder="{% trans 'Search Recipe' %}">
                            <ul class="list-group" style="margin-top: 8px">
                                <li class="list-group-item" v-for="x in recipes">
                                    <div class="row flex-row" style="padding-left: 0.5vw; padding-right: 0.5vw">
                                        <div class="flex-column flex-fill my-auto"><a v-bind:href="getRecipeUrl(x.id)"
                                                                                      target="_blank"
                                                                                      rel="nofollow norefferer">[[x.name]]</a>
                                        </div>
                                        <div class="flex-column align-self-end">
                                            <button class="btn btn-outline-primary shadow-none"
                                                    @click="addRecipeToList(x)"><i
                                                    class="fa fa-plus"></i></button>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>

                <div class="col col-md-6">
                    <div class="card">
                        <div class="card-header">
                            <i class="fa fa-shopping-cart"></i> {% trans 'Shopping Recipes' %}
                        </div>
                        <div class="card-body">
                            <template v-if="shopping_list.recipes.length < 1">
                                {% trans 'No recipes selected' %}
                            </template>
                            <template v-else>
                                <div class="row flex-row my-auto" v-for="x in shopping_list.recipes"
                                     style="margin-top: 1vh!important;">
                                    <div class="flex-column align-self-start " style="margin-right: 0.4vw">
                                        <button class="btn btn-outline-danger" @click="removeRecipeFromList(x)"><i
                                                class="fa fa-trash"></i></button>
                                    </div>
                                    <div class="flex-grow-1 flex-column my-auto"><a v-bind:href="getRecipeUrl(x.recipe)"
                                                                                    target="_blank"
                                                                                    rel="nofollow norefferer">[[x.recipe_name]]</a>
                                    </div>
                                    <div class="flex-column align-self-end ">
                                        <div class="input-group input-group-sm my-auto">
                                            <div class="input-group-prepend">
                                                <button class="text-muted btn btn-outline-primary shadow-none"
                                                        @click="((x.multiplier - 1) > 0) ? x.multiplier -= 1 : 1">-
                                                </button>
                                            </div>
                                            <input class="form-control" type="number" v-model="x.multiplier">
                                            <div class="input-group-append">
                                                <button class="text-muted btn btn-outline-primary shadow-none"
                                                        @click="x.multiplier += 1">
                                                    +
                                                </button>
                                            </div>
                                        </div>
                                    </div>

                                </div>
                            </template>
                        </div>
                    </div>
                </div>
            </div>

            <table class="table table-sm table-striped">
                <thead>
                <tr>
                    <th>#</th>
                    <th>1</th>
                    <th>2</th>
                    <th>3</th>
                    <th></th>
                </tr>

                </thead>

                <tbody is="draggable" group="people" :list="display_entries" tag="tbody" :empty-insert-threshold="10"
                       handle=".handle" @sort="sortEntries()">

                <tr v-for="(element, index) in display_entries" :key="element.id">
                    <td class="handle"><i class="fas fa-sort"></i></td>
                    <td>[[element.amount]]</td>
                    <td>[[element.unit.name]]</td>
                    <td>[[element.food.name]]</td>
                    <td>
                        <button class="btn btn-sm btn-outline-danger" v-if="element.list_recipe === null"
                                @click="shopping_list.entries = shopping_list.entries.filter(item => item.id !== element.id)">
                            <i class="fa fa-trash"></i></button>
                    </td>
                </tr>
                </tbody>

            </table>


            <div class="row">
                <div class="col col-md-3">
                    <input class="form-control" type="number" placeholder="{% trans 'Amount' %}"
                           v-model="new_entry.amount" ref="new_entry_amount">
                </div>
                <div class="col col-md-4">
                    <multiselect
                            v-tabindex
                            ref="unit"
                            v-model="new_entry.unit"
                            :options="units"
                            :close-on-select="true"
                            :clear-on-select="true"
                            :allow-empty="true"
                            :preserve-search="true"
                            placeholder="{% trans 'Select Unit' %}"
                            tag-placeholder="{% trans 'Create' %}"
                            select-label="{% trans 'Select' %}"
                            :taggable="true"
                            @tag="addUnitType"
                            label="name"
                            track-by="name"
                            :multiple="false"
                            :loading="units_loading"
                            @search-change="searchUnits">
                    </multiselect>
                </div>
                <div class="col col-md-4">
                    <multiselect
                            v-tabindex
                            ref="food"
                            v-model="new_entry.food"
                            :options="foods"
                            :close-on-select="true"
                            :clear-on-select="true"
                            :allow-empty="true"
                            :preserve-search="true"
                            placeholder="{% trans 'Select Food' %}"
                            tag-placeholder="{% trans 'Create' %}"
                            select-label="{% trans 'Select' %}"
                            :taggable="true"
                            @tag="addFoodType"
                            label="name"
                            track-by="name"
                            :multiple="false"
                            :loading="foods_loading"
                            @search-change="searchFoods">
                    </multiselect>
                </div>

                <div class="col col-md-1 my-auto text-right">
                    <button class="btn btn-success btn-lg" @click="addEntry()"><i class="fa fa-plus"></i>
                    </button>
                </div>
            </div>

            <div class="row">
                <div class="col" style="text-align: right; margin-top: 1vh">

                    <div class="form-group form-check form-group-lg">
                        <input class="form-check-input" style="zoom:1.3;" type="checkbox"
                               v-model="shopping_list.finished" id="id_finished">
                        <label class="form-check-label" style="zoom:1.3;"
                               for="id_finished"> {% trans 'Finished' %}</label>
                    </div>

                </div>
            </div>

        </div>
        <div v-else>

            <div class="row" style="margin-top: 8px">
                <div class="col col-md-12">
                    <table class="table">
                        <tr v-for="x in display_entries">
                            <template v-if="!x.checked">
                                <td><input type="checkbox" style="zoom:1.4;" v-model="x.checked"
                                           @change="entryChecked(x)">
                                </td>
                                <td>[[x.amount]]</td>
                                <td>[[x.unit.name]]</td>
                                <td>[[x.food.name]]</td>
                            </template>
                        </tr>

                        <tr v-for="x in display_entries" class="text-muted">
                            <template v-if="x.checked">
                                <td><input type="checkbox" style="zoom:1.4;" v-model="x.checked"
                                           @change="entryChecked(x)">
                                </td>
                                <td>[[x.amount]]</td>
                                <td>[[x.unit.name]]</td>
                                <td>[[x.food.name]]</td>
                            </template>
                        </tr>
                    </table>
                </div>
            </div>


        </div>

        <div class="row" style="margin-top: 2vh">
            <div class="col" style="text-align: right">
                <b-button class="btn btn-info" v-b-modal.id_modal_export><i
                        class="fas fa-file-export"></i> {% trans 'Export' %}</b-button>
                <button class="btn btn-success" @click="updateShoppingList()" v-if="edit_mode"><i
                        class="fas fa-save"></i> {% trans 'Save' %}
                </button>
            </div>
        </div>


        <b-modal id="id_modal_export" title="{% trans 'Copy/Export' %}">
            <div class="row">
                <div class="col col-12">
                    <label>
                        {% trans 'List Prefix' %}
                        <input class="form-control" v-model="export_text_prefix">
                    </label>
                </div>

            </div>

            <div class="row">
                <div class="col col-12">
                    <b-form-textarea class="form-control" max-rows="8" v-model="export_text">

                    </b-form-textarea>
                </div>
            </div>


        </b-modal>


    </template>


{% endblock %}
{% block script %}
    <script type="application/javascript">
        let csrftoken = Cookies.get('csrftoken');
        Vue.http.headers.common['X-CSRFToken'] = csrftoken;

        Vue.component('vue-multiselect', window.VueMultiselect.default)

        let app = new Vue({
            components: {
                Multiselect: window.VueMultiselect.default
            },
            delimiters: ['[[', ']]'],
            el: '#id_base_container',
            data: {
                shopping_list_id: {% if shopping_list_id  %}{{ shopping_list_id }}{% else %}null{% endif %},
                loading: true,
                edit_mode: true,
                export_text_prefix: '', //TODO add userpreference
                recipe_query: '',
                recipes: [],
                shopping_list: undefined,
                new_entry: {
                    unit: undefined,
                    amount: undefined,
                    food: undefined,
                },
                foods: [],
                foods_loading: false,
                units: [],
                units_loading: false,
                list: [
                    {id: 1, name: "Abby", sport: "basket"},
                    {id: 2, name: "Brooke", sport: "foot"},
                    {id: 3, name: "Courtenay", sport: "volley"},
                    {id: 4, name: "David", sport: "rugby"}
                ],
            },
            directives: {
                tabindex: {
                    inserted(el) {
                        el.setAttribute('tabindex', 0);
                    }
                }
            },
            computed: {
                multiplier_cache() {
                    let cache = {}
                    this.shopping_list.recipes.forEach((r) => {
                        cache[r.id] = !(Number.isNaN(r.multiplier)) ? parseFloat(r.multiplier) : 1
                    })
                    return cache
                },
                display_entries() {
                    let entries = []

                    //TODO merge multiple ingredients of same unit

                    this.shopping_list.entries.forEach(element => {
                        let item = {}
                        Object.assign(item, element);
                        if (item.list_recipe !== null) {
                            item.amount = item.amount * this.multiplier_cache[item.list_recipe]
                        }
                        entries.push(item)
                    });

                    return entries
                },
                export_text() {
                    let text = ''
                    for (let e of this.display_entries) {
                        text += `${this.export_text_prefix}${e.amount} ${e.unit.name} ${e.food.name} \n`
                    }
                    return text
                },
            },
            /*
           watch: {
               recipe: {
                   deep: true,
                   handler() {
                       this.recipe_changed = this.recipe_changed !== undefined;
                   }
               }
           },

           created() {
               window.addEventListener('beforeunload', this.warnPageLeave)
           },
           */
            mounted: function () {
                this.loadShoppingList()

                {% if recipes %}
                    this.loading = true
                    this.edit_mode = true
                    let loadingRecipes = []
                    {% for r in recipes %}
                        loadingRecipes.push(this.loadInitialRecipe({{ r.recipe }}, {{ r.multiplier }}))
                    {% endfor %}

                    Promise.allSettled(loadingRecipes).then(() => {
                        this.loading = false
                    })
                {% endif %}

                {% if request.user.userpreference.shopping_auto_sync > 0 %}
                    setInterval(() => {
                        if ((this.shopping_list_id !== null) && !this.edit_mode) {
                            this.loadShoppingList(true)
                        }
                    }, {% widthratio request.user.userpreference.shopping_auto_sync 1 1000 %})
                {% endif %}
            },
            methods: {
                /*
                warnPageLeave: function (event) {
                    if (this.recipe_changed) {
                        event.returnValue = ''
                        return ''
                    }
                },
                 */
                makeToast: function (title, message, variant = null) {
                    //TODO remove duplicate function in favor of central one
                    this.$bvToast.toast(message, {
                        title: title,
                        variant: variant,
                        toaster: 'b-toaster-top-center',
                        solid: true
                    })
                },
                loadInitialRecipe: function (recipe, multiplier) {
                    return this.$http.get('{% url 'api:recipe-detail' 123456 %}'.replace('123456', recipe)).then((response) => {
                        this.addRecipeToList(response.data, multiplier)
                    }).catch((err) => {
                        console.log("getRecipes error: ", err);
                        this.makeToast('{% trans 'Error' %}', '{% trans 'There was an error loading a resource!' %}' + err.bodyText, 'danger')
                    })
                },
                loadShoppingList: function (autosync = false) {

                    if (this.shopping_list_id) {
                        this.$http.get("{% url 'api:shoppinglist-detail' 123456 %}".replace('123456', this.shopping_list_id) + ((autosync) ? '?autosync=true' : '')).then((response) => {
                            if (!autosync) {
                                this.shopping_list = response.body
                                this.loading = false
                            } else {
                                let check_map = {}
                                for (let e of response.body.entries) {
                                    check_map[e.id] = {checked: e.checked}
                                }

                                for (let se of this.shopping_list.entries) {
                                    if (check_map[se.id] !== undefined) {
                                        se.checked = check_map[se.id].checked
                                    }
                                }
                            }

                        }).catch((err) => {
                            console.log(err)
                            this.makeToast('{% trans 'Error' %}', '{% trans 'There was an error loading a resource!' %}' + err.bodyText, 'danger')
                        })
                    } else {
                        this.shopping_list = {
                            "recipes": [],
                            "entries": [],
                            "entries_display": [],
                            "shared": [],
                            "created_by": 1
                        }
                        this.loading = false
                    }
                },
                updateShoppingList: function () {
                    this.loading = true
                    let recipe_promises = []

                    for (let i in this.shopping_list.recipes) {
                        if (this.shopping_list.recipes[i].created) {
                            console.log('updating recipe', this.shopping_list.recipes[i])
                            recipe_promises.push(this.$http.post("{% url 'api:shoppinglistrecipe-list' %}", this.shopping_list.recipes[i], {}).then((response) => {
                                let old_id = this.shopping_list.recipes[i].id
                                console.log("list recipe create respose ", response.body)
                                this.$set(this.shopping_list.recipes, i, response.body)
                                for (let e of this.shopping_list.entries.filter(item => item.list_recipe === old_id)) {
                                    console.log("found recipe updating ID")
                                    e.list_recipe = this.shopping_list.recipes[i].id
                                }
                            }).catch((err) => {
                                console.log(err)
                                this.makeToast('{% trans 'Error' %}', '{% trans 'There was an error updating a resource!' %}' + err.bodyText, 'danger')
                            }))
                        }
                    }

                    Promise.allSettled(recipe_promises).then(() => {
                        console.log("proceeding to update shopping list", this.shopping_list)

                        if (this.shopping_list_id === null) {
                            return this.$http.post("{% url 'api:shoppinglist-list' %}", this.shopping_list, {}).then((response) => {
                                console.log(response)
                                this.makeToast('{% trans 'Updated' %}', '{% trans 'Object created successfully!' %}', 'success')
                                this.loading = false

                                this.shopping_list = response.body
                                this.shopping_list_id = this.shopping_list.id

                                window.history.pushState('shopping_list', '{% trans 'Shopping List' %}', "{% url 'view_shopping' 123456 %}".replace('123456', this.shopping_list_id));
                            }).catch((err) => {
                                console.log(err)
                                this.makeToast('{% trans 'Error' %}', '{% trans 'There was an error creating a resource!' %}' + err.bodyText, 'danger')
                                this.loading = false
                            })
                        } else {
                            return this.$http.put("{% url 'api:shoppinglist-detail' shopping_list_id %}", this.shopping_list, {}).then((response) => {
                                console.log(response)
                                this.shopping_list = response.body
                                this.makeToast('{% trans 'Updated' %}', '{% trans 'Changes saved successfully!' %}', 'success')
                                this.loading = false
                            }).catch((err) => {
                                console.log(err)
                                this.makeToast('{% trans 'Error' %}', '{% trans 'There was an error updating a resource!' %}' + err.bodyText, 'danger')
                                this.loading = false
                            })
                        }


                    })
                },
                sortEntries: function () {
                    this.display_entries.forEach( (item, index) => {

                    })
                    console.log("IMPLEMENT ME", this.display_entries)
                },
                entryChecked: function (entry) {
                    console.log("checked entry: ", entry)
                    this.shopping_list.entries.forEach((item) => {
                        if (item.id === entry.id) { //TODO unwrap once same entries are merged
                            item.checked = entry.checked
                            this.$http.put("{% url 'api:shoppinglistentry-detail' 123456 %}".replace('123456', item.id), item, {}).then((response) => {

                            }).catch((err) => {
                                console.log(err)
                                this.makeToast('{% trans 'Error' %}', '{% trans 'There was an error updating a resource!' %}' + err.bodyText, 'danger')
                                this.loading = false
                            })

                        }
                    })
                },
                addEntry: function () {
                    if (this.new_entry.food !== undefined) {
                        this.shopping_list.entries.push({
                            'list_recipe': null,
                            'food': this.new_entry.food,
                            'unit': ((this.new_entry.unit !== undefined) ? this.new_entry.unit : {'name': ''}),
                            'amount': parseFloat(this.new_entry.amount),
                            'order': 0,
                            'checked': false
                        })

                        this.new_entry = {
                            unit: undefined,
                            amount: undefined,
                            food: undefined,
                        }

                        this.$refs.new_entry_amount.focus();
                    } else {
                        this.makeToast('{% trans 'Error' %}', '{% trans 'Please enter a valid food' %}', 'danger')
                    }
                },
                getRecipes: function () {
                    let url = "{% url 'api:recipe-list' %}?limit=5&internal=true"
                    if (this.recipe_query !== '') {
                        url += '&query=' + this.recipe_query;
                    } else {
                        this.recipes = []
                        return
                    }

                    this.$http.get(url).then((response) => {
                        this.recipes = response.data;
                    }).catch((err) => {
                        console.log("getRecipes error: ", err);
                        this.makeToast('{% trans 'Error' %}', '{% trans 'There was an error loading a resource!' %}' + err.bodyText, 'danger')
                    })
                },
                getRecipeUrl: function (id) { //TODO generic function that can be reused else were
                    return '{% url 'view_recipe' 123456 %}'.replace('123456', id)
                },
                addRecipeToList: function (recipe, multiplier = 1) {
                    let slr = {
                        "created": true,
                        "id": Math.random() * 1000,
                        "recipe": recipe.id,
                        "recipe_name": recipe.name,
                        "multiplier": multiplier
                    }

                    this.shopping_list.recipes.push(slr)

                    for (let s of recipe.steps) {
                        for (let i of s.ingredients) {
                            if (!i.is_header && i.food !== null) {
                                this.shopping_list.entries.push({
                                    'list_recipe': slr.id,
                                    'food': i.food,
                                    'unit': ((i.unit !== undefined) ? i.unit : {'name': ''}),
                                    'amount': i.amount,
                                    'order': 0
                                })
                            }
                        }
                    }
                },
                removeRecipeFromList: function (slr) {
                    this.shopping_list.entries = this.shopping_list.entries.filter(item => item.list_recipe !== slr.id)
                    this.shopping_list.recipes = this.shopping_list.recipes.filter(item => item !== slr)
                },
                searchKeywords: function (query) {
                    this.keywords_loading = true
                    this.$http.get("{% url 'api:keyword-list' %}" + '?query=' + query + '&limit=10').then((response) => {
                        this.keywords = response.data;
                        this.keywords_loading = false
                    }).catch((err) => {
                        console.log(err)
                        this.makeToast('{% trans 'Error' %}', '{% trans 'There was an error loading a resource!' %}' + err.bodyText, 'danger')
                    })
                },

                searchUnits: function (query) { //TODO move to central component
                    this.units_loading = true
                    this.$http.get("{% url 'api:unit-list' %}" + '?query=' + query + '&limit=10').then((response) => {
                        this.units = response.data;
                        this.units_loading = false
                    }).catch((err) => {
                        this.makeToast('{% trans 'Error' %}', '{% trans 'There was an error loading a resource!' %}' + err.bodyText, 'danger')
                    })
                },
                searchFoods: function (query) { //TODO move to central component
                    this.foods_loading = true
                    this.$http.get("{% url 'api:food-list' %}" + '?query=' + query + '&limit=10').then((response) => {
                        this.foods = response.data
                        this.foods_loading = false
                    }).catch((err) => {
                        this.makeToast('{% trans 'Error' %}', '{% trans 'There was an error loading a resource!' %}' + err.bodyText, 'danger')
                    })
                },
                addFoodType: function (tag, index) { //TODO move to central component
                    let new_food = {'name': tag}
                    this.foods.push(new_food)
                    this.new_entry.food = new_food
                },
                addUnitType: function (tag, index) { //TODO move to central component
                    let new_unit = {'name': tag}
                    this.units.push(new_unit)
                    this.new_entry.unit = new_unit
                },

            }
        });
    </script>

{% endblock %}