//var ItemListingEntry = require('./ItemListingEntry');
import _Cart from "./_Cart.js";
import _Item from './_Item.js';
import _User from './_User.js';
import _Modal from './_Modal.js';
import _Message from './_Message.js';
import _Image from './_Image.js';
import _DB from './_DB.js';
import ItemModalView from './ItemModalView.js';
import isUndefined from './util/isUndefined.js';
import toNumber from "./util/toNumber";
import isNumber from "./util/isNumber";

function ItemListingEntry(initialVnode) {
  return {
    view: function(vnode) {
      var item = vnode.attrs.item;
      var index = vnode.attrs.index;
      var chosen_images = vnode.attrs.chosen_images;
      var chosen_image = chosen_images[index];
      var lineitem = _Cart.lineItemOfItem(item);
      var thumbnail_path = ( chosen_image ? _Image.thumbnailPath(_DB.getRecord(chosen_image), '180') : false );
      return m('.column.col-3.col-md-6.col-xs-12.mt-2', [
                m(".card.c-hand", {
                    onclick: function(e){
                      _Item.getFullItemInfo(item).then(function(){
                        _Modal.show(ItemModalView, {item: item});
                        });
                      }
                    },[
                  m('.card-image.p-centered',[
                    (item.image_ids.length === 0
                      ?
                      m("img.img-responsive", {src: _Image.placeholder_img_180_path })
                      :
                      [
                        m("img.img-responsive", {src: thumbnail_path }),
                        m('.form-group.text-center',
                          item.image_ids.map(function(image_id){
                            return m('label.form-radio.label-sm.form-inline', [
                              m('input.input-sm', {
                                type:'radio', 
                                name: item.id.toString(),
                                value: image_id, // is this converted to string?
                                checked: chosen_image===image_id,
                                onchange: function(e){
                                  chosen_images[index] = image_id;
                                  e.stopPropagation();
                                  }
                                }),
                              m('i.form-icon',{onclick:function(e){
                                  chosen_images[index] = image_id;
                                  e.stopPropagation(); // So a modal box doesn't open-up
                                  return false; // I don't know why I need this in addition to stopPropagation().
                                  }
                                },"")
                              ])
                            })
                          )
                        ]
                      )
                    ]),
                  m('.card-header', [
                    m(".card-title.h6.text-ellipsis", item.name),
                    m(".card-subtitle.text-gray", item.color),
                    ]),
                  (_User.isGuest() ? null : [
                    m('card-body',[
                      m(".price", '$'+_Item.priceOf(item)),
                      ]),
                    m('card-footer', [
                        m("input[type=text].form-input.text-center.c-auto", {
                          onchange: function(e){
                                      var new_quantity = toNumber(e.target.value);
                                      if(new_quantity === 0){
                                        _Cart.removeByItem(item);
                                        }
                                      else if(!isNumber(new_quantity)){
                                        //console.log("Qty. is not a number.");
                                        _Message.addError("Quantity '"+new_quantity+"' is not a number.");
                                        }
                                      else{
                                        _Cart.updateQuantityOfItem(item, new_quantity);
                                        }
                                      },
                          onfocus: function(e){e.target.select();},
                          onclick: function(e){ e.stopPropagation(); },
                          value: (isUndefined(lineitem) ? 0 : lineitem.quantity)
                          })
                        ])
                      ])
                  ])
      ]);
    }
  }
}
export default ItemListingEntry