const sliderCustomerReview = (function(){
	
	//const
	const slider = document.getElementById("slider");
	const sliderContent = document.querySelector(".slider-content");
	const sliderWrapper = document.querySelector(".slider-content-wrapper");
	const elements = document.querySelectorAll(".slider-content__item");
	const sliderContentControls = createHTMLElement("div", "slider-content__controls");
	let prevButton = null;
	let nextButton = null;
	let leftArrow = null;
	let rightArrow = null;
	let intervalId = null;
	let nextButtonEnd = false;
	let prevButtonEnd = false;
	// data
	const itemsInfo = {
		offset: 0,
		position: {
			current: 0,
			min: 0,
			max: elements.length - 1
		},
		intervalSpeed: 2000,

		update: function(value) {
			this.position.current = value;
			this.offset = -value;
		},
		reset: function() {
			this.position.current = 0;
			this.offset = 0;
		}	
	};

	const controlsInfo = {
		buttonsEnabled: false,
		dotsEnabled: false,
		prevButtonDisabled: true,
		nextButtonDisabled: false
	};

	function init(props) {
		let {intervalSpeed, position, offset} = itemsInfo;
		
		if (slider && sliderContent && sliderWrapper && elements) {
			if (props && props.intervalSpeed) {
				intervalSpeed = props.intervalSpeed;
			}
			if (props && props.currentItem) {
				if ( parseInt(props.currentItem) >= position.min && parseInt(props.currentItem) <= position.max ) {
					position.current = props.currentItem;
					offset = - props.currentItem;	
				}
			}
			if (props && props.buttons) {
				controlsInfo.buttonsEnabled = true;
			}
			if (props && props.dots) {
				controlsInfo.dotsEnabled = true;
			}
			
			_updateControlsInfo();
			_createControls(controlsInfo.dotsEnabled, controlsInfo.buttonsEnabled);
			_render();	
		} else {}
	}

	function _updateControlsInfo() {
		const {current, min, max} = itemsInfo.position;
		controlsInfo.prevButtonDisabled = current > min ? false : true;
		controlsInfo.nextButtonDisabled = current < max ? false : true;
	}

	function _createControls(dots = false, buttons = false) {
		slider.append(sliderContentControls);
		createArrows();
		function createArrows() {
			const dValueLeftArrow = {
				points:"25 30 15 20 25 10", 
				fill:"none",
				stroke:"#1B3146",
				strokelinecap:"round", 
				strokelinejoin:"round",
				strokewidth:"2",
				fillrule:"evenodd", 
			}
			const dValueRightArrow = {
				points:"15 10 25 20 15 30",
				fill:"none", 
				stroke:"#000", 
				strokelinecap:"round", 
				strokelinejoin:"round",
				strokewidth:"2",
				fillrule:"evenodd",
			};
			const leftArrowSVG = createSVG(dValueLeftArrow);
			const rightArrowSVG = createSVG(dValueRightArrow);
			
			leftArrow = createHTMLElement("div", "prev-arrow");
			leftArrow.append(leftArrowSVG);
			leftArrow.addEventListener("click", () => updateItemsInfo(itemsInfo.position.current - 1))
			rightArrow = createHTMLElement("div", "next-arrow");
			rightArrow.append(rightArrowSVG);
			rightArrow.addEventListener("click", () => updateItemsInfo(itemsInfo.position.current + 1))

			sliderContentControls.append(leftArrow, rightArrow);
			
			// SVG function
			function createSVG(dValue, color="currentColor") {
				const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
				svg.setAttribute("viewBox", "0 0 40 40");
				const path = document.createElementNS("http://www.w3.org/2000/svg", "polyline");
				path.setAttribute("points", dValue['points']);
				path.setAttribute("fill", dValue['fill']);
				path.setAttribute("stroke", dValue['stroke']);
				path.setAttribute("stroke-linecap", dValue['strokelinecap']);
				path.setAttribute("stroke-linejoin", dValue['strokelinejoin']);
				path.setAttribute("stroke-width", dValue['strokewidth']);
				path.setAttribute("fill-rule", dValue['fillrule']);
				svg.appendChild(path);	
				return svg;
			}
		}		
	}

	function setClass(options) {
		if (options) {
			options.forEach(({element, className, disabled}) => {
				if (element) {
					disabled ? element.classList.add(className) : element.classList.remove(className)	
				} else {}
			})
		}
	}

	function updateItemsInfo(value) {
		itemsInfo.update(value);
		_slideItem(true);	
	}

	function _render() {
		const {prevButtonDisabled, nextButtonDisabled} = controlsInfo;
		let controlsArray = [
			{element: leftArrow},
			{element: rightArrow}
		];
		if (controlsInfo.buttonsEnabled) {
			controlsArray = [
				...controlsArray, 
				{element:prevButton},
				{element:nextButton}
			];
		}
		
		setClass(controlsArray);
		
		if(nextButtonEnd === true && controlsInfo.nextButtonDisabled){
			sliderWrapper.style.transform = `translateX(-${itemsInfo.position.min*100}%)`;	
			nextButtonEnd = false;
			updateItemsInfo(itemsInfo.position.min);
		} else if(prevButtonEnd === true && controlsInfo.prevButtonDisabled){
			sliderWrapper.style.transform = `translateX(-${itemsInfo.position.max*100}%)`;	
			prevButtonEnd = false;
			updateItemsInfo(itemsInfo.position.max);
		} else if(itemsInfo.position.current === itemsInfo.position.max){
			sliderWrapper.style.transform = `translateX(${itemsInfo.offset*100}%)`;	
			nextButtonEnd = true;
		} else if (itemsInfo.position.current === itemsInfo.position.min){
			sliderWrapper.style.transform = `translateX(${itemsInfo.offset*100}%)`;	
			prevButtonEnd = true;
		}  else {
			sliderWrapper.style.transform = `translateX(${itemsInfo.offset*100}%)`;	
			nextButtonEnd = false;
			prevButtonEnd = false;
		}
		
	}

	function _slideItem(autoMode = false) {
		if (autoMode && intervalId) {
			clearInterval(intervalId);
		}
		_updateControlsInfo();
		_render();
	}

	function createHTMLElement(tagName="div", className, innerHTML) {
		const element = document.createElement(tagName);
		className ? element.className = className : null;
		innerHTML ? element.innerHTML = innerHTML : null;
		return element;
	}

	return {init};
}())

sliderCustomerReview.init({
	intervalSpeed: 1000,
	currentItem: 0,
	buttons: true,
	dots: true,responsive: {
		0: {
		  items: 1
		},
		568: {
		  items: 2
		},
		600: {
		  items: 3
		},
		1000: {
		  items: 3
		}
	  }
});