let selectedPhoto = ""
let days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
let daynow = new Date().getDay();
let dayT = days[daynow];
let month = new Date().getMonth()+1;
let day = new Date().getDate();
let year = new Date().getFullYear();
let fullYear = day+"/"+month+"/"+year;
let hour = new Date().getHours();
let minute = new Date().getMinutes();
let fullTime = hour+":"+minute


$(document).ready(function() {
    const prevBtn = document.querySelector('.prev-btn');
    const nextBtn = document.querySelector('.next-btn');
    let rules = Object.values(settings.rules);
    let updates = Object.values(settings.updates);
    let social = Object.values(settings.social);
    let gallery = Object.values(settings.gallery);
    let authorized = Object.values(settings.authorized);





       
    $(".date").text(dayT + " | " + fullYear);
    $("#leftWrapper-socialMedia").html("")
    // $(".authorized").html("")
    $(".galleryImg").html("")

    rules.forEach(elements => {
        $("#leftWrapper-rules").append(`
                <div class="rulesName">
                    <div class="rulesTop">
                        <p class="nameRules">${elements.name}</p>
                        <p class="ruleType">${elements.type}</p>
                    </div>
                    <div class="com">${elements.rule}</div>
                </div>
        `)
    });

    updates.forEach(elements => {
        $("#leftWrapper-updates").append(`
                <div class="rulesName">
                    <div class="rulesTop">
                        <p class="nameRules">${elements.name}</p>
                        <p class="ruleType">${elements.type}</p>
                    </div>
                    <div class="com">${elements.rule}</div>
                </div>
        `)
    });

    social.forEach(elements => {
        $("#leftWrapper-socialMedia").append(`
            <div id="social">
                    <i class="${elements.icon}" onclick="window.invokeNative('openUrl', '${elements.link}');"></i>
            </div>
        `)
    });

    gallery.forEach(elements => {
        $(".gallery").append(`
                <img src="${elements.img}" id="new" ">
        `)
    });

    authorized.forEach(elements => {
          $(".authorizedArea").append(`
                <div class="user" style="border-top: 0.2vw solid ${elements.color}">
                    <div class="imgBox">
                        <img src="${elements.img}">
                    </div>
                    <div class="textBox">
                        <p class="authname">${elements.name}</p>
                        <p class="authperm">${elements.perm}</p>
                        <p class="discord">${elements.dc}</p>
                    </div>
                </div>
        `)
    });



    function updateGalleryTexts(id) {
        const update = gallery
        console.log(update.name)
    }

    $(document).on("click", ".fa-instagram", function() {
        // const url = social[".fa-instagram"]
    })

    $(document).on("click", ".gallery img", function(){
        var src = $(this).attr("src");
        $("#bigPhotoWrapper").hide();
        $("#bigPhotoWrapper").show();
        $(".gallery").hide();

        $("#bigPhotoWrapper img").attr("src", src);  
    });

    $(document).on("click", "#bigPhotoWrapper", function () {
        $(".gallery").show();
        $("#bigPhotoWrapper").hide();



    });

    function getGallery() {
        $(".galleryArea").show();
        // $("#bigPhotoWrapper").show();
        $(".authorized").hide();
        $("body").fadeIn(500);
        $(".leftWrapper").hide();
    }

    function getTeam() {
        $(".galleryArea").hide();
        $(".leftWrapper").show();
        $(".authorized").show();

    }

    function closeAll() {
        $(".authorized").hide();
        $(".galleryArea").hide();
        $(".leftWrapper").show()
    }

    $(document).on("click", ".ggallery", function () {
        getGallery()
    });
    $(document).on("click", ".team", function () {
        getTeam()
    });
    $(document).on("click", ".close", function () {
        closeAll()
    });
    document.body.addEventListener('keydown', function(e) {
        if (e.key == "Escape") {
          closeAll()
    }
    });
    
});

let progress = document.getElementById("progress");
let volu = document.getElementById("vol");
let song = document.getElementById("song")
let picon = document.getElementById("localIcon");
let audioId = 1;




function playAudio(id) {
    stopAudio();

    const music = musics[id];

    if (music) {
        audio = new Audio(music.audio);
        audio.volume = $("#music-sound").val() / 100;

        resumeAudio();
        
        audioId = id;
        audioInterval = setInterval(() => {
            $('#music-time-text p').text(secondsToDuration(audio.duration));
            $('#music-time-text span').text(secondsToDuration(audio.currentTime));
            $('#music-time').val(convertValue(audio.currentTime, 0, audio.duration, 0, 100));
            $('#input-bg-time').width(convertValue(audio.currentTime, 0, audio.duration, 0, 100) + "%");
        }, 500);

        $('#music-name').text(music.title);
        $('#music-image').attr("src", music.image);
    }
}

song.onloadedmetadata = function() {
    progress.max = song.duration;
    progress.value = song.currentTime;
    volu.value = song.volume;
}


$(document).ready(function() {
    const music = musics[audioId];
    song.play();
    $("#song").attr("src", music.song);
    $(".songName").html(music.songName);
    $(".singer").html(music.singer);
    $(".imgArea img").attr("src", music.img);
})



if (song.play()) {
    picon.classList.add("fa-circle-pause");
    picon.classList.remove("fa-play")
    setInterval(()=> {
        progress.value = song.currentTime;
        let min = Math.floor(song.duration / 60)
        let sec = Math.floor(song.duration % 60)
        let currentMin = Math.floor(song.currentTime / 60)
        let currentSec = Math.floor(song.currentTime % 60)
        
        if(currentSec < 10) {
            currentSec = `0${currentSec}`
        }
        if(currentMin < 10){
            currentMin = `0${currentMin}`
        }

        $(".current").html(currentMin +":"+ currentSec)
    }, 500)

}else if (song.pause()) { 
    setInterval(()=> {
    picon.classList.remove("fa-circle-pause");
    picon.classList.add("fa-play")
    },500)
}

progress.onchange = function() {
    song.play();
    song.currentTime = progress.value;
}

vol.onchange = function() {
    song.play();
    song.volume = volu.value / 100;
}


function playPause() {
    if(picon.classList.contains("fa-circle-pause")) {
        song.pause();
        picon.classList.remove("fa-circle-pause");
        picon.classList.add("fa-play")
    } else {
        song.play();
        picon.classList.add("fa-circle-pause");
        picon.classList.remove("fa-play")
    }
}

function nextSong() {
    const music = musics[audioId];
    if (song.play()) {
        prev ? audioId-- : audioId++;
        if (audioId >= musics.length) audioId = 0;
        else if (audioId < 0) audioId = musics.length - 1;
        $("#song").attr("src", music.song);
        $(".songName").html(music.songName);
        $(".singer").html(music.singer);
        $(".imgArea img").attr("src", music.img);
    }
}

function prevSong() {
    const music = musics[audioId];
    if (song.play()) {
        prev ? audioId++ : audioId--;
        if (audioId >= musics.length) audioId = 0;
        else if (audioId < 0) audioId = musics.length - 1;
        $("#song").attr("src", music.song);
        $(".songName").html(music.songName);
        $(".singer").html(music.singer);
        $(".imgArea img").attr("src", music.img);
    }
}



$(document).on("click", "#next", function(){
    nextSong()
});

$(document).on("click", "#prev", function(){
    prevSong()
});