<template>
  <div id="app" class="calendarApp">
    <calendar-view
      v-if="doneLoading"
      :events="eventItems"
      :show-date="showDate"
      :show-event-times="true"
      :showEvents="false"
      :disable-past="true"
      :time-format-options="{ hour: 'numeric', minute: '2-digit' }"
      :weekday-name-format="weekdayNameSize"
      class="theme-default calendar"
      @click-date="onClickDay"
    >
      <calendar-view-header
        slot="header"
        slot-scope="{ headerProps }"
        :header-props="headerProps"
        @input="setShowDate"
      />
    </calendar-view>
    <div class="cv-legend">
      <div class="cv-legend-square"></div>
      <div class="cv-legend-label">{{ this.legendText }}</div>
    </div>
    <calendar-view-events :selected-days-events="selectedDaysEvents" />
  </div>
</template>

<script lang="ts">
  import Vue from 'vue'
  import CalendarView from './library/vue-simple-calendar/src/components/CalendarView.vue'
  import CalendarViewHeader from './components/CalendarViewHeader.vue'
  import CalendarViewEvents from './components/CalendarViewEvents.vue'
  import axios from 'axios'
  // The next two lines are processed by webpack. If you're using the component without webpack compilation,
  // you should just create <link> elements for these. Both are optional, you can create your own theme if you prefer.
  require('./library/vue-simple-calendar/static/css/default.css')

  export default Vue.extend({
    name: 'App',
    components: {
      CalendarView,
      CalendarViewHeader,
      CalendarViewEvents
    },
    props: {
      legendText: { type: String, required: true },
      eventDataUrl: { type: String, required: true }
    },
    computed: {
      weekdayNameSize: function () {
        let size
        switch (this.$mq) {
          case 'small':
            size = 'narrow'
            break
          case 'medium':
            size = 'short'
            break
          default:
            size = 'long'
            break
        }
        return size
      }
    },
    created: function () {
      this.getData().then(response => {
        this.eventItems = response
        this.doneLoading = true
      })
    },
    data: function () {
      return {
        doneLoading: false,
        eventItems: [],
        showDate: new Date(),
        selectedDaysEvents: []
      }
    },
    methods: {
      setShowDate (d: Date) {
        this.showDate = d
      },
      thisMonth (d: number, h: number, m: number) {
        const t = new Date()
        return new Date(t.getFullYear(), t.getMonth(), d, h || 0, m || 0)
      },
      onClickDay (e: object, events: []) {
        this.selectedDaysEvents = events
          ; (this.$refs['cv-event'] as HTMLElement).scrollIntoView({ behavior: 'smooth' })
      },
      getData () {
        return axios
          .get(this.eventDataUrl)
          .then(response => response.data)
          .catch(error => {
            if (error.response) {
              // The request was made and the server responded with a status code
              // that falls out of the range of 2xx
              console.log(error.response.data)
              console.log(error.response.status)
              console.log(error.response.headers)
            } else if (error.request) {
              // The request was made but no response was received
              // `error.request` is an instance of XMLHttpRequest in the browser and an instance of
              // http.ClientRequest in node.js
              console.log(error.request)
            } else {
              // Something happened in setting up the request that triggered an Error
              console.log('Error', error.message)
            }
            console.log(error.config)
          })
      }
    }
  })
</script>
<style lang="scss">
@import './styles/app';
</style>