<template>
  <mobile-fullscreen-dialog v-model="popup">
    <template #activator="activator">
      <create-button
        style="z-index: 5"
        color="secondary"
        @click="popup = true"
        :disabled="popup"
        fab
        large
        bottom
        fixed
        right
      >
        <v-icon>$plus</v-icon>
      </create-button>
    </template>
    <template #title>
      <div>
        {{ $t("alsijil.coursebook.absences.title") }}
      </div>
      <span v-if="!form" class="px-2">·</span>
      <div v-if="!form">
        {{ $t("alsijil.coursebook.absences.summary") }}
      </div>
    </template>
    <template #content>
    <absence-creation-form v-if="form"
      :persons="persons"
      :start-date="startDate"
      :end-date="endDate"
      :comment="comment"
      :absence-reason="absenceReason"
      @persons="persons = $event"
      @start-date="startDate = $event"
      @end-date="endDate = $event"
      @comment="comment = $event"
      @absence-reason="absenceReason = $event"
    />
    <absence-creation-summary v-else
      :persons="persons"
      :start-date="startDate"
      :end-date="endDate"
    />
    </template>
    <template #actions>
      <!-- secondary -->
      <!-- TODO: Return to form on cancel? form=true -->
      <cancel-button
        @click="cancel"
        :disabled="loading"
      />
      <!-- primary -->
      <save-button
        v-if="form"
        i18n-key="actions.continue"
        @click="form = false"
        :loading="loading"
      />
      <save-button
        v-else
        i18n-key="actions.confirm"
        @click="confirm"
        :loading="loading"
      />
    </template>
  </mobile-fullscreen-dialog>
</template>

<script>
import MobileFullscreenDialog from "aleksis.core/components/generic/dialogs/MobileFullscreenDialog.vue";
import AbsenceCreationForm from "./AbsenceCreationForm.vue";
import AbsenceCreationSummary from "./AbsenceCreationSummary.vue";
import CreateButton from "aleksis.core/components/generic/buttons/CreateButton.vue";
import CancelButton from "aleksis.core/components/generic/buttons/CancelButton.vue";
import SaveButton from "aleksis.core/components/generic/buttons/SaveButton.vue";
import { createAbsences } from "./absenceCreation.graphql";

export default {
  name: "AbsenceCreationDialog",
  components: {
    MobileFullscreenDialog,
    AbsenceCreationForm,
    AbsenceCreationSummary,
    CreateButton,
    CancelButton,
    SaveButton,
  },
  data() {
    return {
      popup: false,
      form: true,
      loading: false,
      // TODO: All needed? Check if sensible defaults.
      persons: [],
      startDate: "",
      endDate: "",
      comment: "",
      absenceReason: "",
    };
  },
  methods: {
    cancel() {
      this.popup = false;
      this.form = true;
    },
    confirm() {
      this.$apollo.mutate( {
        mutation: createAbsences,
        variables: {
          persons: this.persons.map((p) => p.id),
          start: this.startDate,
          end: this.endDate,
          comment: this.comment,
          reason: this.absenceReason,
        },
      })
        .then(() => {
          this.persons = [];
          this.startDate = "";
          this.endDate = "";
          this.comment = "";
          this.absenceReason = "";
          this.popup = false;
          $toastSuccess("alsijil.coursebook.absences.success");
        })
        .catch((error) => {
          popup = false;
          this.handleError(error);
        });
      // finally for loading
    },
  },
};
</script>