<template>
  <v-card-text>
    <!-- Are focusout & enter enough trigger? -->
    <!-- TODO: focusout on enter -->
    <v-text-field
      label="Thema"
      :value="documentation.topic"
      @input="topic=$event"
      @focusout="saveTopic"
      @keydown.enter="saveTopic"
    />
    <v-text-field
      v-if="!compact"
      label="Hausaufgaben"
      :value="documentation.homework"
      @input="homework=$event"
    />
    <v-text-field
      v-if="!compact"
      label="Gruppennotiz"
      :value="documentation.groupnote"
      @input="groupnote=$event"
      />
    <v-chip
      v-if="compact"
      outlined
    >
      Hausaufgaben: {{ truncate(documentation.homework) }}
    </v-chip>
    <v-chip
      v-if="compact"
      outlined
    >
      Gruppennotiz: {{ truncate(documentation.groupnote) }}
    </v-chip>
  </v-card-text>
</template>

<script>
export default {
  name: "LessonSummary",
  props: {
    documentation: {
      type: Object,
      required: true,
    },
    compact: {
      type: Boolean,
      required: false,
      default: true,
    },
  },
  data() {
    return {
      topic: "",
    };
  },
  methods: {
    saveTopic() {
    },
    truncate(str) {
      return str ?
        (str.length > 30) ? str.slice(0, 29) + '&hellip;' : str
      : "";
    },
  },
};
</script>