// Task:
//- Add the functionality to switch the theme between 'Christmas' and 'snow'.

const body = document.getElementById("body");
const greeting = document.getElementById("greeting")
const toggleBtn = document.getElementById("checkbox");
let slideFor = document.getElementById("slideFor");
let isChristmas = true; //now we have full control over it because it only depends on this boolean
let isGreeting = true;

slideFor.innerHTML = getLabel();
greeting.innerHTML = getGreeting();

function getLabel() {
    return isChristmas ? "Slide for snow ☃️" : "Slide for Christmas 🎅";
}

function getGreeting() {
    return isGreeting ? "Merry Christmas!" : "Happy New Year!";
}

function myToggle() {
    //toggle between the two classes
    //if we remove classList.toggle("christmasBody"); it only changes the card not the whole body
    body.classList.toggle("christmasBody"); 
    body.classList.toggle("snowBody"); //from CSS
    isChristmas = !isChristmas; //it's snow after toggling
    isGreeting = !isGreeting;
        
    //slideFor.innerHTML = isChristmas ? "Slide for snow ☃️" : "Slide for Christmas 🎅";
    //or better:
    slideFor.innerHTML = getLabel(); //+ call getLabel() with slideFor: slideFor.innerHTML = getLabel();
    greeting.innerHTML = getGreeting();

    
}
toggleBtn.onclick = myToggle;

// Stretch goals:
// - Add more themes!
// - Allow the user to customise the themes.
// - Turn the radio buttons into a toggle switch.