// ==========================
// Vortex Theme Editor Part 2
// Background Images
// ==========================

(() => {

if(!window.VortexThemeEditor){
    alert("Load Part 1 first!");
    return;
}

const STORAGE="vortex-theme";

let saved=JSON.parse(localStorage.getItem(STORAGE)||"{}");

function save(){

    localStorage.setItem(STORAGE,JSON.stringify(saved));

}

const panel=document.getElementById("vortex-theme-panel");

panel.insertAdjacentHTML("beforeend",`

<hr style="margin:12px 0;">

<div style="font-size:17px;font-weight:bold;">
🖼 Background Image
</div>

<input type="file" id="bgUpload" accept="image/*">

<br><br>

Blur

<br>

<input id="blurSlider" type="range"
min="0"
max="25"
value="${saved.blur||0}">

<span id="blurValue">${saved.blur||0}px</span>

<br><br>

Brightness

<br>

<input id="brightSlider"
type="range"
min="40"
max="150"
value="${saved.brightness||100}">

<span id="brightValue">${saved.brightness||100}%</span>

<br><br>

Saturation

<br>

<input id="satSlider"
type="range"
min="0"
max="250"
value="${saved.saturation||100}">

<span id="satValue">${saved.saturation||100}%</span>

<br><br>

Fit

<br>

<select id="fitMode">

<option>cover</option>

<option>contain</option>

<option>100% 100%</option>

</select>

<br><br>

<button id="removeBg">
🗑 Remove Image
</button>

`);

const blurSlider=document.getElementById("blurSlider");
const brightSlider=document.getElementById("brightSlider");
const satSlider=document.getElementById("satSlider");
const fitMode=document.getElementById("fitMode");

fitMode.value=saved.fit||"cover";

function applyImage(){

    if(saved.image){

        document.body.style.backgroundImage=
        `url(${saved.image})`;

        document.body.style.backgroundRepeat="no-repeat";

        document.body.style.backgroundAttachment="fixed";

        document.body.style.backgroundPosition="center";

        document.body.style.backgroundSize=fitMode.value;

        document.body.style.filter=
        `blur(0px) brightness(${brightSlider.value}%)
        saturate(${satSlider.value}%)`;

        document.body.style.setProperty(
            "--bgBlur",
            blurSlider.value+"px"
        );

        if(!document.getElementById("vortex-bg-blur")){

            const layer=document.createElement("div");

            layer.id="vortex-bg-blur";

            Object.assign(layer.style,{

                position:"fixed",

                inset:"0",

                zIndex:"-9999",

                backgroundImage:`url(${saved.image})`,

                backgroundRepeat:"no-repeat",

                backgroundPosition:"center",

                backgroundAttachment:"fixed",

                backgroundSize:fitMode.value,

                filter:
                `blur(${blurSlider.value}px)
                brightness(${brightSlider.value}%)
                saturate(${satSlider.value}%)`

            });

            document.body.prepend(layer);

        }

        else{

            const layer=document.getElementById("vortex-bg-blur");

            layer.style.backgroundImage=`url(${saved.image})`;

            layer.style.backgroundSize=fitMode.value;

            layer.style.filter=
            `blur(${blurSlider.value}px)
            brightness(${brightSlider.value}%)
            saturate(${satSlider.value}%)`;

        }

    }

}

applyImage();

document.getElementById("bgUpload").onchange=e=>{

    const file=e.target.files[0];

    if(!file)return;

    const reader=new FileReader();

    reader.onload=()=>{

        saved.image=reader.result;

        save();

        applyImage();

    };

    reader.readAsDataURL(file);

};

blurSlider.oninput=()=>{

    document.getElementById("blurValue").textContent=
    blurSlider.value+"px";

    saved.blur=blurSlider.value;

    save();

    applyImage();

};

brightSlider.oninput=()=>{

    document.getElementById("brightValue").textContent=
    brightSlider.value+"%";

    saved.brightness=brightSlider.value;

    save();

    applyImage();

};

satSlider.oninput=()=>{

    document.getElementById("satValue").textContent=
    satSlider.value+"%";

    saved.saturation=satSlider.value;

    save();

    applyImage();

};

fitMode.onchange=()=>{

    saved.fit=fitMode.value;

    save();

    applyImage();

};

document.getElementById("removeBg").onclick=()=>{

    delete saved.image;

    save();

    const layer=document.getElementById("vortex-bg-blur");

    if(layer)layer.remove();

    document.body.style.backgroundImage="";

};

})();