<template>
  <div class="full-height">
    <div class="title-bar row items-center overflow-hidden">
      <q-btn
        flat
        color="white"
        icon="iconfont icon-line-arrow-left"
        class="direction-button"
        style="height: 100%"
        @click="onPrev"
      />
      <transition :name="transition" appear>
        <div
          :key="parsedStart.date"
          class="row justify-between items-center text-white overflow-hidden"
          style="width: calc(100% - 112px)"
        >
          <div
            v-for="day in days"
            :key="day.date"
            class="col-auto"
            :style="dayStyle"
          >
            <q-btn
              flat
              :class="dayClass(day)"
              style="line-height: unset;"
              class="column"
              @click="
                selectedDate = day.date;
                transition = '';
              "
            >
              <div class="column">
                <div class="text-center" style="width: 100%;">
                  {{ monthFormatter(day, true) }}
                </div>
                <div
                  class="text-center text-bold"
                  style="width: 100%;  font-size: 16px;"
                >
                  {{ dayFormatter(day, false) }}
                </div>
                <div class="text-center" style="width: 100%; font-size: 10px;">
                  {{ weekdayFormatter(day, true) }}
                </div>
              </div>
            </q-btn>
          </div>
        </div>
      </transition>
      <q-btn
        flat
        color="white"
        icon="iconfont icon-arrow-right"
        class="direction-button"
        style="height: 100%"
        @click="onNext"
      />
    </div>
    <div style="height: calc(100% - 70px);border-top: none;overflow:hidden">
      <q-calendar
        v-model="selectedDate"
        view="day"
        hide-header
        bordered
        hour24-format
        :interval-start="8"
        :interval-count="15"
        :interval-height="60"
        animated
        style="height: 100%; border-top: none;"
      />
    </div>
  </div>
</template>

<script>
import QCalendar from "@quasar/quasar-ui-qcalendar"; // ui is aliased from '@quasar/quasar-ui-qcalendar'
import "@quasar/quasar-ui-qcalendar/dist/index.css";
const CURRENT_DAY = new Date();

function getCurrentDay(day) {
  const newDay = new Date(CURRENT_DAY);
  newDay.setDate(day);
  const tm = QCalendar.parseDate(newDay);

  return tm.date;
}

export default {
  data() {
    return {
      selectedDate: getCurrentDay(CURRENT_DAY.getDate()),
      weekdays: [1, 2, 3, 4, 5, 6, 0],
      locale: "en-us",
      monthFormatter: this.monthFormatterFunc(),
      dayFormatter: this.dayFormatterFunc(),
      weekdayFormatter: this.weekdayFormatterFunc(),
      transitionPrev: "slide-right",
      transitionNext: "slide-left",
      transition: ""
    };
  },

  beforeMounted() {},

  computed: {
    weekdaySkips() {
      return QCalendar.getWeekdaySkips(this.weekdays);
    },

    parsedStart() {
      if (this.selectedDate) {
        return QCalendar.getStartOfWeek(
          QCalendar.parseTimestamp(this.selectedDate),
          this.weekdays,
          this.today
        );
      }
      return undefined;
    },

    parsedEnd() {
      if (this.selectedDate) {
        return QCalendar.getEndOfWeek(
          QCalendar.parseTimestamp(this.selectedDate),
          this.weekdays,
          this.today
        );
      }
      return undefined;
    },

    today() {
      const newDay = new Date(CURRENT_DAY);
      const tm = QCalendar.parseDate(newDay);
      return tm;
    },

    days() {
      if (this.parsedStart && this.parsedEnd) {
        return QCalendar.createDayList(
          this.parsedStart,
          this.parsedEnd,
          this.today,
          this.weekdaySkips
        );
      }
      return [];
    },

    dayStyle() {
      return {
        width: 100 / this.weekdays.length + "%"
      };
    }
  },

  methods: {
    onPrev() {
      const ts = QCalendar.addToDate(this.parsedStart, { day: -7 });
      this.selectedDate = ts.date;
      this.transition = "q-transition--" + this.transitionPrev;
    },

    onNext() {
      const ts = QCalendar.addToDate(this.parsedStart, { day: 7 });
      this.selectedDate = ts.date;
      this.transition = "q-transition--" + this.transitionNext;
    },

    dayClass(day) {
      return {
        //row: true,
        "justify-center": true,
        "selected-date": this.selectedDate === day.date
      };
    },

    monthFormatterFunc() {
      const longOptions = { timeZone: "UTC", month: "long" };
      const shortOptions = { timeZone: "UTC", month: "short" };

      return QCalendar.createNativeLocaleFormatter(this.locale, (_tms, short) =>
        short ? shortOptions : longOptions
      );
    },

    weekdayFormatterFunc() {
      const longOptions = { timeZone: "UTC", weekday: "long" };
      const shortOptions = { timeZone: "UTC", weekday: "short" };

      return QCalendar.createNativeLocaleFormatter(this.locale, (_tms, short) =>
        short ? shortOptions : longOptions
      );
    },

    dayFormatterFunc() {
      const longOptions = { timeZone: "UTC", day: "2-digit" };
      const shortOptions = { timeZone: "UTC", day: "numeric" };

      return QCalendar.createNativeLocaleFormatter(this.locale, (_tms, short) =>
        short ? shortOptions : longOptions
      );
    }
  }
};
</script>

<style lang="sass">
.title-bar
  width: 100%
  height: 70px
  background: #9c27b0
  display: flex
  flex-direction: row
  flex: 1

.direction-button
  background: #9c27b0
  color: white
  z-index: 20

.selected-date
  color: #9c27b0
  background: white
</style>
