<template>
  <div class="redo-undo">
    <div class="redo-undo-controller-btn" @click="handleUndo">
      <img :src="undoSteps === 0 ? undoDisabled : undo" />
    </div>
    <div class="redo-undo-controller-btn" @click="handleRedo">
      <img :src="redoSteps === 0 ? redoDisabled : redo" />
    </div>
  </div>
</template>

<script>
import redo from "./image/redo.svg";
import undo from "./image/undo.svg";
import redoDisabled from "./image/redo-disabled.svg";
import undoDisabled from "./image/undo-disabled.svg";

export default {
  name: "RedoUndo",
  props: {
    room: {
      type: Object,
    },
  },
  data() {
    return {
      redo,
      undo,
      redoDisabled,
      undoDisabled,
      undoSteps: 0,
      redoSteps: 0,
      disableSerialization: Boolean,
    };
  },

  methods: {
    handleUndo() {
      const room = this.room;
      room.undo();
    },

    handleRedo() {
      const room = this.room;
      room.redo();
    },
  },
  mounted() {
    const room = this.room;
    room.disableSerialization = false;
    room.callbacks.on("onCanUndoStepsUpdate", (steps) => {
      this.undoSteps = steps;
    });
    room.callbacks.on("onCanRedoStepsUpdate", (steps) => {
      this.redoSteps = steps;
    });
  },
};
</script>

<style scoped lang="less">
@import "./RedoUndo.less";
</style>
