import gsap from "gsap"
import { showNavigationUI } from "./navigationui.js"
import { clearSaveData, loadSaveData } from "../game.js"
import { showGameStatusUI } from "./gamestatusui.js"
import { showCreditsUI } from "./creditsui.js"
import { showOptionsUI } from "./optionsui.js"

export function brewTutorialPrompt(stageData) {
    if(stageData.brewTutorial1.alreadySeen) {
        return
    }
    stageData.brewInactivityHandle = setTimeout(() => {
        gsap.to(stageData.brewTutorial1.material, {duration: 1.5, opacity: 1, onStart: () => {
            stageData.brewTutorial1.castShadow = true
        }})
    }, 5000)
}

export async function mainMenuUI(game, stageData) {
    const container = document.getElementById('main-menu-container')
    document.getElementById("play-button").addEventListener('click', () => {

        brewTutorialPrompt(stageData)
        closeMainMenuUI(game, stageData)
        showNavigationUI(game, stageData)
        showGameStatusUI(game, stageData)
        const camPosition = stageData.cameraPositions[1]
        gsap.to(game.camera.position, {duration: 2.5, x: camPosition.camera.x, y:camPosition.camera.y, z:camPosition.camera.z})
        gsap.to(game.lookAtFocus, { duration: 2.5, x: camPosition.focus.x, y: camPosition.focus.y, z: camPosition.focus.z })

        stageData.musicLoop.play()
    })

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

    document.getElementById("credits-button").addEventListener('click', () => {
        showCreditsUI(game, stageData)
    })

    document.getElementById("reset-save-button").addEventListener('click', () => {
        let shouldDelete = confirm("Are you sure you want to delete your Spookonomics save data? This cannot be undone.")
        if(shouldDelete) {
            clearSaveData(stageData)
            loadSaveData(stageData)
        }
    })

    container.addEventListener('click', (event) => {
        event.stopPropagation()
    })
}

export async function openMainMenuUI(game, stageData) {
    const container = document.getElementById("main-menu-container")
    container.style.display = "block"
    const display = document.getElementById("main-menu-display")
    // display.style.opacity = 0
    // gsap.to(display, {opacity: 1, duration: 0.8})

    gsap.to(display, {x: 0, duration: 0.8, onComplete: () => {
    }})
}

export async function closeMainMenuUI(game, stageData) {
    const container = document.getElementById("main-menu-container")
    const display = document.getElementById("main-menu-display")
    // gsap.to(display, {
    //     opacity: 0, duration: 0.8, onComplete: () => {
    //         container.style.display = "none"

    //     }
    // })

    gsap.to(display, {x: -1024, duration: 0.8, onComplete: () => {
         container.style.display = "none"
    }})
}