const translations = {
	'FR_fr': {
		'head': 'la base de données cartographique ouverte, collaborative et mondiale',
		'main': '\n' +
			'                        Chacun est libre de contribuer et d’utiliser les données à condition de protéger et de\n' +
			'                        contribuer à faire\n' +
			'                        grandir\n' +
			'                        OpenStreetMap.\n' +
			'\n' +
			'                        Ceci est un résumé expliquant simplement (et en aucun cas un substitut à) la licence ODbL (en\n' +
			'                        anglais).\n' +
			'\n' +
			'                        OpenStreetMap® est disponible en données libres, sous licence de base de données ouverte Open\n' +
			'                        Data Commons\n' +
			'                        (ODbL)\n' +
			'                        (ODbL) par la Fondation OpenStreetMap (OSMF).\n' +
			'                        Vous êtes autorisé à :\n' +
			'                        '
	},
	'EN_en': {
		'head': 'the open, collaborative, global cartographic database',
		'main': '\n' +
			'                        Everyone is free to contribute and use the data, provided that they protect and\n' +
			'                        contribute to the\n' +
			'                        grow\n' +
			'                        OpenStreetMap.\n' +
			'\n' +
			'                        This is a summary explaining simply (and in no way a substitute for) the ODbL license.\n' +
			'                        license.)\n' +
			'\n' +
			'                        OpenStreetMap® is available as free data, under the Open\n' +
			'                        Data Commons\n' +
			'                        (ODbL) open database license\n' +
			'                        (ODbL) by the OpenStreetMap Foundation (OSMF).\n' +
			'                        You are authorized to :'
	}
}
let defaultLang = 'FR_fr'
// let defaultLang = 'EN_en'

window.addEventListener('load', (event) => {
	// console.log("La page est complètement chargée");
	let tab_choices = document.querySelectorAll('.tab-choice')
	let tabs_content = document.querySelectorAll('.tab-item')

	/**
	 * choix de tab, onglets
	 */
	tab_choices.forEach(element => {
		element.addEventListener('click', (event) => {
			console.log('clicked', event)
			let attribut = element.getAttribute('data-activate-tab')
			console.log('tab_choices', tab_choices)
			tabs_content.forEach(element => {
				element.classList.remove('active')
			})
			tab_choices.forEach(element => {
				element.classList.remove('active')
			})
			element.classList.add('active')
			document.querySelector(attribut).classList.add('active')
		})
	})

	/**
 changement de langue
	 */
	let langSelector = document.querySelectorAll('#lang')
	console.log('langSelector', langSelector)
	langSelector[0].addEventListener('click', (event) => {
		console.log('event', event)
		currentLang = document.querySelector('#lang').value
		console.log('currentLang', currentLang)
		applyTranslation()

	})

	let currentLang = defaultLang
	let elementsToTranslate = []

	let applyTranslation = () => {
		elementsToTranslate.forEach((elem) => {

			let dataKey = elem.getAttribute('data-translate')
			let foundString = searchContentInJsonForCurrentLang(dataKey)
			if (foundString) {
				console.log('elem', elem)
				elem.innerHTML = (foundString)
			}
		})
	}
	let searchContentInJsonForCurrentLang = (key) => {
		console.log('translations[currentLang]', currentLang, translations[currentLang])
		return translations[currentLang][key]
	}
	let detectAllTranslatedParts = () => {
		elementsToTranslate = document.querySelectorAll('[data-translate]')
		console.log('elementsToTranslate', elementsToTranslate)
	}

	detectAllTranslatedParts()
	applyTranslation()

})