<template>
  <BulmaDrawer header="Türchen bearbeiten" :ready="is_loaded" @open="on_open">
    <div class="is-flex is-align-items-center is-justify-content-space-between">
      <BulmaButton
        :disabled="current_step === 0"
        class="is-link"
        @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-link"
        @click="current_step++"
        icon="fa-solid fa-forward"
      />
    </div>

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

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

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

import Calendar from "./Calendar.vue";
import BulmaBreadcrumbs, { Step } from "./bulma/Breadcrumbs.vue";
import BulmaButton from "./bulma/Button.vue";
import BulmaDrawer from "./bulma/Drawer.vue";
import DoorChooser from "./editor/DoorChooser.vue";
import DoorPlacer from "./editor/DoorPlacer.vue";

@Options({
  components: {
    BulmaBreadcrumbs,
    BulmaButton,
    BulmaDrawer,
    DoorPlacer,
    DoorChooser,
    Calendar,
  },
})
export default class extends Vue {
  public is_loaded = true;

  public readonly steps: Step[] = [
    { label: "Platzieren", icon: "fa-solid fa-crosshairs" },
    { label: "Ordnen", icon: "fa-solid fa-list-ol" },
    { label: "Vorschau", icon: "fa-solid fa-magnifying-glass" },
  ];
  public current_step = 0;
  public doors: Door[] = [];

  private load_doors(): Promise<void | DoorsSaved> {
    return this.$advent22.api_get<DoorsSaved>("admin/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) {
      data.push(door.save());
    }

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

  public on_open(): void {
    this.is_loaded = false;

    this.load_doors()
      .then(() => (this.is_loaded = true))
      .catch(([reason, endpoint]) => {
        alert(`Fehler: ${reason} in ${endpoint}`);
      });
  }

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

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

  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(() => {
          this.load_doors()
            .then(() => alert("Erfolgeich!"))
            .catch(([reason, endpoint]) =>
              alert(`Fehler: ${reason} in ${endpoint}`),
            );
        })
        .catch((reason) => alert(`Fehler: ${reason}`));
    }
  }
}
</script>
