import _Item from "./_Item.js";
import _Image from './_Image.js';
import _Modal from './_Modal.js';
import _User from './_User.js';
//import _LargeImage from './_LargeImage.js';

var _chosen_image = {
  item: null,
  chosen_image: null
  };

var ItemModalView = function(){
return {
view: function(vnode){
var item = vnode.attrs.item;
if(_chosen_image.item !== item){
  _chosen_image.item = item;
  _chosen_image.chosen_image = item.image_ids[0];
  }
var chosen_image = _chosen_image.chosen_image;
var thumbnail_path = ( chosen_image ? _Image.thumbnailPath(_DB.getRecord(chosen_image), '960') : false );
/*
return [
  m('.modal-header', [
    m('a.btn.btn-clear.float-right', {'aria-label':"Close", onclick: function(){ _Modal.close(); }}),
    m('.modal-title.h4', item.name)
    ]),
  m('.modal-body', [
    m("img.img-responsive", {src: thumbnail_path || _Image.placeholder_img_960_path })
    ]),
  m('.modal-footer', [
    m('div', '$'+_Item.priceOf(item)),
    m('button.btn.btn-primary', 'Add to Cart')
    ])
  ];
  */
return m('.item-modal-view', [
  m('a.btn.btn-clear.float-right', {'aria-label':"Close", onclick: function(){ _Modal.close(); }}),
  m('.h4.text-center', item.name),
  m("img.img-responsive", {
    src: thumbnail_path || _Image.placeholder_img_960_path,
    onclick: function(e){
      e.stopPropagation();
      if(thumbnail_path !== false){
        window.open(_Image.thumbnailPath(_DB.getRecord(chosen_image), 'original'), '_blank');
        }
      //_LargeImage.src = (thumbnail_path ? _Image.thumbnailPath(_DB.getRecord(item.image_ids[0]), 'original') : null);
      }
    }),
  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()+'modal', // to distinguish from 'ItemListingEntry' radio buttons
          value: image_id, // is this converted to string?
          checked: chosen_image===image_id,
          onchange: function(e){
            _chosen_image.chosen_image = image_id;
            }
          }),
        m('i.form-icon',"")
        ]);
      })
    ),
  m('ul', [
    m('li', 'Color: '+item.color+' ('+item.color_description+')'),
    m('li', 'Size: '+(item.size || 'N/A')),
    m('li', 'Material: '+(item.material || 'N/A'))
    ]),
  m('p', item.description_short),
  ( _User.isLoggedIn() ? [
    m('div', '$'+_Item.priceOf(item) ),
    m('button.btn.btn-primary', 'Add to Cart')
    ]
    : null )
  ]);
}
};
};

export default ItemModalView;