<template>
  <SVGRect
    style="cursor: pointer"
    :rectangle="door.position"
    @click.left="on_click"
  >
  </SVGRect>
</template>

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

import SVGRect from "./SVGRect.vue";

@Options({
  components: {
    SVGRect,
  },
  props: {
    door: Door,
  },
  emits: ["doorClick", "doorSuccess", "doorFailure"],
})
export default class extends Vue {
  public door!: Door;

  public on_click() {
    this.$emit("doorClick");

    this.$advent22
      .api_get_blob(`user/image_${this.door.day}`)
      .then((data) => this.$emit("doorSuccess", this.door.day, data))
      .catch((error) => {
        this.$emit("doorFailure", this.$advent22.format_user_error(error));
      });
  }
}
</script>
