<template>
  <div class="panel">
    <p class="panel-heading" @click="is_open = !is_open">
      <span class="icon-text">
        <span class="icon has-text-link">
          <font-awesome-icon v-if="is_open" icon="fa-solid fa-caret-down" />
          <font-awesome-icon v-else icon="fa-solid fa-caret-right" />
        </span>
        <span>Türchen bearbeiten</span>
      </span>
    </p>

    <template v-if="is_open">
      <div class="panel-tabs">
        <BulmaBreadcrumbs :steps="steps" v-model="current_step" />
      </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 v-if="current_step === 2" class="panel-block">
        <BulmaButton class="is-success is-fullwidth" @click.left="load_doors">
          Laden
        </BulmaButton>
        <BulmaButton
          class="is-success is-fullwidth"
          icon="fa-solid fa-crosshairs"
          @click.left="save_doors"
        >
          Speichern
        </BulmaButton>
      </div>
    </template>
  </div>
</template>

<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 Calendar from "./Calendar.vue";
import DoorChooser from "./calendar/editor/DoorChooser.vue";
import DoorPlacer from "./calendar/editor/DoorPlacer.vue";

@Options({
  components: {
    BulmaBreadcrumbs,
    BulmaButton,
    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 is_open = false;
  public current_step = 0;
  public doors: Door[] = [];

  public load_doors() {
    this.$advent22.api_get<DoorsSaved>("/general/doors").then((data) => {
      this.doors.length = 0;

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

  public save_doors() {
    const data: DoorsSaved = [];

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

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

    this.$advent22.api_put("/general/doors", data);
  }
}
</script>

<style scoped>
div.panel > .panel-heading {
  cursor: pointer;
  user-select: none;
}
</style>
