<template>
  <div class="book-view">
    <!-- <nav class="level">
      <div class="level-left">
        <div class="level-item">
          <button class="button" @click="$router.back()">Back</button>
        </div>
      </div>
    </nav>-->
    <div class="is-flex">
      <div class="go-left m-r-sm" style="display: flex; align-items: center;">
        <button
          class="button book-flip-buttons"
          :disabled="!callManager.isHost"
          @click="onLeftClicked()"
        >
          <i class="fa fa-fw fa-arrow-left"></i>
        </button>
      </div>
      <flipbook
        class="flipbook"
        :pages="createPages(callManager.currentActivity)"
        :forwardDirection="callManager.currentActivity.ltr ? 'right':  'left'"
        :zooms="null"
        :enabled="callManager.isHost"
        @flip-left-end="onFlip('left')"
        @flip-right-end="onFlip('right')"
        ref="flipbook"
        v-slot="flipbook"
      >
        <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: flex; align-items: center;">
        <button
          class="button book-flip-buttons"
          :disabled="!callManager.isHost"
          @click="onRightClicked()"
        >
          <i class="fa fa-fw fa-arrow-right"></i>
        </button>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import Flipbook from "../../components/flipbook/flipbook.cjs.js";
import { ECallEvents } from "../../classes/call.manager";
import { mapActions, mapGetters } from "vuex";
export default {
  name: "CallBook",
  components: { Flipbook },
  created() {
    this.callManager.on(ECallEvents.ACTION_BOOK_FLIP, this.onRemoteFlip);
  },
  data() {
    return {
      localStream: null,
      remoteStream: null
    };
  },
  computed: {
    ...mapGetters(["user", "callManager"])
  },
  methods: {
    onFlip(direction: "left" | "right") {
      if (this.isHost)
        this.callManager.send(`book:action:flip-page`, { direction });
    },
    onLeftClicked() {
      this.$refs.flipbook.flipLeft();
    },
    onRightClicked() {
      this.$refs.flipbook.flipRight();
    },
    onRemoteFlip(payload) {
      switch (payload.direction) {
        case "left":
          this.$refs.flipbook.flipLeft();
          break;
        case "right":
          this.$refs.flipbook.flipRight();
          break;
      }
    },
    createPages(book) {
      const pages = [null];
      for (let i = 1; i < book.pages + 1; i++) {
        pages.push(`/u/books/${book.id}/page/${i}`);
      }
      return pages;
    }
  }
};
</script>
