<template><div>
  <v-dialog
    v-model="dialog"
    max-width="800"
  >
    <template v-slot:activator="{ on, attrs }">
      <v-row>
        <v-col cols="12" md="6" class="pb-0 pb-md-3">
          <v-select
            v-if="saveLessonDocumentationsPerWeek === 'True'"
            :items="emptyLessonPeriods"
            :label="$t('alsijil.coursebook.choose_week')"
            :item-text="getWeekText"
            v-model="selectedLessonPeriodDatetime"
            return-object
          ></v-select>
          <v-select
            v-else
            :items="emptyLessonPeriods"
            :label="$t('alsijil.coursebook.choose_lesson_date')"
            :item-text="getLessonText"
            v-model="selectedLessonPeriodDatetime"
            return-object
          ></v-select>
        </v-col>
        <v-col cols="12" md="6" class="pt-0 pt-md-3">
          <v-btn
            color="primary"
            dark
            v-bind="attrs"
            v-on="on"
            @click="createLessonDocumentation()"
          >
            {{ $t("alsijil.coursebook.create_documentation") }}
          </v-btn>
        </v-col>
      </v-row>
    </template>
    <lesson-documentation
      :lesson-documentation-edit="lessonDocumentationEdit"
      :groups="groups"
      :excuse-types="excuseTypes"
      :extra-marks="extraMarks"
      :save-lesson-documentations-per-week="saveLessonDocumentationsPerWeek"
      :get-week-text="getWeekText"
      @cancel-lesson-documentation-dialog="cancelDialog"
    />
  </v-dialog>
  <v-data-table
    :headers="headers"
    :items="computedLessonDocumentations"
    @click:row="editLessonDocumentation"
    class="elevation-1 my-3"
    :expanded.sync="expanded"
    show-expand
    multi-sort
    :sort-by="['year','week']"
    :sort-desc="[true, true]"
  >
    <template v-slot:item.period="{ item }">
      <span class="text-no-wrap">{{ (saveLessonDocumentationsPerWeek === "True") ? getWeekText(item) : getLessonText(item) }}</span>
    </template>
    <template v-slot:expanded-item="{ headers, item }">
      <td :colspan="headers.length">
        <template v-if="saveLessonDocumentationsPerWeek === 'True'" v-for="lessonDocumentation in item.documentations">
          <v-list-item>
            <v-list-item-content>
              <v-list-item-title>{{ getLessonText(lessonDocumentation) }}</v-list-item-title>
              <v-list-item-action>
                <personal-notes
                    :lesson-documentation-id="lessonDocumentation.id"
                    :groups="groups"
                    :excuse-types="excuseTypes"
                    :extra-marks="extraMarks"

                    v-model="lessonDocumentation.personalNotes"
                    @change="$emit('change-personal-notes', $event)"
                ></personal-notes>
              </v-list-item-action>
            </v-list-item-content>
          </v-list-item>
          <v-divider></v-divider>
        </template>
        <template v-else v-for="personalNote in item.personalNotes">
<!--          FIXME: Add edit and delete functionality to personal note chips-->
          <v-chip class="ma-1" v-if="personalNoteString(personalNote)">
            {{ personalNote.person.fullName }}: {{ personalNoteString(personalNote) }}
          </v-chip>
        </template>
      </td>
    </template>
</v-data-table>
</div></template>

<script>
  import LessonDocumentation from "./LessonDocumentation.vue";
  import PersonalNotes from "./PersonalNotes.vue";
  export default {
    components: {LessonDocumentation, PersonalNotes},
    props: [ "lessonDocumentations", "plannedLessonPeriodsDateTimes",  "groups", "excuseTypes", "extraMarks", "saveLessonDocumentationsPerWeek" ],
    name: "lesson-documentations",
    data () {
      return {
        dialog: false,
        expanded: [],
        headers: [
          { text: this.$t("alsijil.period"), value: "period" },
          { text: this.$t("alsijil.lesson_documentation.topic"), value: "topic" },
          { text: this.$t("alsijil.lesson_documentation.homework"), value: "homework" },
          { text: this.$t("alsijil.lesson_documentation.group_note"), value: "groupNote" },
          { text: this.$t("alsijil.personal_note.title_plural"), value: "data-table-expand" }
        ],
        lessonDocumentationEdit: {},
        selectedLessonPeriodDatetime: {},
        recordedWeeks: [],
      }
    },
    computed: {
      emptyLessonPeriods() {
        if (this.saveLessonDocumentationsPerWeek === "True") {
          let currentDatetime = new Date()
          let weeks = {}
          let lpdts = this.plannedLessonPeriodsDateTimes.filter(lp => new Date(lp.datetimeStart) > currentDatetime)
          for (let ldIndex in lpdts) {
            let ld = lpdts[ldIndex]
            if (ld.week in weeks) {
              weeks[ld.week]["planned"].push(ld)
            } else {
              weeks[ld.week] = {
                "year": ld.year,
                "week": ld.week,
                "startDate": this.calculateStartDateOfCW(ld.year, ld.week),
                "datetimeStart": ld.datetimeStart,
                "lessonPeriod": ld.lessonPeriod,
                "planned": [ld]
              }
            }
          }
          return Object.values(weeks) // FIXME sort by date
        } else {
          let currentDatetime = new Date()
          return this.plannedLessonPeriodsDateTimes.filter(lp => new Date(lp.datetimeStart) > currentDatetime)
        }
      },
      computedLessonDocumentations() {
        if (this.saveLessonDocumentationsPerWeek === "True") {
          let weeks = {}
          for (let ldIndex in this.lessonDocumentations) {
            let ld = this.lessonDocumentations[ldIndex]
            if (ld.week in weeks) {
              weeks[ld.week]["documentations"].push(ld)
            } else {
              weeks[ld.week] = {
                "id": ld.id,
                "startDate": this.calculateStartDateOfCW(ld.year, ld.week),
                "year": ld.year,
                "week": ld.week,
                "topic": ld.topic,
                "homework": ld.homework,
                "groupNote": ld.groupNote,
                "documentations": [ld]
              }
            }
          }
          return Object.values(weeks)
        } else {
          return this.lessonDocumentations
        }
      }
    },
    methods: {
      cancelDialog() {
        this.dialog = false;
        this.lessonDocumentationEdit = {};
      },
      recordDocumentation(item) {
        if (this.recordedWeeks.includes(item.week)) {
          return false
        }
        this.recordedWeeks.push(item.week)
        return true
      },
      async loadLessonDocumentation(item) {
        const result = await this.$apollo.mutate({
          mutation: require("./LessonDocumentation.graphql"),
          variables: {
            year: item.year,
            week: item.week,
            lessonPeriodId: item.lessonPeriod ? item.lessonPeriod.id : null,
            eventId: item.event ? item.event.id : null,
            extraLessonId: item.extraLesson ? item.extraLesson.id : null,
          },
        })
        let lessonDocumentation = result.data.updateOrCreateLessonDocumentation.lessonDocumentation
        this.lessonDocumentationEdit = {
          id: lessonDocumentation.id,
          year: item.year,
          week: item.week,
          date: lessonDocumentation.date,
          period: item.period,
          lessonPeriodId: item.lessonPeriod ? item.lessonPeriod.id : null,
          eventId: item.event ? item.event.id : null,
          extraLessonId: item.extraLesson ? item.extraLesson.id : null,
          topic: lessonDocumentation.topic,
          homework: lessonDocumentation.homework,
          groupNote: lessonDocumentation.groupNote,
          personalNotes: lessonDocumentation.personalNotes,
        }
      },

      editLessonDocumentation(item) {
        if (this.saveLessonDocumentationsPerWeek === "True") {
          this.loadLessonDocumentation(item.documentations[0])
        } else {
          this.loadLessonDocumentation(item)
        }
        this.dialog = true
      },

      createLessonDocumentation() { // FIXME: Update cache to show newly created LessonDocumentation in table
        let lessonDocumentation = this.selectedLessonPeriodDatetime
        lessonDocumentation["event"] = null
        lessonDocumentation["extraLesson"] = null
        this.loadLessonDocumentation(lessonDocumentation)
        this.dialog = true
      },

      calculateStartDateOfCW(year, week){
        let ld_date = new Date(Date.UTC(year, 0, 1 + (week - 1) * 7));
        let dow = ld_date.getDay();
        let start_date = ld_date;
        if (dow <= 4)
          return start_date.setDate(ld_date.getDate() - ld_date.getDay() + 1)
        else
          return start_date.setDate(ld_date.getDate() + 8 - ld_date.getDay())
      },

      getLessonText(item) {
        let date_obj = new Date(item.hasOwnProperty("datetimeStart") ? item.datetimeStart : item.date)
        let period = item.lessonPeriod ? ", " + this.$t('alsijil.period_number', {number: item.lessonPeriod.period.period}) : "" // FIXME: Cases without lessonPeriod
        return this.$d(date_obj, "short") + period
      },
      getWeekText(item) {
        if (item.hasOwnProperty("startDate")) {
          var start_date = new Date(item.startDate)
        } else {
          let lesson_date = new Date(item.date)
          var start_date = new Date(((lesson_date.getDay() || 7) !== 1) ? lesson_date.setHours(-24 * (lesson_date.getDay() - 1)) : lesson_date)
        }
        let end_date = new Date(start_date)
        end_date.setDate(end_date.getDate() + 6)
        return start_date.toLocaleDateString(this.$root.languageCode) + " - " + end_date.toLocaleDateString(this.$root.languageCode) + ", " + this.$root.django.gettext('CW') + " " + item.week
      },
      personalNoteString(personalNote) {
          let personalNoteString = "";
          if (personalNote.late > 0) {
              personalNoteString += personalNote.late + "', ";
          }
          if (personalNote.absent) {
              personalNoteString += this.$t("absent") + ", ";
          }
          if (personalNote.excused) {
              personalNoteString += this.$t("excused") + ", ";
          }
          if (personalNote.excuseType) {
              personalNoteString += personalNote.excuseType.name;
          }
          if (personalNote.extraMarks.length > 0) {
              personalNoteString += " (";
              personalNote.extraMarks.forEach(item => {
                  personalNoteString += item.name + ", ";
              });
              personalNoteString = personalNoteString.substring(0, personalNoteString.length - 2);
              personalNoteString += ") ";
          }
          if (personalNote.remarks) {
              personalNoteString += "\"" + personalNote.remarks + "\" ";
          }
          return personalNoteString;
      },
    }
  }
</script>