import { Products } from '../../../imports/api/products.js';
import { Stores } from '../../../imports/api/stores.js';
import { M } from '../../lib/assets/materialize.js';

Template.prodMgmtForm.onCreated(function() {
    this.subscribe("myProducts");
    this.subscribe("storeInfo");
});

Template.prodMgmtForm.onRendered(function() {
    setTimeout(function() {
        var elems = document.querySelectorAll('select');
        var instances = M.FormSelect.init(elems, {});
    }, 200);

    var elemm = document.querySelectorAll('.modal');
    var instancem = M.Modal.init(elemm, {});

    Session.set("prodEditMode", false);
});

Template.prodMgmtForm.helpers({
    stores: function() {
        return Stores.find({}); 
    },
    prodNameErr: function() {
        return Session.get("prodNameRed");
    },
    prodEditMode: function() {
        return Session.get("prodEditMode");
    },
});

Template.prodMgmtForm.events({
    'click .saveProdMgmt' (event) {
        event.preventDefault();
        let name = $("#prodName").val();
        let store = $("#prodStore").val();

        if (store == null) {
            store = "";
        }

        if (name == "" || name == null) {
            Session.set("prodNameRed", true);
            return;
        } else {
            Meteor.call('add.product', name, store, function(err, result) {
                if (err) {
                    console.log("     ERROR: can't add product: " + err);
                } else {
                    $("#prodName").val("");
                    let elemse = document.querySelectorAll('select');
                    let instancese = M.FormSelect.init(elemse, {});
                    showSnackbar("Succesffuly Added Product!", "green");
                }
            });
        }
    },
    'click .editProdMgmt' (event) {
        event.preventDefault();
        let name = $("#prodName").val();
        let prodId = Session.get("prodEditId");
        let store = $("#prodStore").val();

        if (store == null) {
            store = "";
        }

        if (name == "" || name == null) {
            Session.set("prodNameRed", true);
            return;
        } else {
            Meteor.call('edit.product', prodId, name, store, function(err, result) {
                if (err) {
                    // console.log("     ERROR: can't add product: " + err);
                } else {
                    $("#prodName").val("");
                    Session.set("prodEditMode", false);
                    showSnackbar("Product Edited Successfully!", "green");
                }
            });
        }
    },
    'keypress form.prodInputForm' (event) {
        // event.preventDefault();
        if (event.which === 13) {
            let name = $("#prodName").val();
            let store = $("#prodStore").val();
            let prodId = Session.get("prodEditId");
            let prodEditMode = Session.get("prodEditMode");
            // console.log("    ----    got the submit event for products.");

            if (store == null) {
                store = "";
            }

            if (name == "" || name == null) {
                Session.set("prodNameRed", true);
                return;
            } else {
                if (prodEditMode == true) {
                    Meteor.call('edit.product', prodId, name, store, function(err, result) {
                        if (err) {
                            console.log("     ERROR: can't add product: " + err);
                        } else {
                            $("#prodName").val("");
                            showSnackbar("Successfully Edited Product!", "green");
                        }
                    });
                } else {
                    Meteor.call('add.product', name, store, function(err, result) {
                        if (err) {
                            console.log("     ERROR: can't add product: " + err);
                        } else {
                            $("#prodName").val("");
                            showSnackbar("Product Added Succssfully!", "green");
                        }
                    });
                }
            }
        }
    },
    'change #prodStore' (event) {
        // event.preventDefault();
        console.log("detected event");
        let val = $("#prodStore").val();
        console.log("Value detected: " + val);
        
        if (val == "addNewStore") {
            console.log("got the request for modal.");
            $("#prodStore").val("");
            // open modal to add a new store
            let elemmm = document.getElementById('modalStore');
            let storeModal = M.Modal.getInstance(elemmm);
            storeModal.open();
        }
    },
});