import gsap from "gsap"
import { closeMainMenuUI, openMainMenuUI } from "./mainmenuui"
export function optionsUI(game, stageData) {
    document.getElementById("options-container").addEventListener('click', () => {
        hideOptionsUI(game, stageData)
    })

    document.getElementById("options-panel").addEventListener('click', event => {
        event.stopPropagation()
    })

    document.getElementById("options-back-button").addEventListener('click', () => {
        hideOptionsUI(game, stageData)
    })

    document.getElementById("master-volume").addEventListener('change', (event) => {
        const value = document.getElementById("master-volume").value
        stageData.adjustMasterVolume(value)
    })

    document.getElementById("music-volume").addEventListener('change', (event) => {
        const value = document.getElementById("music-volume").value
        stageData.adjustMusicVolume(value)
    })
}

export function showOptionsUI(game, stageData) {
    document.getElementById("options-container").style.display = "flex"
    const panel = document.getElementById("options-panel")
    gsap.to(panel, {x: 0, duration: 0.8, onComplete: () => {
    }})
    closeMainMenuUI(game, stageData)
}

export function hideOptionsUI(game, stageData) {
    const panel = document.getElementById("options-panel")
    gsap.to(panel, {x: -1024, duration: 0.8, onComplete: () => {
        document.getElementById("options-container").style.display = "none"
   }})
   openMainMenuUI(game, stageData)
}