let type = 'bg--image';
$('.btn-group-toggle.bg-type-selector input').on('click', function () {
    // console.log('checked', this.value)
    type = this.value
})

// var type = document.getElementById('bg-type').selectedIndex
// document.getElementById('bg-type').addEventListener('change', function () {
//     type = document.getElementById('bg-type').selectedIndex
//     // console.log(type)
// })
var Selectedcolor;
ColorPicker(


    document.getElementById('color-picker'),
    function (hex, hsv, rgb) {
        // console.log(hsv.h, hsv.s, hsv.v); // [0-359], [0-1], [0-1]
        // console.log(rgb.r, rgb.g, rgb.b); // [0-255], [0-255], [0-255]
        document.getElementById('color-preview').style.backgroundColor = hex;



        Selectedcolor = hex

console.log(`background-color:${hex};`)



    });

//Chech color or image user want to set and do it
document.getElementById('bg-confirm').addEventListener('click', function () {
    let screen = document.getElementById('screen')
    if (type == 'bg--color') {
        screen.style.removeProperty('background-image')
        screen.style.backgroundColor = Selectedcolor;
    }
    else if (type == 'bg--image') {

        let selectedImage = document.getElementById('bg-image-server');
        let selectedImageIndex = document.getElementById('bg-image-server').selectedIndex;
        let selectedImagePath = selectedImage[selectedImageIndex].value;

        screen.style.removeProperty('background-color');
        screen.style.backgroundImage = 'url(' + selectedImage[selectedImageIndex].value + ')';
        screen.style.backgroundSize = 'cover';

        console.log(selectedImagePath);
        // console.log(selectedImage.selectedIndex)

    }
    //  else if (type == 'bg--video') {
    //     console.log('type is:', type)

    //     let selectedVideo = document.getElementById('bg-video-source-selector');
    //     let sselectedVideoIndex = document.getElementById('bg-image-server').selectedIndex;
    //     // let sselectedVideoPath = selectedVideo[sselectedVideoIndex].value;

    //     screen.style.backgroundImage = 'url(' + selectedVideo[sselectedVideoIndex].value + ')';
    // }

})