<template>
  <BulmaDrawer>
    <template v-slot:heading>Türchen bearbeiten</template>

    <template v-slot:default>
      <div class="panel-tabs is-justify-content-space-between">
        <BulmaButton
          :disabled="current_step === 0"
          class="is-success"
          @click="current_step--"
          icon="fa-solid fa-backward"
        />
        <BulmaBreadcrumbs :steps="steps" v-model="current_step" class="mb-0" />
        <BulmaButton
          :disabled="current_step === 2"
          class="is-success"
          @click="current_step++"
          icon="fa-solid fa-forward"
        />
      </div>

      <div class="panel-block">
        <DoorPlacer v-if="current_step === 0" v-model:doors="doors" />
        <DoorChooser v-if="current_step === 1" v-model:doors="doors" />
        <Calendar v-if="current_step === 2" :doors="doors" />
      </div>

      <div class="panel-block is-flex is-justify-content-space-between">
        <BulmaButton
          class="is-danger"
          @click="on_download"
          icon="fa-solid fa-cloud-arrow-down"
          text="Laden"
        />
        <BulmaButton
          class="is-warning"
          @click="on_discard"
          icon="fa-solid fa-trash"
          text="Löschen"
        />
        <BulmaButton
          class="is-success"
          @click="on_upload"
          icon="fa-solid fa-cloud-arrow-up"
          text="Speichern"
        />
      </div>
    </template>
  </BulmaDrawer>
</template>

<style scoped>
div.panel-block.is-flex button {
  min-width: 150px;
}
</style>

<script lang="ts">
import { Door, DoorsSaved } from "@/lib/door";
import { Options, Vue } from "vue-class-component";

import BulmaBreadcrumbs, { Step } from "./BulmaBreadcrumbs.vue";
import BulmaButton from "./BulmaButton.vue";
import BulmaDrawer from "./BulmaDrawer.vue";
import Calendar from "./Calendar.vue";
import DoorChooser from "./calendar/editor/DoorChooser.vue";
import DoorPlacer from "./calendar/editor/DoorPlacer.vue";

@Options({
  components: {
    BulmaBreadcrumbs,
    BulmaButton,
    BulmaDrawer,
    DoorPlacer,
    DoorChooser,
    Calendar,
  },
})
export default class extends Vue {
  public readonly steps: Step[] = [
    { label: "Platzieren", icon: "fa-solid fa-crosshairs" },
    { label: "Ordnen", icon: "fa-solid fa-list-ol" },
    { label: "Überprüfen", icon: "fa-solid fa-check" },
  ];
  public current_step = 0;
  public doors: Door[] = [];

  private load_doors(): Promise<void | DoorsSaved> {
    return this.$advent22.api_get<DoorsSaved>("/general/doors").then((data) => {
      this.doors.length = 0;

      for (const value of data) {
        this.doors.push(Door.load(value));
      }
    });
  }

  private save_doors(): Promise<void> {
    const data: DoorsSaved = [];

    for (const door of this.doors) {
      if (door.day === -1) {
        continue;
      }

      data.push(door.save());
    }

    return this.$advent22.api_put("/general/doors", data);
  }

  public mounted(): void {
    this.load_doors().catch((reason) => alert(`Fehler: ${reason}`));
  }

  public on_download() {
    if (confirm("Aktuelle Änderungen verwerfen und Status vom Server laden?")) {
      this.load_doors()
        .then(() => alert("Erfolgeich!"))
        .catch((reason) => alert(`Fehler: ${reason}`));
    }
  }

  public on_discard() {
    if (confirm("Alle Türchen löschen? (nur lokal)")) {
      // empty `doors` array
      this.doors.length = 0;
    }
  }

  public on_upload() {
    if (confirm("Aktuelle Änderungen an den Server schicken?")) {
      this.save_doors()
        .then(() => alert("Erfolgeich!"))
        .catch((reason) => alert(`Fehler: ${reason}`));
    }
  }
}
</script>
