<template>
  <ApolloMutation
    :mutation="require('./LessonDocumentation.graphql')"
    :variables=lessonDocumentationEdit
    @done="onDone"
  >
    <template v-slot="{ mutate, loading, error }">
      <v-card elevation="2" :loading="loading">
        <v-form v-model="valid">
          <v-row class="ma-0">
            <v-col cols="12" md="4" lg="3" xl="2">
              <v-hover v-slot="{ hover }">
                <div>
                  <v-menu
                    v-model="showPicker"
                    :close-on-content-click="false"
                    transition="scale-transition"
                    offset-y
                    min-width="auto"
                  >
                    <template v-slot:activator="{ on, attrs }">
                      <v-card-title>
                        <span v-text="new Date(lessonDocumentationEdit.date).toLocaleDateString($root.languageCode)" class="ma-1"></span>
                        <v-btn right v-bind="attrs" v-on="on" icon v-if="hover && dateAndPeriodEditable">
                          <v-icon>mdi-pencil-outline</v-icon>
                        </v-btn>
                      </v-card-title>
                    </template>
                    <v-date-picker
                      scrollable
                      no-title
                      @input="showPicker = false; $emit('change-date', $event)"
                      v-model="lessonDocumentationEdit.date"
                    ></v-date-picker>
                  </v-menu>
                </div>
              </v-hover>
              <v-hover v-slot="{ hover }">
                <div>
                  <v-menu offset-y>
                    <template v-slot:activator="{ on, attrs }">
                      <v-card-title>
                        <span v-text="period" class="ma-1"></span>
                        <v-btn
                          right
                          v-bind="attrs"
                          v-on="on"
                          icon
                          v-if="hover && dateAndPeriodEditable"
                        >
                          <v-icon>mdi-pencil-outline</v-icon>
                        </v-btn>
                      </v-card-title>
                    </template>
                    <v-list>
                    <!-- Fixme: load valid lessons -->
                      <v-list-item
                        v-for="(item, index) in [1, 2, 3, 4, 5, 6, 7, 8, 9]"
                        :key="index"
                      >
                        <v-list-item-title>{{ item }}</v-list-item-title>
                      </v-list-item>
                    </v-list>
                  </v-menu>
                </div>
              </v-hover>
            </v-col>
            <v-col cols="12" md="4" lg="6" xl="7">
            <message-box type="error" v-if="error">Error updating data</message-box>
              <v-textarea
                name="input-7-1"
                :label="$root.django.gettext('Topic')"
                rows="1"
                auto-grow
                required

                v-model="lessonDocumentationEdit.topic"
                @change="mutate()"
              ></v-textarea>
              <v-textarea
                name="input-7-1"
                :label="$root.django.gettext('Homework')"
                rows="1"
                auto-grow

                v-model="lessonDocumentationEdit.homework"
                @change="mutate()"
              ></v-textarea>
              <v-textarea
                name="input-7-1"
                :label="$root.django.gettext('Group note')"
                rows="1"
                auto-grow

                v-model="lessonDocumentationEdit.groupNote"
                @change="mutate()"
              ></v-textarea>
              <v-btn right color="primary">
                Save
              </v-btn>
            </v-col>
            <v-col cols="12" md="4" lg="3">
              Personal notes
              <personal-notes
                :lesson-documentation-id="lessonDocumentationEdit.id"
                :groups="groups"
                :excuse-types="excuseTypes"
                :extra-marks="extraMarks"

                v-model="lessonDocumentationEdit.personalNotes"
                @change="$emit('change-personal-notes', $event)"
              ></personal-notes>
            </v-col>
          </v-row>
        </v-form>
      </v-card>
    </template>
  </ApolloMutation>
</template>

<script>
  import PersonalNotes from "./PersonalNotes.vue";
  export default {
    components: { PersonalNotes },
    props: [ "lessonDocumentationEdit",  "groups", "excuseTypes", "extraMarks" ],
    name: "lesson-documentation",
    data () {
      return {
        //lessonDocumentationEdit: {},
      }
    },
    //created() {
      //this.lessonDocumentationEdit = this.lessonDocumentation
    //}
  }
</script>