<script setup>
import CRUDList from "aleksis.core/components/generic/CRUDList.vue";
</script>

<template>
  <c-r-u-d-list
    :gql-query="query"
    :gql-additional-query-args="{ date: date  }"
    :get-gql-data="prepareList"
    :headers="headers"
    :show-select="false"
    :enable-create="false"
    :enable-edit="false"
  >
    <template #groups="{ item: { oldGroups, newGroups } }">
      <span v-if="newGroups.length > 0">
        <strike v-for="g in oldGroups"> {{ g.shortName }} </strike>
        <span> &nbsp;→&nbsp </span>
        <b v-for="g in newGroups"> {{ g.shortName }} </b>
      </span>
      <span
        v-else
        v-for="g in oldGroups"
      > {{ g.shortName }} </span>
    </template>
    <template #time="{ item: { startSlot, endSlot, startTime, endTime } }">
      <span v-if="startSlot && endSlot && startSlot === endSlot">
        {{ startSlot }}.
      </span>
      <span v-else-if="startSlot && endSlot">
        {{ startSlot }}.–{{ endSlot }}.
      </span>
      <span v-else-if="startTime && endTime">
        {{ $d(new Date(startTime), "shortTime") }}
        –
        {{ $d(new Date(endTime), "shortTime")}}
      </span>
      <span v-else>
        TODO 18n all day
      </span>
    </template>
    <template #teachers="{ item: { oldTeachers, newTeachers } }">
      <span v-if="newTeachers.length > 0">
        <strike v-for="t in oldTeachers"> {{ t.shortName || t.fullName }} </strike>
        <span> &nbsp;→&nbsp </span>
        <b v-for="t in newTeachers"> {{ t.shortName || t.fullName }} </b>
      </span>
      <span
        v-else
        v-for="t in oldTeachers"
      > {{ t.shortName || t.fullName }} </span>
    </template>
    <template #subject="{ item: { oldSubject, newSubject } }">
      <span v-if="oldSubject === 'SUPERVISION'">
        TODO i18n supervision
      </span>
      <span v-else-if="newSubject">
        <strike> {{ oldSubject }} </strike>
        <span> &nbsp;→&nbsp </span>
        <b> {{ newSubject }} </b>
      </span>
      <span v-else> {{ oldSubject }} </span>
    </template>
    <template #rooms="{ item: { oldRooms, newRooms } }">
      <span v-if="newRooms.length > 0">
        <strike v-for="r in oldRooms"> {{ r.shortName || r.name }} </strike>
        <span> &nbsp;→&nbsp </span>
        <b v-for="r in newRooms"> {{ r.shortName || r.name }} </b>
      </span>
      <span
        v-else
        v-for="r in oldRooms"
      > {{ r.shortName || r.name }} </span>
    </template>
  </c-r-u-d-list>
</template>

<script>
import { substitutionsForDate } from "./substitutions.graphql";
import { DateTime } from "luxon";

export default {
  name: "Substitutions",
  props: {
    date: {
      type: String,
      required: true,
    },
  },
  data() {
    return {
      query: substitutionsForDate,
      affectedTeachers: [],
      affectedGroups: [],
      // TODO: i18n
      headers: [
        {
          text: "groups",
          value: "groups",
        },
        {
          text: "time",
          value: "time",
        },
        {
          text: "teachers",
          value: "teachers",
        },
        {
          text: "subject",
          value: "subject",
        },
        {
          text: "rooms",
          value: "rooms",
        },
        {
          text: "notes",
          value: "notes",
        },
      ],
    };
  },
  methods: {
    prepareList(data) {
      this.affectedTeachers = data.affectedTeachers;
      this.affectedGroups = data.affectedGroups;
      return data.substitutions;
    },
  },
};
</script>