const languageSelector = document.getElementById("language-selector")
const greetingDisplay = document.getElementById("greeting-text")
const bellEle = document.getElementById("bell")
const giftEle = document.getElementById("gift")
const title = document.getElementById("title")
languageSelector.addEventListener("change", translate)
const correctGiftPos = -40
let leftBell = 0
let topBell = 0
let leftGift = 0
let topGift = 0

bellEle.style.position = "absolute";
giftEle.style.position = "absolute";
giftEle.style.left = `${giftEle.offsetLeft + correctGiftPos}px`

const moveElement = (element) => {
    console.log(bellEle.offsetLeft)
    const randomMov = Math.floor(Math.random() * (4))
    console.log(randomMov)
    if(randomMov === 0) {element === "bell" ? leftBell += 20 : leftGift += 20 }
    if(randomMov === 1) {element === "bell" ? leftBell -= 20 : leftGift -= 20 }
    if(randomMov === 2) {element === "bell" ? topBell += 20 : topGift += 20 }
    if(randomMov === 3) {element === "bell" ? topBell -= 20 : topGift -= 20 }
   
   {element === "bell" 
   ? bellEle.style.left = `${bellEle.offsetLeft + leftBell}px` 
   : giftEle.style.left = `${giftEle.offsetLeft + leftGift}px`}
   
   {element === "bell" 
   ? bellEle.style.top = `${bellEle.offsetTop + topBell}px` 
   : giftEle.style.top = `${giftEle.offsetTop + topGift}px`}
}

bellEle.addEventListener("mouseover", () =>  moveElement("bell"))
giftEle.addEventListener("mouseover", () => moveElement("gift"))


const greetingsArr = [
    {
        language: "English",
        greeting: "Merry Christmas!"
    },
    {
        language: "Spanish",
        greeting: "Feliz Navidad!"
    },
    {
        language: "Ukrainian",
        greeting: "щасливого Різдва!"
    },
    {
        language: "Welsh",
        greeting: "Nadolig Llawen!"
    },
]

// you can add here new languages
const newGreetingsArr = [    
    {
        language: "Catalan",
        greeting: "Bon Nadal!"
    },
    {
        language: "Galician",
        greeting: "Bo Nadal!"
    },
    {
        language: "German",
        greeting: "Frohe Weihnachten!"
    },
    {
        language: "Basque",
        greeting: "Eguberri on!"
    },
    {
        language: "Italian",
        greeting: "Buon Natale!"
    },
    {
        language: "Flemish",
        greeting: "Vrolijk Kerstfeest!"
    },
    {
        language: "French",
        greeting: "Joyeux Noël!"
    },
    {
        language: "Walloon",
        greeting: "Djoyeus Noyé!"
    },
]

const createOptionEle = (option) => {
    const ele = document.createElement("option")
    ele.value = option
    ele.innerHTML = option
    languageSelector.appendChild(ele)
}

newGreetingsArr.map(item => {
    createOptionEle(item.language)
    greetingsArr.push(item)
    })

function translate(){
   const result = greetingsArr.filter(item => item.language === languageSelector.value)
   greetingDisplay.innerHTML = result[0].greeting
}