<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>
      <!-- Abwesenheit/Entschuldigung erfassen --> 
      <!-- Abwesenheit/Entschuldigung Zusammenfassung --> 
    </template>
    <template #content>
    <absence-creation-form v-if="form" />
    <absence-creation-summary v-else />
    </template>
    <template #actions>
      <!-- secondary -->
      <!-- TODO: Return to form on cancel? form=true -->
      <cancel-button
        @click="popup = false"
        :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";

export default {
  name: "AbsenceCreationDialog",
  components: {
    MobileFullscreenDialog,
    AbsenceCreationForm,
    AbsenceCreationSummary,
    CreateButton,
    CancelButton,
    SaveButton,
  },
  data() {
    return {
      popup: false,
      form: true,
      loading: false,
    };
  },
  methods: {
    confirm() {
      // TODO: Send mutation (shown in absence-creation-summary)
      popup = false;
    },
  },
};
</script>