<template>
  <div id="app">
    <CoolLightBox
      :items="sharedConversationState.previewMediaItems"
      :index="sharedConversationState.previewMediaIndex"
      :slideshow="false"
      @close="sharedConversationState.previewMediaIndex = null"
    >
    </CoolLightBox>

    <notifications />
    <IpcMain v-if="sharedMiscState.isMainWindow" />
    <router-view />
  </div>
</template>

<script>
import store from "./store.js";
import { isElectron } from "./platform";
import CoolLightBox from "vue-cool-lightbox";
import "vue-cool-lightbox/dist/vue-cool-lightbox.min.css";
import IpcMain from "./ipc/ipcMain";
import { currentWindow } from "./platform";
import wfc from "./wfc/client/wfc";
export default {
  name: "App",
  data() {
    return {
      url: "",
      sharedMiscState: store.state.misc,
      sharedConversationState: store.state.conversation,
    };
  },
  methods: {
    visibilityChange(event, hidden) {
      store.setPageVisibility(!hidden);
      console.log("page visibilityChange", hidden);
      if (!hidden && !isElectron()) {
        wfc.onForeground();
      }
    },
    onblur() {
      store.setPageVisibility(false);
    },
    onfocus() {
      store.setPageVisibility(true);
    },
  },

  created() {
    let root = document.documentElement;
    if (isElectron() || window.location.href.indexOf("voip") >= 0) {
      root.style.setProperty("--main-margin-left", "0px");
      root.style.setProperty("--main-margin-right", "0px");
      root.style.setProperty("--main-margin-top", "0px");
      root.style.setProperty("--main-margin-bottom", "0px");
      root.style.setProperty("--composite-message-page-width", "100vw");
      root.style.setProperty("--composite-message-page-height", "100vh");
    }

    if (this.sharedMiscState.isElectronWindowsOrLinux) {
      root.style.setProperty("--main-border-radius", "0px");
      root.style.setProperty("--home-menu-padding-top", "0px");
    }
    window.addEventListener("blur", this.onblur);
    window.addEventListener("focus", this.onfocus);
    if (isElectron()) {
      currentWindow.minimizable = this.sharedMiscState.enableMinimize;
    }
  },

  mounted() {
    let href = window.location.href;
    if (href.indexOf("voip") >= 0 || href.indexOf("files") >= 0) {
      let app = document.getElementById("app");
      let el = document.getElementById("blur-container");
      el && app.removeChild(el);
      el = document.getElementById("styled_video_container");
      el && app.removeChild(el);
      el = document.getElementById("main-content-container");
      el.style.backgroundColor = "#292929";
    }
    this.$eventBus.$on("uploadFile", (file) => {
      if (!file) {
        return;
      }
      if (file.size > 100 * 1024 * 1024 && !wfc.isSupportBigFilesUpload()) {
        this.$notify({
          title: "大文件提示",
          text: " 不支持大文件上传",
          type: "warn",
        });
      }
    });
  },
  beforeDestroy() {
    this.$eventBus.$off("uploadFile");
    window.removeEventListener("blur", this.onblur);
    window.removeEventListener("focus", this.onfocus);
  },
  components: {
    IpcMain,
    CoolLightBox,
  },
};
</script>

<style lang="scss">
:root {
  --main-border-radius: 10px;
  --main-margin-left: 80px;
  --main-margin-right: 180px;
  --main-margin-top: 150px;
  --main-margin-bottom: 150px;
  --tippy-right: 0px;
  --home-menu-padding-top: 60px;
  --composite-message-page-width: 100%;
  --composite-message-page-height: 100%;
}
.tippy-tooltip {
  right: var(--tippy-right) !important;
  border: 1px solid #f5f5f5 !important;
  background-color: #fcfcfc !important;
  box-shadow: 0 0 25px rgba(0, 0, 0, 0.125);
}
#app {
  height: 100vh;
}
</style>
