import {ServerComponent} from '../server-component.js';

class ProductsComponent extends ServerComponent{
	constructor ()
	{
		super();

		this.name = "Products";
		this.attributes = ["data-v-component-products"],

		this.image ="icons/products.svg";
		this.html = '<div class="form-group"><label>Your response:</label><textarea class="form-control"></textarea></div>';
		
		this.properties = [{
			name: false,
			key: "type",
			inputtype: RadioButtonInput,
			htmlAttr:"data-v-type",
			data: {
				inline: true,
				extraclass:"btn-group-fullwidth",
				options: [{
					value: "autocomplete",
					text: "Autocomplete",
					title: "Autocomplete",
					icon:"la la-search",
					extraclass:"btn-sm",
					checked:true,
				}, {
					value: "automatic",
					icon:"la la-cog",
					text: "Configuration",
					title: "Configuration",
					extraclass:"btn-sm",
				}],
			},
			
			setGroup: group => {
				$('.form-group[data-group]').attr('style','display:none !important');
				$('.form-group[data-group="'+ group + '"]').attr('style','');
				//return element;
			}, 		
			onChange : function(element, value, input)  {
				this.setGroup(input.value);
				return element;
			}, 
			init: function (node) {
				//this.setGroup(node.dataset.vType);
				//return 'autocomplete';
				return node.dataset.vType;
			},            
		},{
			name: "Products",
			key: "products",
			group:"autocomplete",
			htmlAttr:"data-v-product_id",
			inline:true,
			col:12,
			inputtype: AutocompleteList,
			data: {
				url: "/admin/?module=editor/autocomplete&action=products",
			},
		},{
			name: "Nr. of products",
			group:"automatic",
			col:6,
			inline:true,
			key: "limit",
			htmlAttr:"data-v-limit",
			inputtype: NumberInput,
			data: {
				value: "8",//default
				min: "1",
				max: "1024",
				step: "1"
			},        
		},{
			name: "Start from page",
			group:"automatic",
			col:6,
			inline:true,
			key: "page",
			htmlAttr:"data-v-page",
			data: {
				value: "1",//default
				min: "1",
				max: "1024",
				step: "1"
			},        
			inputtype: NumberInput,
		},{
			name: "Order by",
			group:"automatic",
			key: "order",
			col:6,
			inline:true,
			htmlAttr:"data-v-order_by",
			inputtype: SelectInput,
			data: {
				options: [{
					value: "NULL",
					text: "Default"
				}, {
					value: "price",
					text: "Price"
				}, {
					value: "date_added",
					text: "Date added"
				}, {
					value: "date_modified",
					text: "Date modified"
				}/*, {
					value: "sales",
					text: "Sales"
				}*/]
			}
		},{	
			name: "Order direction",
			group:"automatic",
			key: "order",
			col:6,
			inline:true,
			htmlAttr:"data-v-direction",
			inputtype: SelectInput,
			data: {
				options: [{
					value: "asc",
					text: "Ascending"
				}, {
					value: "desc",
					text: "Descending"
				}]
			}
		},{
			name: "Limit to categories",
			group:"automatic",
			key: "category",
			htmlAttr:"data-v-category",
			inline:true,
			col:12,
			inputtype: TagsInput,
			data: {
				url: "/admin/?module=editor/autocomplete&action=categories",
			},

		},{
			name: "Limit to manufacturers",
			group:"automatic",
			key: "manufacturer",
			htmlAttr:"data-v-manufacturer",
			inline:true,
			col:12,
			inputtype: TagsInput,
			data: {
				url: "/admin/?module=editor/autocomplete&action=manufacturers",
			}
		}];
	}

    init(node)
	{
		console.log(node);
		$('.form-group[data-group]').attr('style','display:none !important');
		
		if (node.dataset.vType != undefined)
		{
			$('.form-group[data-group="'+ node.dataset.vType + '"]').attr('style','');
		} else
		{		
			$('.form-group[data-group]:first').attr('style','');
		}
	}
}

let productsComponent = new ProductsComponent;

export {
  productsComponent
};
