// https://stackoverflow.com/questions/3452546/how-do-i-get-the-youtube-video-id-from-a-url
export function getYoutubeIdFromUrl(url) {
    return url.match(
        /.*(?:youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=)([^#\&\?]*).*/,
    )?.[1] ?? '';
}

export function embed(video) {
    return `https://www.youtube.com/embed/${getYoutubeIdFromUrl(video)}`;
}

export function localize(num) {
    return num.toLocaleString(undefined, { minimumFractionDigits: 0 });
}

export function getThumbnailFromId(id) {
    return `https://img.youtube.com/vi/${id}/mqdefault.jpg`;
}

// https://stackoverflow.com/questions/2450954/how-to-randomize-shuffle-a-javascript-array
export function shuffle(array) {
    let currentIndex = array.length, randomIndex;

    // While there remain elements to shuffle.
    while (currentIndex != 0) {
        // Pick a remaining element.
        randomIndex = Math.floor(Math.random() * currentIndex);
        currentIndex--;

        // And swap it with the current element.
        [array[currentIndex], array[randomIndex]] = [
            array[randomIndex],
            array[currentIndex],
        ];
    }

    return array;
}

// https://stackoverflow.com/a/44615197
export function getFontColour(hexColor){
    function getsRGB(c) {
        return parseInt(c, 16) || c;
    }

    const brightness = Math.round(((getsRGB(hexColor.substr(1, 2)))*299 +
                      (getsRGB(hexColor.substr(3, 2))*587) +
                      (getsRGB(hexColor.substr(-2))*114))/1000);
    
    return (brightness > 125) ? 'black' : 'white';
}

export function getLevelThumbnail(name){
    return `background: url('/assets/levels/${name}.png') #00000094; background-blend-mode: multiply; background-position: center; background-size: cover; color: var(--color-on-background); border: none; border-radius: 1rem; padding: 2rem; text-align: start; word-break: normal; overflow-wrap: anywhere; cursor: pointer; margin-left: 0.5rem; width: 100%; margin-bottom: 0.5rem;`;
}

export function getLeaderboardLevelThumbnail(name){
    return `background: url('/assets/levels/${name}.png') #00000094;
    background-blend-mode: multiply;
    background-size: cover;
    background-position: center;
    border-radius: 1rem;
    padding-top: 1.5rem;
    padding-left: 1.5rem;
    padding-bottom: 0.5rem;`;
}