<template>
  <div>
    <Loading v-if="loading" />
    <div :class="`book-view ${flipbookRef ? '' : 'is-transparent'}`" v-else>
      <div class="book-view m-sm m-r-md">
        <div
          class="go-left m-r-sm"
          style="display: inline-block; align-items: center; position: absolute; left:0px; top:0px"
        >
          <button
            class="button book-flip-buttons"
            :disabled="!(callManager.isHost && canFlipLeft)"
            @click="onLeftClicked()"
          >
            <i class="fa fa-fw fa-arrow-left"></i>
          </button>
        </div>
        <flipbook
          class="flipbook"
          :pages="createPages"
          :forwardDirection="callManager.currentActivity.ltr ? 'right':  'left'"
          :zooms="null"
          :enabled="callManager.isHost"
          @on-mounted="bookMounted()"
          ref="flipbook"
          v-slot="flipbook"
        >
          <!-- @flip-left-start="onFlip('left')" -->
          <!-- @flip-right-start="onFlip('right')" -->
          <div class="page-progress has-text-centered m-b-none">
            <p>Page {{ flipbook.page }} of {{ flipbook.numPages }}</p>
          </div>
        </flipbook>
        <div
          class="go-right m-l-sm"
          style="display: inline-block; align-items: center; position: absolute; right:0px; top:0px"
        >
          <button
            class="button book-flip-buttons"
            :disabled="!(callManager.isHost && canFlipRight)"
            @click="onRightClicked()"
          >
            <i class="fa fa-fw fa-arrow-right"></i>
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import Flipbook from "../../components/flipbook/flipbook.cjs.js";
import Loading from "../../../shared/components/Loading/Loading.vue";
import CallManager, { ECallEvents } from "../../ws/call.manager";
import WebsocketService from "../../ws/websocket.service";
import { mapActions, mapGetters } from "vuex";
export default {
  name: "CallBook",
  components: { Flipbook, Loading },
  async created() {
    const ws = await WebsocketService.getInstance();
    this.callManager = ws.callManager;
    this.callManager.on(
      ECallEvents.ACTION_BOOK_FLIP,
      this.onRemoteFlip.bind(this)
    );
    this.loading = false;
    return true;
  },
  destroyed() {
    this.callManager.removeListener(
      ECallEvents.ACTION_BOOK_FLIP,
      this.onRemoteFlip.bind(this)
    );
  },
  data() {
    return {
      loading: true,
      localStream: null,
      remoteStream: null,
      flipbookRef: false,
      callManager: { isHost: false } as CallManager
    };
  },
  computed: {
    canFlipLeft() {
      return this.flipbookRef && this.$refs.flipbook.canFlipLeft;
    },
    canFlipRight() {
      return this.flipbookRef && this.$refs.flipbook.canFlipRight;
    },
    createPages() {
      const pages = [null];
      for (let i = 1; i < this.callManager.currentActivity.pages + 1; i++) {
        pages.push(
          `/u/call/${this.callManager.callId}/books/${this.callManager.currentActivity.id}/page/${i}`
        );
      }
      return pages;
    },
    ...mapGetters(["user"])
  },
  methods: {
    bookMounted() {
      console.log("Book Mounted!");
      if (this.$refs.flipbook) {
        console.log("Found!");
        this.flipbookRef = true;
        // this.$refs.flipbook.onResize();
        // console.log("resized");
      } else {
        console.log("Still Null!!");
      }
    },
    onLeftClicked() {
      this.callManager.send(`book:action:flip-page`, { direction: "left" });
      this.$refs.flipbook.flipLeft();
    },
    onRightClicked() {
      this.callManager.send(`book:action:flip-page`, { direction: "right" });
      this.$refs.flipbook.flipRight();
    },
    onRemoteFlip(payload) {
      console.log("remote Flip!");
      switch (payload.direction) {
        case "left":
          this.$refs.flipbook.flipLeft();
          break;
        case "right":
          this.$refs.flipbook.flipRight();
          break;
      }
    }
  }
};
</script>
