<template>
  <v-card-text>
    <!-- compact -->
    <v-text-field
      dense
      filled
      v-if="compact"
      :label="$t('alsijil.coursebook.summary.topic')"
      :value="documentation.topic"
      @input="topic=$event"
      @focusout="save"
      @keydown.enter="saveAndBlur"
      :loading="loading"
    />
    <v-chip
      v-if="compact"
      outlined
      @click="$emit('open')"
    >
      {{
        documentation.homework
            ? $t("alsijil.coursebook.summary.homework.value", {homework: truncate(documentation.homework)})
            : $t("alsijil.coursebook.summary.homework.empty")
      }}
    </v-chip>
    <v-chip
      v-if="compact"
      outlined
      @click="$emit('open')"
    >
      {{
        documentation.groupNote
            ? $t("alsijil.coursebook.summary.group_note.value", {groupNote: truncate(documentation.groupNote)})
            : $t("alsijil.coursebook.summary.group_note.empty")
      }}
    </v-chip>
    <!-- not compact -->
    <!-- Are focusout & enter enough trigger? -->
    <v-text-field
      filled
      v-if="!compact"
      :label="$t('alsijil.coursebook.summary.topic')"
      :value="documentation.topic"
      @input="topic=$event"
    />
    <v-textarea
      filled
      auto-grow
      v-if="!compact"
      :label="$t('alsijil.coursebook.summary.homework.label')"
      :value="documentation.homework"
      @input="homework=$event"
    />
    <v-textarea
      filled
      auto-grow
      v-if="!compact"
      :label="$t('alsijil.coursebook.summary.group_note.label')"
      :value="documentation.groupNote"
      @input="groupNote=$event"
      />
  </v-card-text>
</template>

<script>
import createOrPatchMixin from "aleksis.core/mixins/createOrPatchMixin.js";

export default {
  name: "LessonSummary",
  mixins: [createOrPatchMixin],
  props: {
    documentation: {
      type: Object,
      required: true,
    },
    compact: {
      type: Boolean,
      required: false,
      default: false,
    },
  },
  emits: ["open"],
  data() {
    return {
      topic: "",
      homework: "",
      groupNote: "",
      loading: false,
    };
  },
  methods: {
    truncate(str) {
      return str ?
        (str.length > 25) ? str.slice(0, 24) + ' …' : str
      : "";
    },
    handleUpdateAfterCreateOrPatch(itemId, wasCreate) {
      return (cached, incoming) => {
        this.loading = false;
        for (const object of incoming) {
          console.log('summary: handleUpdateAfterCreateOrPatch', object);
          // Replace the current documentation
          const index = cached.findIndex((o) => o[itemId] === this.documentation.id);
          // merged with the incoming partial documentation
          cached[index] = {...this.documentation, ...object};
        }
        return cached;
      };
    },
    save() {
      if (this.topic || this.homework || this.groupNote) {
        const topic = this.topic ? { topic: this.topic } : {};
        const homework = this.homework ? { homework: this.homework } : {};
        const groupNote = this.groupNote ? { groupNote: this.groupNote } : {};

        this.loading = true;
        console.log("save was called")

        this.createOrPatch([{
          id: this.documentation.id,
          ...topic,
          ...homework,
          ...groupNote,
        }]);

        this.topic = "";
        this.homework = "";
        this.groupNote = "";
      }
    },
    saveAndBlur(event) {
      this.save();
      event.target.blur();
    },
  },
};
</script>