<script setup>
import { historyOfDate } from "../store";
import { getSubstitutionText } from "../util";
import { computed } from "vue";
import dayjs from "dayjs";

const props = defineProps({
  date: {
    required: true,
  },
});

const history = computed(() => {
  return historyOfDate.value[props.date.setUTCHours(0, 0, 0, 0)];
});

function getChar(type) {
  switch (type) {
    case "change":
      return "~";
    case "addition":
      return "+";
    case "deletion":
      return "-";
  }
}

function getColor(type) {
  switch (type) {
    case "change":
      return "background-color: var(--substitution-background-change)";
    case "addition":
      return "background-color: var(--substitution-background-addition);";
    case "deletion":
      return "background-color: var(--substitution-background-deletion);";
  }
}
</script>

<template>
  <div class="history">
    <template v-for="event in history" :key="event">
      <div class="change" :style="getColor(event.type)">
        <span class="hour">{{ event.lesson }}{{ getChar(event.type) }}</span>
        <div class="infos">
          <span class="text" v-if="event.type == 'change'">
            <template v-for="(change, key) in event.change" :key="key">
              <p>
                {{ key }}:&nbsp;
                <s>{{ change.before }}</s>
                &nbsp;{{ change.after }}
              </p>
            </template>
          </span>
          <span class="text" v-else
            >{{
              $t(getSubstitutionText(event.change), {
                subject: event.change.subject,
                class: event.change.class.join(", "),
                teacher: event.change.change.teacher || event.change.teacher,
                room: event.change.change.room,
              })
            }}<span class="notes" v-if="event.change.notes">
              {{ $t("timetable.notes") }} {{ event.change.notes }}
            </span>
          </span>
          <span class="notes">
            {{ dayjs(event.updatedAt).format("DD.MM.YYYY, HH:mm") }}
          </span>
        </div>
      </div>
    </template>
  </div>
</template>

<style scoped>
.change {
  display: grid;
  min-height: 35px;
  border-radius: 11px;
  margin-bottom: 10px;
  padding: 10px 10px;
  grid-template-columns: min-content auto;
  gap: 5px;
}

.hour {
  font-size: 30px;
  display: flex;
  align-items: center;
  letter-spacing: 5px;
}

.infos {
  display: flex;
  justify-content: center;
  flex-direction: column;
}

.text {
  font-size: 18px;
  display: flex;
  align-items: center;
  word-wrap: break-word;
  flex-direction: column;
  align-items: flex-start;
}

p {
  margin: 0px;
}

.notes {
  font-size: 13px;
  font-weight: 100;
}
</style>
