//get page url and split directories
// ------------------------------------------------------------------------------- //
let pageURL = window.location.href;
let pageParts = pageURL.split('/');

let endIndex = pageParts.length;
let startIndex; 

pageParts.forEach( function (part, index) {
    if(part === 'default'){
        startIndex = index + 1;
    }
});

// example: pageDirectory = ["default", "family", "01.php"]
let pageDirectory = pageParts.slice(startIndex , endIndex);
let lastIndex = pageDirectory.length - 1;

//add in "index.php" for the the starting page that ends with "default/"
if(pageDirectory[lastIndex] === ''){
    pageDirectory[lastIndex] = 'index.php';
}

//remove ".php" from the end of the array
//retrieve [0] element only from ['index', 'php']
pageDirectory[lastIndex] = pageDirectory[lastIndex].split('.')[0];

if(!isNaN(pageDirectory[lastIndex])){
    if(pageDirectory[lastIndex].charAt(0) === '0'){
        pageDirectory[lastIndex] = pageDirectory[lastIndex].slice(1);
    }
}

//write language tables
let currentPage = 'contentLang';

pageDirectory.forEach( directory => {
    currentPage += "['" + directory + "']";
})
// ------------------------------------------------------------------------------- //

// Langauage change button event listener
const languageBTN = document.querySelector('.language-btn');
languageBTN.addEventListener('click', changeLang);


// ------------------------------------------------------------------------------- //
//È­¸é size¿¡ µû¶ó »ó´Ü image º¯°æ
const icons = document.querySelectorAll('#link_nav > ul > li > a > img');
const langIcon = icons[icons.length - 1];
const franklinIcon = icons[icons.length - 2];
const MEDIA_QUERY_SIZE = 768;

window.addEventListener('resize', changeTopIcons);

function changeTopIcons(){
    let windowSize = window.innerWidth;
    let currlang = localStorage.getItem('language');

    if(windowSize > MEDIA_QUERY_SIZE){
        if(currlang === 'ko'){
            langIcon.src = '/default/img/homepee/images/top4_kr_dark.png';
        }else{
            langIcon.src = '/default/img/homepee/images/top4_dark.png';
        }
        franklinIcon.src = '/default/img/homepee/images/top3_dark.png';
    }else{
        if(currlang === 'ko'){
            langIcon.src = '/default/img/homepee/images/top4_kr.png';
        }else{
            langIcon.src = '/default/img/homepee/images/top4.png';
        }
        franklinIcon.src = '/default/img/homepee/images/top3.png';
    }
}
// ------------------------------------------------------------------------------- //

let userLanguageSetting = localStorage.getItem('language');

if(userLanguageSetting){
	changeTopIcons();
    render(userLanguageSetting);
}else{
    let currlang = getLanguage().slice(0, 2);
    localStorage.setItem('language', currlang);
    changeTopIcons();
    render(currlang);
}

// Get Browser Language
function getLanguage() {
    return navigator.language || navigator.userLanguage;
}

function changeLang() {
    //change language after the click
    let currlang = localStorage.getItem('language');

    if(currlang === "ko") {
        currlang = "en";
    } else if(currlang === "en") {
        currlang = "ko";
    }
    localStorage.setItem('language', currlang);
    changeTopIcons();
    
    render(currlang);//call render function depending onthe user language
}

function render(locale){
    const menuElementList = document.querySelectorAll('[data-lang]');
    const contentElementList = document.querySelectorAll('[data-content]');
    const imageElementList = document.querySelectorAll('.front-images');

    renderMenu(locale, menuElementList);
    renderImg(locale, imageElementList);
    renderContent(locale, contentElementList);
}

//Menu language change
function renderMenu(locale, dataLang){
    dataLang.forEach(dataName => {
        let dataNameArr = dataName.dataset.lang.split('.');
        let jsonReader = "menuLang['" + locale + "']";

        evaluation(dataNameArr, dataName, jsonReader);
    })
}

//Main content language change
function renderContent(locale, dataLang){
    dataLang.forEach(dataName => {
        let dataNameArr = dataName.dataset.content.split('.');
        let jsonReader = currentPage + "['" + locale + "']";
        //make sure that the content language table data exists
        try{
            evaluation(dataNameArr, dataName, jsonReader);
        }catch{
            console.log('no data found');
        }
    })
}

function evaluation(dataNameArr, dataName, jsonReader) {
    for(let i in dataNameArr){
        jsonReader += "['" + dataNameArr[i] + "']";
    }

    dataName.innerHTML = eval(jsonReader);
}

//image change
function renderImg(locale, imgLang){
    let counter = 0;
    imgLang.forEach( imgName => {
        imgName.src = imageLink[locale][counter];
        counter++;
    })
}