<template>
  <div>
    <b-modal
      ref="modalEmissionManagerCreate"
      title="Create a new schedule"
      size="lg"
      @ok="create"
    >
      <b-row>
        <b-col cols="3">
          Creating schedule for:
        </b-col>
        <b-col cols="9">
          <b v-if="$parent.loaded.shows">
            {{ $parent.shows[$parent.currentShow].name }}
          </b>!
        </b-col>
      </b-row>

      <b-alert
        variant="warning"
        :show="pastEventWarning"
      >
        Past events will be ignored. Start date was set to today!<br>
        Try again or change the start date to something in the future.
      </b-alert>

      <div v-if="loaded">
        <b-row>
          <b-col cols="2">
            Start:
          </b-col>
          <b-col cols="3">
            <b-form-input
              v-model="valuePick.dstart"
              type="date"
            />
          </b-col>
          <b-col cols="3">
            <b-form-input
              v-model="valuePick.tstart"
              type="time"
            />
          </b-col>
          <b-col cols="1">
            End:
          </b-col>
          <b-col cols="3">
            <b-form-input
              v-model="valuePick.tend"
              type="time"
            />
          </b-col>
        </b-row>

        <b-row>
          <b-col cols="2">
            Type of event:
          </b-col>
          <b-col cols="6">
            <b-form-select
              v-model="valuePick.rrule"
              :options="rruleOptions"
            />
          </b-col>
          <b-col v-if="valuePick.rrule != 1">
            Until:
          </b-col>
          <b-col v-if="valuePick.rrule != 1">
            <b-form-input
              v-model="valuePick.until"
              type="date"
            />
          </b-col>
        </b-row>
      </div>
    </b-modal>
  </div>
</template>

<script>
import axios from 'axios'
import prettyDate from '../mixins/prettyDate'
import rrules from '../mixins/rrules'

export default {
  mixins: [ prettyDate, rrules ],

  data () {
    return {
      newSchedule: null,
      loaded: false,
      pastEventWarning: false,
      valuePick: {
        dstart: null,
        tstart: null,
        tend: null,
        until: null,
        rrule: 1
      },
    }
  },

  methods: {
    create (event) {
      // prevent the modal from closing automatically on click
      event.preventDefault()
      // check for past dates; as past dates will be ignored by steering we
      // want to make the user aware - otherwise it might get confusing in
      // conflict resolution
      let now = this.apiDate(new Date())
      if (this.valuePick.dstart < now) {
        this.valuePick.dstart = now
        this.pastEventWarning = true
        return
      } else {
        this.pastEventWarning = false
      }
      // take all values that have been picked and put them into our new
      // schedule. so far we do not need any transformations.
      this.newSchedule.schedule.dstart = this.valuePick.dstart
      this.newSchedule.schedule.tstart = this.valuePick.tstart
      this.newSchedule.schedule.tend = this.valuePick.tend
      this.newSchedule.schedule.until = this.valuePick.until
      this.newSchedule.schedule.rrule = this.valuePick.rrule
      this.newSchedule.schedule.byweekday = this.getWeekdayFromApiDate(this.valuePick.dstart)
      // now generate the URL and POST our new schedule
      let uri = process.env.VUE_APP_API_STEERING_SHOWS + this.$parent.shows[this.$parent.currentShow].id + '/schedules/'
      axios.post(uri, this.newSchedule, {
        withCredentials: true,
        headers: { 'Authorization': 'Bearer ' + this.$parent.$parent.user.access_token }
      }).then(response => {
        // we have to check if there are any conflicts with existing timeslots
        let conflicts = false
        for (let i in response.data.projected) {
          if (response.data.projected[i].collisions.length > 0) {
            conflicts = true
            break
          }
        }
        // if there are no conflicts we can set an empty solutions object
        // in our newSchedule and submit it.
        if (!conflicts) {
          this.newSchedule.solutions = {}
          this.submit()
        // otherwise we have to resolve the conflict first.
        } else {
          this.$parent.resolve(response.data)
          this.$refs.modalEmissionManagerCreate.hide()
        }
      }).catch(error => {
        this.$log.error(error.response.status + ' ' + error.response.statusText)
        this.$log.error(error.response)
        alert('Error: could not create schedule. See console for details.')
        // and we leave the modal open, so no call to its .hide function here
      })
    },

    submit () {
      let uri = process.env.VUE_APP_API_STEERING_SHOWS + this.$parent.shows[this.$parent.currentShow].id + '/schedules/'
      axios.post(uri, this.newSchedule, {
        withCredentials: true,
        headers: { 'Authorization': 'Bearer ' + this.$parent.$parent.user.access_token }
      }).then(response => {
        // if for some reason a new conflict arose, e.g. because in the meantime
        // someone else inserted a conflicting schedule, we have to resolve.
        // TODO: based on single event schedule
        // TODO: check for complex schedules with resolved conflicts
        if (response.data.projected === undefined) {
          this.$parent.renderView(null)
        } else {
          this.$log.debug('Timeslot conflict. Switching to resolve mode.')
          this.$parent.resolve(response.data)
        }
        this.$refs.modalEmissionManagerCreate.hide()
      }).catch(error => {
        this.$log.error(error.response.status + ' ' + error.response.statusText)
        this.$log.error(error.response)
        alert('Error: could not submit final schedule. See console for details.')
        // and we leave the modal open, so no call to its .hide function here
      })
    },

    // initialise a new schedule and open the modal
    open (start, end) {
      let dstart = start.format('YYYY-MM-DD')
      let tstart = start.format('HH:mm')
      let tend = end.format('HH:mm')
      let until = end.format('YYYY-MM-DD')
      let now = this.apiDate(new Date())
      if (dstart < now) {
        dstart = now
        this.pastEventWarning = true
      } else {
        this.pastEventWarning = false
      }
      this.valuePick.dstart = dstart
      this.valuePick.tstart = tstart
      this.valuePick.tend = tend
      this.valuePick.until = until
      this.newSchedule = {
        schedule: {
          rrule: 1,
          show: 0,
          byweekday: 0,
          dstart: dstart,
          tstart: tstart,
          tend: tend,
          until: until,
          is_repetition: false,
          add_days_no: 0,
          add_business_days_only: false,
          fallback_id: 0,
          automation_id: 0,
        }
      }
      this.loaded = true
      this.$refs.modalEmissionManagerCreate.show()
    },
  }
}
</script>

<style scoped>
.row {
  margin-bottom: 1em;
}
</style>