<template>
  <MultiModal ref="multi_modal" />

  <section>
    <figure class="image">
      <img :src="$advent22.api_url('general/background')" />
      <ThouCanvas>
        <CalendarDoor v-for="(_, index) in doors" :key="`door-${index}`" :door="doors[index]" @doorClick="door_click"
          @doorSuccess="door_success" @doorFailure="door_failure" />
      </ThouCanvas>
    </figure>
  </section>
</template>

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

import CalendarDoor from "./CalendarDoor.vue";
import MultiModal from "./MultiModal.vue";
import ThouCanvas from "./rects/ThouCanvas.vue";

@Options({
  components: {
    MultiModal,
    ThouCanvas,
    CalendarDoor,
  },
  props: {
    doors: Array,
  },
})
export default class extends Vue {
  public readonly doors!: Door[];

  declare $refs: {
    multi_modal: MultiModal;
  };

  public door_click() {
    this.$refs.multi_modal.show_progress();
  }

  public door_success(image_src: string) {
    this.$refs.multi_modal.show_image(image_src);
  }

  public door_failure(msg: string) {
    this.$refs.multi_modal.set_active(false);
    alert(msg);
  }
}
</script>

<style lang="scss" scoped>
section>figure {
  user-select: none;
}
</style>