silk.shop.basket = ( xb.core.object.extend( {

	ctor: function( domNode ) {
		this.resource = null;
		this.domNode = domNode;
	},

	init: function( resource ) {
		this.resource = resource;
		var self = this;
		$( this.domNode ).on( "click touchend", function( evt ) {
			self.__onClick( evt );
		} );
		$( this.domNode ).on( "change", function( evt ) {
			self.__onChange( evt );
		} );

	},

	list: function() {
		var entry = this.resource.data.basket[ 1 ];
		if ( typeof( entry ) === "object" && entry !== null ) {
			return entry[ "basket-list" ];
		}
		return [];
	},

	__onClick: function( evt ) {
//		this.onClickBasket( evt );
		this.onClickProduct( evt );
	},

	__onChange: function( evt ) {
		var t = evt.target;
		if ( !$( t ).parents( "[data-simply-list=basket-list]" ).length ) {
			return;
		}
		if ( t.tagName.toLowerCase() === "select" ) {
			var value = t.options[ t.selectedIndex ].value;
			this.setDeliveryMethod( value );
		} else if ( t.getAttribute( "data-simply-field" ) === "basket-amount" ) {

		}
	},

	setDeliveryMethod: function( value ) {
		this.add( {
			"delivery": value
		} );
	},

	getDeliveryMethod: function() {
		return this.resource.getDeliveryMethod();
	},

	onClickProduct: function( evt ) {
		//console.log( "Clicked me", this, evt.target );
		if ( $( evt.target ).is( ".silk-elm.basket-option" ) ) {
			$( evt.target )
				.parents( ".silk-object.basket-options > .silk-list" )
				.find( ".silk-elm.basket-option" )
				.each( function() {
					if ( this !== evt.target ) {
						$( this ).removeClass( "selected" );
					} else {
						$( this ).addClass( "selected" );
					}
				} )
			;
			return false;
		}

		var toAdd = $( evt.target ).is( ".button.basket-add" ) ||  ( $( evt.target ).parents( ".button.basket-add" ).length > 0 );
		var toOrder = !toAdd && ( $( evt.target ).is( ".button.basket-order" ) || ( $( evt.target ).parents( ".button.basket-order" ).length > 0 ) );
		if ( toAdd || toOrder ) {
			return this.onAddToBasket( evt, toOrder );
		}
	},

	getInfo: function( domNode ) {
		var template = $( domNode ).parents( "[data-simply-data] > .silk-listItem" );
		if ( !template.length ) {
			console.error( "basket::onAddToBasket", "could not find template listItem" );
			return null;
		}
		var id = template.find( ".silk-id.posting-id" );
		if ( !id.length ) {
			console.error( "basket::onAddToBasket", "could not find posting-id for product" );
			return null;
		}
		var amountValue = 0;
		var amount = template.find( "input.silk-elm.basket-amount" );
		if ( amount.length ) {
			amountValue = ( amount[ 0 ].value );
		} else {
			amount = template.find( ".silk-elm.basket-amount" );
			if ( amount.length ) {
				amountValue = ( amount[ 0 ].textContent );
			}					
		}


		var optionValue = null;
		var option = template.find( ".silk-elm.basket-option.selected" );
		if ( option.length ) {
			optionValue = option[ 0 ].textContent;
		}
		var resource = template[ 0 ].parentNode.getAttribute( "data-simply-data" );
		return ( {
			resource: resource,
			template: template,
			id: id[ 0 ].textContent,
			option: option,
			optionValue: optionValue,
			amount: amount,
			amountValue: amountValue
		} );

	},

	onAddToBasket: function( evt, checkout ) {
		evt.preventDefault();
		var info = this.getInfo( evt.target );
		if ( info === null ) {
			return null;
		}
		this.add( {
			"amount": 1,
			"option": info.optionValue,
			"checkout": info.checkout,
			"id": info.id,
			"resource": info.resource
		} );
	},

	onClickBasket: function( evt ) {
		var target = evt.target;
		if ( $( target ).hasClass( "basket-icon" ) || $( target ).parents( ".basket-icon" ).length ) {
			var basket = $( target ).parents( ".silk-object.basket" );
			if ( basket.length ) {
				basket.toggleClass( "open" );
				evt.preventDefault();
				
			}
		}
		var product = $( target ).parents( ".silk-object.basket-product" );

		var add = 0;
		if ( $( target ).hasClass( "icon" ) ) {
			if ( $( target ).hasClass( "minus" ) ) {
				add = -1;
			} else if ( $( target ).hasClass( "plus" ) ) {
				add = 1;
			} else if ( $( target ).hasClass( "delete" ) ) {
				var amount = product.find( "input.silk-elm.basket-amount" );
				if ( amount.length ) {
					add = -( amount[ 0 ].value );
				} else {
					var amount = product.find( ".silk-elm.basket-amount" );
					if ( amount.length ) {
						add = -( amount[ 0 ].textContent );
					}					
				}
			}
		}
		if ( add !== 0 ) {
			if ( product.length ) {
				var resource = product.find( ".silk-id.product-resource" );
				var id = product.find( ".silk-id.product-id" );
				var option = product.find( ".silk-elm.product-option" );
				if ( id.length && option.length ) {
					this.add( {
						"amount": add,
						"resource": resource[ 0 ].textContent,
						"id": id[ 0 ].textContent,
						"option": option[ 0 ].textContent
					} );
				}
			}
			evt.preventDefault();
		}
	},

	add: function( params ) {
		var self = this;
		var params = ( typeof( params ) === "object" ) ? params : {};
		var http = new XMLHttpRequest();
		http.open( "post", "/components/apps/shop/basket/json.add.php", true );
		http.setRequestHeader( "Content-type", "application/x-www-form-urlencoded" );
		http.onreadystatechange = function() {
			if ( http.readyState == 4 ) {
				if ( http.status == 200 ) {
					self.resource.init();
					if ( params.checkout === true ) {
						window.location = "/afrekenen/";
						return;
					}
					$( ".silk-object.basket" ).addClass( "open" );
				}
			}
		};
		http.send( jQuery.param( params ) );		
	}


} ) )( document );

silk.shop.basket.__node = xb.core.object.extend( {

	ctor: function( domNode ) {
		this.domNode = domNode;
	}

} );

silk.shop.basket.__mount = xb.core.object.extend( silk.shop.basket.__node, {

	ctor: function( resource, domNode ) {
		silk.shop.basket.__node.prototype.ctor.call( this, domNode );
		this.resource = resource;
	},

	data: function() {
		var l = this.resource.data[ this.domNode.getAttribute( "data-simply-list" ) ];
		for ( var i = 0, il = l.length; i < il; i++ ) {
			if ( l[ i ][ "data-simply-template" ] === "basket-note" ) {
				return l[ i ];
			}
		}
		return {};
	},

} );



silk.shop.basket.__list = xb.core.object.extend( silk.shop.basket.__node, {

	ctor: function( parent, domNode ) {
		silk.shop.basket.__node.prototype.ctor.call( this, domNode );
		this.mount = parent;
	},

	data: function() {
		var result = this.mount.data()[ this.domNode.getAttribute( "data-simply-list" ) ];
		if ( result instanceof Array ) {
			return result;
		}
		return [];
	},

} );

silk.shop.basket.__product = xb.core.object.extend( silk.shop.basket.__node, {

	ctor: function( parent, domNode ) {
		silk.shop.basket.__node.prototype.ctor.call( this, domNode );
		this.list = parent;
		this.fields = {};
		this.init();
	},

	init: function() {
		var query = silk.drivers.library.get( "shop/basket/product/field" );
		if ( query === null ) {
			console.error( "silk.shop.basket.product::init", "query for fields not found!" );
			return;
		}
		var l = query.find( this.domNode );
		for ( var i = 0, il = l.length; i < il; i++ ) {
			if ( typeof( l[ i ].fn ) === "function" ) {
				var f = l[ i ].fn( this, l[ i ].domNode );
				this.fields[ f.name() ] = f;
			}
		}
	},


	data: function() {
		var id = this.fields[ "product-id" ];
		if ( !id ) {
			return null;
		}
		var idValue = id.value();
		var l = this.list.data();
		for ( var i = 0, il = l.length; i < il; i++ ) {
			var object = l[ i ];
			if ( object[ "product-id" ] == idValue ) {
				return object;
			}
		}
		return null;
	},

} );

silk.shop.basket.__product.field = xb.core.object.extend( silk.shop.basket.__node, {

	ctor: function( parent, domNode ) {
		silk.shop.basket.__node.prototype.ctor.call( this, domNode );		
	},

	name: function() {
		return this.domNode.getAttribute( "data-simply-field" );
	},

	value: function() {
		var tagName = this.domNode.tagName.toLowerCase();
		switch ( tagName ) {
			case "input":
				return this.domNode.value;
			break;
		}
		return this.domNode.textContent;
	},

} );

silk.shop.basket.__product.list = xb.core.object.extend( silk.shop.basket.__product.field, {

	name: function() {
		return this.domNode.getAttribute( "data-simply-list" );
	},

	value: function() {
		console.error( "basket.__product.list(field)::value", "not yet implemented" );
		return null;
	},


} );



silk.html
	.query(
		".silk-object.basket > [data-simply-data] := resource"
	)
	.select(
		function( m ) {
			var domNode = m.resource.domNode;
			var resourceName = domNode.getAttribute( "data-simply-data" );
			return silk.shop.basket.__mount( dispatcher.resources[ resourceName ].resource, domNode );
		} 
	)
	.publish( "shop/basket/mount" )
;

silk.html
	.query(
		"$( shop/basket/mount ) := mount .silk-object.basket-list > [data-simply-list] := object"
	)
	.select(
		function( m ) {
			return silk.shop.basket.__list( m.mount, m.object.domNode );
		} 
	)
	.publish( "shop/basket/list" )
;

silk.html
	.query(
		"$( shop/basket/list ) := list > .silk-listItem := object"
	)
	.select(
		function( m ) {
			return silk.shop.basket.__product( m.list, m.object.domNode );
		} 
	)
	.publish( "shop/basket/product" )
;

silk.html
	.query(
		"[data-simply-field] := object"
	)
	.select(
		function( m ) {
			return ( {
				fn: silk.shop.basket.__product.field,
				domNode: m.object.domNode
			} );
		} 
	)
	.publish( "shop/basket/product/field" )
;

silk.html
	.query(
		"[data-simply-list] := object"
	)
	.select(
		function( m ) {
			return ( {
				fn: silk.shop.basket.__product.list,
				domNode: m.object.domNode
			} );
		} 
	)
	.publish( "shop/basket/product/field" )
;


silk.html
	.query( [
		"$( shop/basket/product ) := product .silk-elm.icon.delete := remove ",
		"$( shop/basket/product ) := product .silk-elm.icon.plus := plus ",
		"$( shop/basket/product ) := product .silk-elm.icon.minus := min",
	] )
	.on( "events/click", function( evt ) {
		var data = this.product.data();
		var basketAmount = data[ "basket-amount" ];
		if ( typeof( basketAmount ) === "object" ) {
			basketAmount = 0 + data[ "basket-amount" ].innerHTML;
		}
		switch ( true ) {
			case ( typeof( this.remove ) !== "undefined" ):
				console.log( "remove", data );
				amount = -( basketAmount );
			break;
			case ( typeof( this.plus ) !== "undefined" ):
				console.log( "add", data );
				amount = 1;
			break;
			case ( typeof( this.min ) !== "undefined" ):
				console.log( "remove", data );
				amount = -1;
			break;
		}

		evt.stopImmediatePropagation();
		silk.shop.basket.add( {
			resource: data[ "product-resource" ],
			id: data[ "product-id" ],
			amount: amount,
			option: data[ "product-option" ]
		} );

	} )
;


silk.html
	.query( [
		"$( shop/basket/product ) := product .silk-elm.basket-amount := object",
	] )
	.on( "events/focus/out", function( evt ) {
		var data = this.product.data();
		var basketAmount = data[ "basket-amount" ];
		if ( typeof( basketAmount ) === "object" ) {
			basketAmount = 0 + data[ "basket-amount" ].innerHTML;
		}
		var toValue = this.product.fields[ "basket-amount" ].value();
		var amount = toValue - basketAmount;
		console.log( "apply(check)", amount);
		if ( !amount ) {
			console.log( "Not going to update basket" );
			return;
		}
		silk.shop.basket.add( {
			resource: data[ "product-resource" ],
			id: data[ "product-id" ],
			amount: amount,
			option: data[ "product-option" ]
		} );
	} )
;


silk.html
	.query( [
		".silk-object.basket := object .silk-object.basket-icon",
	] )
	.on( "events/click", function( evt ) {
		evt.stopImmediatePropagation();
		var classList = this.object.domNode.classList;
		classList.toggle( "open" );
		if ( classList.contains( "open" ) ) {
			document.body.classList.add( "basket-open" );
		} else {
			document.body.classList.remove( "basket-open" );
		}
	} )
;

silk.html
	.query( [
		"body.basket-open := object",
	] )
	.on( "events/click", function( evt ) {
		var basket = this.object.domNode.querySelector( ".silk-object.basket:not(.inline)" );
		if ( basket !== null ) {
			basket.classList.remove( "open" );
		}
		this.object.domNode.classList.remove( "basket-open" );

	} )
;