<template>
  <div class="calendar">
    <div class="calendar-nav">
      <div class="calendar-nav-previous-month">
        <button class="button is-small is-text" @click='prevMonth'>
          <b-icon icon-pack="fas" icon="long-arrow-alt-left"></b-icon>
        </button>
      </div>
      <div class="calendar-month">{{ monthInString[month] }} {{ year }}</div>
      <div class="calendar-nav-next-month">
        <button class="button is-small is-text" @click='nextMonth'>
          <b-icon icon-pack="fas" icon="long-arrow-alt-right"></b-icon>
        </button>
      </div>
    </div>
    <div class="calendar-container">
      <div class="calendar-header">
        <div class="calendar-date">Sun</div>
        <div class="calendar-date">Mon</div>
        <div class="calendar-date">Tue</div>
        <div class="calendar-date">Wed</div>
        <div class="calendar-date">Thu</div>
        <div class="calendar-date">Fri</div>
        <div class="calendar-date">Sat</div>
      </div>
      <div class="calendar-body">
        <v-html="content"></v-html>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data: function () {
    return {
      monthInString : ['January','February','March','April','May','June','July','August','September','October','November','December'],
      date: null,
      month: 0,
      year: 0
    }
  },

  created () {
    let today = new Date()
    this.date = today
    this.month = today.getMonth()
    this.year = today.getFullYear()
  },

  computed: {
    // oh, this is killing me!
    calendarContent: function () {
      let content = ''
      // get first day in current month
      let day = new Date(this.year,this.month,1).getDay()
      // if it doesn't start in Sunday, generate previous date from previous month
      if (day !== 0) {
        let daysInPreviousMonth = getDaysInMonth(this.month-1,year)
        for (let i = daysInPreviousMonth-day+1; i <= daysInPreviousMonth; i++) {
          content += `<div class="calendar-date is-disabled"><button class="date-item">${ i }</button></div>\n`
        }
      }
      // now, handle the actual calendar
      // yes, the calendar here is still static
      // attaching an event will require new data, get it in created hook
      for (let i = 1; i <= getDaysInMonth(this.year,this.month); i++) {
        let realContent = `<button class="date-item ${ this.date.getDate() === i ? ' is-today' : '' }">${ i }</button>`
        // if there's an event in the current date, add calendar-events class
        // the event(s) will be added ONLY IF the event(s)
        // ADD IT HERE!
        content += `<div class="calendar-date">${ realContent }</div>`
        day++
        if (day>6) {
          day = 0
        }
      }
      // now, fill the remaining calendar with days from next month
      for (let i = 1; day <= 6; day++, i++) {
        content += `<div class="calendar-date is-disabled"><button class="date-item">${ i }</button></div>\n`
      }
      return content
    }
  },

  methods: {
    prevMonth: function () {
      if (month === 0) {
        month = 11
        year -= 1
      } else {
        month = date.getMonth()-1
      }
    },

    nextMonth: function () {
      if(month === 11) {
        month = 0
        year += 1
      } else {
        month = date.getMonth()+1
      }
    },

    getDaysInMonth: function (month, year) {
      return new Date(year, month+1, 0).getDate()
    }
  }
}
</script>

<style lang="scss" scoped>
@import '~bulma-calendar';
</style>