// Please read WhatsHappening.md for details

// Set up snowfield
const canvas = document.getElementById('snowfield')
canvas.width = document.body.clientWidth
canvas.height = document.body.clientHeight
window.addEventListener('resize', ()=>{
    canvas.width = document.body.clientWidth
    canvas.height = document.body.clientHeight
})
const snowCTX = canvas.getContext('2d')

class Snowflake{
    constructor(){
        this.colors = ["#fff", "#fff9", "#fff3"]
        this.build()
    }
    draw() {
        snowCTX.fillStyle = this.color
        snowCTX.fillRect(this.x - (this.size / 2),
        this.y - (this.size / 2),
        this.size,
        this.size)
    }
    move(verbose = false) {
        this.y += this.yVel
        this.xVel += (Math.random() - .5) / 50
        this.x += this.xVel
        if (this.y > canvas.height) {
            this.build()
            if(verbose)console.log(this.color)
        }
    }
    build() {
        this.x = Math.random() * canvas.width
        this.y = 0;
        this.z = parseInt(Math.random() * 3 + 1)
        this.xVel = (Math.random() - .5) / 100
        this.yVel = (Math.random() + 1) / this.z
        this.yVel /= 2
        this.size = Math.random() * 5
        this.color = this.colors[this.z - 1]
    }
}

const snowflakes = []
const numberOfFlakes = 100
const maxSnowFlakes = 1200

// Add the first snowflakes (numberOfFlakes)
for(let i=0; i < numberOfFlakes; i++){
    snowflakes.push(new Snowflake())
}

// Make initial snowflakes fill the canvas
for (let i = 0; i < canvas.height * 10; i++) {
    snowflakes.forEach(flake => flake.move())
}

function startSnow() {
  // Start the snowfall
  const snowfall = setInterval(drawSnowflakes, 1000 / 60)
  addSnowFlakes()  
}

function addSnowFlakes(){
  // Increase snowfall to maxSnowFlakes
  if (snowflakes.length >= maxSnowFlakes) {
    return
  }
  for(let i=0; i < 10; i++){
    snowflakes.push(new Snowflake())
  }
  setTimeout(addSnowFlakes, 2000)
}

function drawSnowflakes() {
    // Animate one frame of snowfall
    snowCTX.clearRect(0, 0, canvas.width, canvas.height)
    snowflakes.forEach(flake => {
        flake.draw()
        flake.move()
    })
}

// Complete the challenge
const body = document.body
const greeting = document.getElementById("greeting")
const btn = document.getElementById("btn")

let christmasMessage = "Merry Christmas!️"
let message = [...greeting.textContent]

btn.addEventListener('click', fix)

function fix() {
  // Task:
  // - Write a function to fix the UI problems with this Christmas message (make it Christmassy!)
  // - Run the function when the Fix button is clicked.
  btn.textContent = "fixing..."
  changeMessage(0)
}

function changeMessage(index) {
  if(index >= message.length) {
    canvas.style.display = "block"
    body.className = "christmas"
    btn.textContent = "fixed"
    greeting.classList.remove('fixing')
    startSnow()
    return
    }
  if(index >= message.length / 2) {
    greeting.classList.add('fixing')
    }
  message[index] = christmasMessage[index]
  greeting.textContent = message.join('')
  setTimeout(()=>{
    changeMessage(index+1)
    }, 250)
}
//Stretch goals:
// - Add an extra theme, and the option to switch between them.
// - Change the message and theme to a New Year’s one automatically on December 31st.