<template>
  <div class="box">
    <p class="title is-4">Türchen bearbeiten</p>

    <BulmaBreadcrumbs :steps="steps" v-model="current_step" />

    <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>
</template>

<script lang="ts">
import { Options, Vue } from "vue-class-component";
import { Door } from "./door_map/calendar";

import BulmaBreadcrumbs, { Step } from "./BulmaBreadcrumbs.vue";
import Calendar from "./Calendar.vue";
import DoorChooser from "./door_map/DoorChooser.vue";
import DoorPlacer from "./door_map/DoorPlacer.vue";

@Options({
  components: {
    BulmaBreadcrumbs,
    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[] = [];
}
</script>
