<template>
  <div class="back"></div>
  <div id="canvas">
    <div class="previousPage" @click="previousPage"></div>
    <div class="nextPage" @click="nextPage"></div>
    <div class="magazine-viewport">
      <div class="container">
        <div class="magazine"></div>
      </div>
    </div>
  </div>
</template>

<script>
import { onMounted, ref, onBeforeUnmount } from "vue";
// import $ from "jquery";
import { isChrome, addPage, disableControls } from "./magazine";
// import "/js/modernizr.2.5.3.min.js";
// import "/js/hash.js";
// import "/js/turn.js";
// import "/js/turn.html4.min.js";
// import "/js/zoom.min.js";
// import "/js/magazine.js";
const $ = window.$;
export default {
  name: "Flipbook",
  setup() {
    const magazine = ref(null);

    // Initialize the flipbook once the component is mounted
    onMounted(() => {
      setTimeout(() => {
        loadApp();
      }, 1000);
    });

    // Clean up on component unmount
    onBeforeUnmount(() => {
      if (magazine.value) {
        $(magazine.value).turn("destroy");
      }
    });

    const nextPage = () => {
      $(magazine.value).turn("next");
    };

    const previousPage = () => {
      $(magazine.value).turn("previous");
    };

    // Function to load the flipbook app
    function loadApp() {
      debugger;
      $("#canvas").fadeIn(1000);
      const flipbook = $(".magazine");
      if (flipbook.width() === 0 || flipbook.height() === 0) {
        setTimeout(loadApp, 10);
        return;
      }
      console.log(window.screen.width);
      console.log(window.screen.height);

      let w, h;
      if (window.screen.width > window.screen.height) {
        w = $(".magazine-viewport").parent().width();
        h = $(window).height();
        if (w === 0) {
          w = ((2482 * 2) / 3368) * h;
        }
        const w1 = ((2482 * 2) / 3368) * h;
        const h1 = (3368 / (2482 * 2)) * w;
        if (w1 > w) {
          h = h1;
        } else {
          w = w1;
        }
        $(".magazine-viewport").width(w).height(h);
        $(".magazine").width(w).height(h);
        $(window).resize(() => {
          let w = $(".magazine-viewport").parent().width();
          let h = $(window).height();
          if (w === 0) {
            w = ((2482 * 2) / 3368) * h;
          }
          const w1 = ((2482 * 2) / 3368) * h;
          const h1 = (3368 / (2482 * 2)) * w;
          if (w1 > w) {
            h = h1;
          } else {
            w = w1;
          }
          $(".magazine-viewport").width(w).height(h);
          $(".magazine").width(w).height(h);
        });
        initBook("double");
      } else {
        w = $(".magazine-viewport").parent().width();
        h = $(window).height();
        if (w === 0) {
          w = (2482 / 3368) * h;
        }
        const w1 = (2482 / 3368) * h;
        const h1 = (3368 / 2482) * w;
        if (w1 > w) {
          h = h1;
        } else {
          w = w1;
        }
        $(".magazine-viewport").width(w).height(h);
        $(".magazine").width(w).height(h);
        $(window).resize(() => {
          const w = $(".magazine-viewport").parent().width();
          const h = $(window).height();
          if (w === 0) {
            w = (2482 / 3368) * h;
          }
          const w1 = (2482 / 3368) * h;
          const h1 = (3368 / 2482) * w;
          if (w1 > w) {
            h = h1;
          } else {
            w = w1;
          }
          $(".magazine-viewport").width(w).height(h);
          $(".magazine").width(w).height(h);
        });
        initBook("single");
      }
    }

    // Function to initialize the flipbook
    function initBook(display) {
      const flipbook = $(".magazine");
      flipbook.turn({
        width: $(".magazine-viewport").parent().width(),
        height: $(window).height(),
        duration: 1000,
        display,
        acceleration: !isChrome(),
        gradients: true,
        autoCenter: true,
        elevation: 50,
        pages: 73,
        when: {
          turning: function (event, page, view) {
            const book = $(this);
            const currentPage = book.turn("page");
            const pages = book.turn("pages");
            Hash.go(`page/${page}`).update();
            disableControls(page);
          },
          turned: function (event, page, view) {
            disableControls(page);
            $(this).turn("center");
            if (page === 1) {
              $(this).turn("peel", "br");
            }
          },
          missing: function (event, pages) {
            for (let i = 0; i < pages.length; i++) addPage(pages[i], $(this));
          },
        },
      });
    }

    return {
      magazine,
      nextPage,
      previousPage,
    };
  },
};
</script>

<style scoped>
/* Add your custom styles for the flipbook here */
@import "./magazine.css";
</style>
