export default {
    props: ["date", "period", "topic", "homework", "groupNote", "personalNotes", "groups", "excuseTypes", "extraMarks"],
    name: "lesson-documentation",
    data: () => {
        return {
            valid: false,
            showPicker: false,
            dateAndPeriodEditable: false,
        }
    },
    template: `
    <v-card elevation="2">
      <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(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="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>
<!--                      (this.$root.django.gettext('%s. Period'), period)-->
                      <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">
            <v-textarea
              name="input-7-1"
              :label="this.$root.django.gettext('Topic')"
              rows="1"
              auto-grow
              required
              
              :value="topic"
              @input="$emit('change-topic', $event)"
            ></v-textarea>
            <v-textarea
              name="input-7-1"
              :label="this.$root.django.gettext('Homework')"
              rows="1"
              auto-grow
              
              :value="homework"
              @input="$emit('change-homework', $event)"
            ></v-textarea>
            <v-textarea
              name="input-7-1"
              :label="this.$root.django.gettext('Group note')"
              rows="1"
              auto-grow
              
              :value="groupNote"
              @input="$emit('change-group-note', $event)"
            ></v-textarea>
          </v-col>
          <v-col cols="12" md="4" lg="3">
            <personal-notes
              :groups="groups"
              :excuse-types="excuseTypes"
              :extra-marks="extraMarks"
              
              v-model="personalNotes"
              @change="$emit('change-personal-notes', $event)"
            ></personal-notes>
          </v-col>
        </v-row>
      </v-form>
    </v-card>
`
}