<template>
  <v-card class="my-2 full-width">
    <!-- flex-md-row zeile ab medium -->
    <!-- align-stretch - stretch full-width -->
    <div
      class="full-width d-flex flex-column align-stretch"
      :class="{ 'flex-md-row': ('compact' in $attrs) }"
    >
      <lesson-information
        class="flex-grow-1"
        :documentation="$attrs.documentation"
      />
      <lesson-summary
        class="flex-grow-1"
        ref="summary"
        v-bind="$attrs"
        :is-create="false"
        :gql-patch-mutation="documentationsMutation"
        @open="$emit('open')"
        @loading="loading = $event"
        @save="$emit('close')"
      />
      <lesson-notes
        class="flex-grow-1"
        :documentation="$attrs.documentation"
      />
    </div>
    <v-divider/>
    <v-card-actions v-if="!('compact' in $attrs)">
      <v-spacer/>
      <cancel-button @click="$emit('close')" :disabled="loading" />
      <save-button
        @click="save"
        :loading="loading"
      />
    </v-card-actions>
  </v-card>
</template>

<script>
import LessonInformation from "./LessonInformation.vue";
import LessonSummary from "./LessonSummary.vue";
import LessonNotes from "./LessonNotes.vue";

import SaveButton from "aleksis.core/components/generic/buttons/SaveButton.vue";
import CancelButton from "aleksis.core/components/generic/buttons/CancelButton.vue";

import { createOrUpdateDocumentations } from "../coursebook.graphql";

export default {
  name: "Documentation",
  components: {
    LessonInformation,
    LessonSummary,
    LessonNotes,
    SaveButton,
    CancelButton,
  },
  emits: ["open", "close"],
  data() {
    return {
      loading: false,
      documentationsMutation: createOrUpdateDocumentations,
    };
  },
  methods: {
    save() {
      this.$refs.summary.save();
      this.$emit('close');
    },
  },
};
</script>