/* STICKY MENU */
let navbar = document.getElementById('js-navbar');
var stickyOffset = navbar.offsetTop + navbar.offsetHeight;

window.addEventListener('scroll', () => {
	if (window.pageYOffset >= stickyOffset) {
		navbar.classList.add('sticky');
	}  else  {
		navbar.classList.remove('sticky')
	}
})

/* window.addEventListener('scroll', () => {
	let navbar = document.getElementById('js-navbar');
	navbar.classList.toggle('sticky', window.scrollY > 0);
}) */

/* OFFCANVAS */
var offcanvasElementList = [].slice.call(document.querySelectorAll('.offcanvas'))
var offcanvasList = offcanvasElementList.map(function (offcanvasEl) {
  return new bootstrap.Offcanvas(offcanvasEl)
})

/* BTN MENU BURGER */
let btnBurger = document.getElementById('btnBurger');
btnBurger.addEventListener('click', function(event) {
    this.classList.toggle('active');
});

document.addEventListener('click', function (event) {
	// if the clicked element isn't child of the navbar, you must close it if is open
	if (!event.target.closest('#mainMenu') && !event.target.closest('.form-search-input') && document.getElementById('mainMenu').classList.contains('show')) {
		document.getElementById('btnBurger').click();
	}

	if (!event.target.closest('#langHeader') && document.getElementById('langHeader').classList.contains('active')) {
		langHeaderSelected.classList.remove('active');
	}
});

/* MAIN CATEGORY  */
let checkContainerHeight = document.querySelectorAll('.js-check-container-height');

checkContainerHeight.forEach((elem) =>{
  let menuCategoryLink = elem.parentElement.querySelector('.main-category-card-list');

  if (elem.offsetHeight >= 600){
    menuCategoryLink.classList.add('main-category-card-big');
  }
})

/* LANGUAGE DROPDOWN*/
function show(el) {
	selectLangBtn.querySelector('img').src = el.querySelector('img').src;
	langHeaderSelected.classList.remove('active');

	if(el.closest('#langFooter')){
		selectLangBtnFooter.innerHTML = el.innerHTML;
		langFooterSelector.classList.remove('active');
	}
}
/* LANG MENU HEADER */
let langHeaderSelected = document.getElementById('langHeader');
let selectLangBtn = langHeaderSelected.querySelector('.selected-lang');
selectLangBtn.onclick = function() {
    langHeaderSelected.classList.toggle('active');
}

/* LANG MENU FOOTER */
let langFooterSelector = document.getElementById('langFooter');
let selectLangBtnFooter = langFooterSelector.querySelector('.selected-lang');
let selectedLangContent = langFooterSelector.querySelector('.selected-lang-content');

selectedLangContent.onclick = function() {
    langFooterSelector.classList.toggle('active');
}

/* MODAL GET A DESIGN QUOTE */

let modalGetADesignQuote = document.getElementById('modalGetADesignQuote');
let jsModalGetDesignDropZone = document.getElementById('jsModalGetDesignDropZone');
let jsModalGetDesignTextarea = document.getElementById('jsModalGetDesignTextarea');

var radios = modalGetADesignQuote.querySelectorAll('input[type=radio][name="Upload_Own_Design"]');

function changeHandler() {

   if ( this.value === 'true' ) {
	
	jsModalGetDesignTextarea.querySelector('textarea').value='';
	jsModalGetDesignTextarea.classList.add('d-none');
	jsModalGetDesignDropZone.classList.remove('d-none');

   } else if ( this.value === 'false' ) {
	jsModalGetDesignDropZone.classList.add('d-none');
	jsModalGetDesignTextarea.classList.remove('d-none');
     
   }  
}

Array.prototype.forEach.call(radios, function(radio) {
   radio.addEventListener('change', changeHandler);
});



/* DROP ZONE*/
document.querySelectorAll('.drop-zone-input').forEach((inputElement) => {
	const dropZoneElement = inputElement.closest('.drop-zone');

	dropZoneElement.addEventListener('click', (e) => {
		inputElement.click();
	});

	inputElement.addEventListener('change', (e) => {
		if (inputElement.files.length) {
			updateThumbnail(dropZoneElement, inputElement.files[0]);
		}
	});

	dropZoneElement.addEventListener('dragover', (e) => {
		e.preventDefault();
		dropZoneElement.classList.add('drop-zone-over');
	});

	['dragleave', 'dragend'].forEach((type) => {
		dropZoneElement.addEventListener(type, (e) => {
			dropZoneElement.classList.remove('drop-zone-over');
		});
	});

	dropZoneElement.addEventListener('drop', (e) => {
		e.preventDefault();

		if (e.dataTransfer.files.length) {
			inputElement.files = e.dataTransfer.files;
			updateThumbnail(dropZoneElement, e.dataTransfer.files[0]);
		}

		dropZoneElement.classList.remove('drop-zone-over');
	});
});

function updateThumbnail(dropZoneElement, file) {
	let thumbnailElement = dropZoneElement.querySelector('.drop-zone-thumb');

	if (dropZoneElement.querySelector('.drop-zone-prompt')) {
		dropZoneElement.querySelector('.drop-zone-prompt').remove();
	}

	if (!thumbnailElement) {
		thumbnailElement = document.createElement('div');
		thumbnailElement.classList.add('drop-zone-thumb');
		dropZoneElement.appendChild(thumbnailElement);
	}

	thumbnailElement.dataset.label = file.name;

	if (file.type.startsWith('image/')) {
		const reader = new FileReader();

		reader.readAsDataURL(file);
		reader.onload = () => {
			thumbnailElement.style.backgroundImage = `url('${reader.result}')`;
		};
	} else {
		thumbnailElement.style.backgroundImage = null;
	}
}

 /* *********************** ADD TOM SELECT ************************** */

let quantitySelectOptions = {
	controlInput: null,
	render: {
		item: function(data, escape) {
			let selectedText = escape(data.text);

			let option = `<div class="d-flex align-items-center text-start">Quantity:<span class="fw-bold ms-1 me-5"> ${selectedText}</span> <span class="fw-bold text-green">$11,100.00</span></div>`;
			return option;
		}
	}
}

document.querySelectorAll('.tom-select-cart').forEach((el)=>{
	new TomSelect(el, quantitySelectOptions);
});  
document.querySelectorAll('.tom-select').forEach((el)=>{
	new TomSelect(el, {});
});  


/* CALCULATE SHIPPING & TURNAROUND */

let linkCalculate = document.getElementById('linkCalculate');
let inputCodeShipping = document.getElementById('inputCodeShipping');
let formPrintDetailsCalculate = document.getElementById('formPrintDetailsCalculate');

linkCalculate.addEventListener('click', (e) =>{
	e.preventDefault();
	
	let btnChange = document.createElement('a');
	btnChange.href="javascript:void(0)";
	btnChange.innerText = 'Change'; 
	btnChange.className = 'ms-3'; 

	let label =  e.target.closest('div.js-shopping-calculate-block').querySelector('label');

	label.innerHTML = 'Shipping to ' + inputCodeShipping.value;
	label.append(btnChange);

	inputCodeShipping.classList.add('d-none');
	formPrintDetailsCalculate.classList.remove('d-none');

});

inputCodeShipping.addEventListener('change', (event) =>{
	linkCalculate.classList.add('text-primary');

	if(inputCodeShipping.value > 0){
		linkCalculate.classList.add('text-primary');

	}else{
		linkCalculate.classList.remove('text-primary');

	}
});

