const colors = {
  printColor() {
    console.log(this)
  },
}

colors.print()

const colors = {
  printColor() {
    console.log(this)
    const printThis = () => {
      console.log(this)
    }
    printThis()
  },
}

colors.print()

const printThis = function () {
  console.log(this)
}

printThis.call({ color: 'red' })
printThis.apply({ color: 'red' })

const colors = {
  printColor() {
    console.log(this)
  },
}

const randomObject = {
  a: 1,
}

randomObject.printColor = colors.printColor
randomObject.printColor()

class Timer {
  constructor(durationInput, startButton, pauseButton) {
    this.durationInput = durationInput
    this.startButton = startButton
    this.pauseButton = pauseButton

    // start(){}, Calling the constructor anytime the user clicks on the start button
    this.startButton.addEventListener('click', this.start)
    this.pauseButton.addEventListener('click', this.pause)
  }

  // start() {
  //   // console.log('Time to start the timer!');
  //   console.log(this);
  // }
  start = () => {
    // This runs on tick immediately
    this.tick()
    // const timer = setInterval(this.tick, 1000)
    this.interval = setInterval(this.tick, 1000)
    console.log(timer)
    // function that is built into the browser
    // clearInterval(timer)
  }

  pause = () => {
    clearInterval(this.interval)
  }

  tick = () => {
    console.log('tick')
  }
}

  getTime() {
    return parseFloat(this.durationInput.value)
  }

  setTime() {
    return this.durationInput = time
  }

  tick = () => {
    console.log('tick')
    this.timeRemaining = this.timeRemaining - 1
  }

  get timeRemaining() {
    return parseFloat(this.durationInput.value)
  }

  set timeRemaining(time) {
    this.durationInput.value = time
  }

tick = () => {
  console.log('tick')
  if (this.timeRemaining <= 0) {
    this.pause()
  } else {
    this.timeRemaining = this.timeRemaining - 1
  }
}

// The fourth argument is going to be totally optional so we can use our timer with or without fourth argument
const timer = new Timer(durationInput, startButton, pauseButton, {
  onStart() {
    console.log('Timer started')
  },
  onTick() {},
  onComplete() {},
})

  constructor(durationInput, startButton, pauseButton, callbacks) {
    this.durationInput = durationInput
    this.startButton = startButton
    this.pauseButton = pauseButton

    // Callbacks are optional (logic for that)
    if (callbacks) {
      this.onStart = callbacks.onStart
    }

    this.startButton.addEventListener('click', this.start)
    this.pauseButton.addEventListener('click', this.pause)
  }

if (callbacks) {
  this.onStart = callbacks.onStart
  this.onTick = callbacks.onTick
  this.onComplete = callbacks.onComplete
}

tick = () => {
  if (this.timeRemaining <= 0) {
    this.pause()
    if (this.onComplete) {
      this.onComplete()
    }
  } else {
    this.timeRemaining = this.timeRemaining - 1
    if (this.onTick) {
      this.onTick()
    }
  }
}