const DOMSettingButton = document.getElementById("setting-button")
const DOMFullScreenMask = document.getElementById("full-screen-mask")
const DOMCloseSettingButton = document.getElementById("close-setting-button")
const DOMSettingContainer = document.getElementById("setting-container")
const DOMSettingPanel = document.querySelector(".setting-panel")
const DOMSaveSettingButton = document.querySelector(".save-setting-button")

function showSettingPanel() {
    console.log("showSettingPanel")
    DOMFullScreenMask.classList.remove("hidden")
    DOMSettingContainer.classList.remove("hidden")
}

function closeSettingPanel() {
    console.log("closeSettingPanel")
    DOMFullScreenMask.classList.add("hidden")
    DOMSettingContainer.classList.add("hidden")
}

DOMSettingButton?.addEventListener('click', showSettingPanel)
// DOMFullScreenMask?.addEventListener('click', closeSettingPanel)
DOMSettingContainer?.addEventListener('click', closeSettingPanel)
DOMCloseSettingButton?.addEventListener('click', closeSettingPanel)
DOMSettingPanel.addEventListener('click', function (e) {
    e.stopPropagation()
})
DOMSaveSettingButton.addEventListener('click', function (e) {
    closeSettingPanel()
    e.stopPropagation()
})
