import { ListItems } from '../../imports/api/listItems.js'
import { Lists } from '../../imports/api/lists.js';
import { Products } from '../../imports/api/products.js';
import { typeahead } from 'typeahead-standalone';

Template.listItemsForm.onCreated(function() {
    this.subscribe("myListItems", Session.get("listId"));
    this.subscribe("myLists");
    // this.subscribe("listProducts", Session.get("listItemVal"));
    this.subscribe("myProducts");
});

Template.listItemsForm.onRendered(function() {
    Meteor.setTimeout(function() {
        $('select').formSelect();
    }, 100);
    $('select').formSelect();
    Session.set("listItemEditMode", false);
    Session.set("itemReqErr", false);
    Session.set("showReceivedItems", false);
    Session.set("filtering", false);
    Session.set("findListItems", {});
    this.autorun(() => {
        $('input.autocomplete').autocomplete({
            data: Session.get("findListItems"),
        });
    });
});

Template.listItemsForm.helpers({
    selListName: function() {
        let selListId = Session.get("listId");
        let listInfo = Lists.findOne({ _id: selListId });
        return listInfo.listName;
    },
    itemProdName: function() {
        return Products.find({});
    },
    editMode: function() {
        return Session.get("listItemEditMode");
    },
    filtering: function() {
        return Session.get("filtering");
    }
});

Template.listItemsForm.events({
    'click .saveListItem' (event) {
        event.preventDefault();
        let item = $("#findListItems").val();
        let listId = Session.get("listId");
        if (item == null || item == "") {
            Session.set("itemReqErr", true);
        } else {
            Meteor.call("add.listItem", item, listId, function(err, result) {
                if (err) {
                    console.log("    ERROR adding item to list: " + err);
                } else {
                    console.log("    SUCCESS adding item to list.");
                    $("#findListItems").val("");
                }
            });
        }
    },
    'keydown #findListItems' (event) {
        if (event.which === 13) {
            let item = $("#findListItems").val();
            let listId = Session.get("listId");
            if (item == null || item == "") {
                Session.set("itemReqErr", true);
            } else {
                Meteor.call("add.listItem", item, listId, function(err, result) {
                    if (err) {
                        console.log("    ERROR adding item to list: " + err);
                    } else {
                        console.log("    SUCCESS adding item to list.");
                        $("#findListItems").val("");
                    }
                });
            }
        }
    },
    'click #showReceivedItems' (event) {
        if ($("#showReceivedItems").prop('checked') == true) {
            Session.set("showReceivedItems", true);
        } else {
            Session.set("showReceivedItems", false);
        }
    },
    'keyup #searchListItems' (event) {
        if (event.which !== 13) {
            let searchVal = $("#searchListItems").val();
            Session.set("searchVal", searchVal);
        }
    },
    'keyup #findListItems' (event) {
        if (event.which !== 13) {
            let listItemObj = {};
            let findItemVal = $("#findListItems").val();
            console.log("Should start showing options now...");
            Session.set("listItemVal", findItemVal);
            let listItemInfo = Products.find({ prodName: {$regex: findItemVal + '.*', $options: 'i'}}, { limit: 5 }).fetch();
            if (typeof listItemInfo != 'undefined' && listItemInfo != "" && listItemInfo != null) {
                // console.log("       listItemInfo: ");
                // console.dir(listItemInfo);
                for (i=0; i < listItemInfo.length; i++) {
                    let item = listItemInfo[i].prodName;
                    let store = listItemInfo[i].prodStore;
                    listItemObj[item] = store;
                }
                Session.set("findListItems", listItemObj);
            }
            
        }
    },
    'click #filterOn' (event) {
        event.preventDefault();
        Session.set("filtering", true);
    },
    'click #filterOff' (event) {
        event.preventDefault();
        Session.set("filtering", false);
    }
});