<template>
  <q-page class="row items-center justify-evenly">
    <wall-page />
    <media-control-page />
  </q-page>
  <register-dialog ref="register_dialog" />
</template>

<script lang="ts">
import { defineComponent, Ref, ref } from "vue";
import WallPage from "src/pages/WallPage.vue";
import MediaControlPage from "src/pages/MediaControlPage.vue";
import EventBus, { EventNamesDefine } from "src/common/EventBus";
import { useQuasar } from "quasar";
import { useI18n } from "vue-i18n";
import { useStore } from "src/store";
import Initializer from "src/common/Initializer";
import GlobalData from "src/common/GlobalData";
import RemoteDataExangeProcesser from "src/common/RemoteDataExangeProcesser";

import RegisterDialog from "src/components/RegisterDialog.vue";

export default defineComponent({
  name: "PageIndex",
  components: { WallPage, MediaControlPage, RegisterDialog },
  setup() {
    const $store = useStore();
    const $q = useQuasar();
    const $t = useI18n();

    const options = {
      $t,
      $store,
      $q,
    };

    const register_dialog: Ref<any> = ref(null);

    new Initializer(options).initialize().then(() => {
      $store.commit("setInitialized");
    });

    const remote_data_exange_processer = new RemoteDataExangeProcesser(options);
    remote_data_exange_processer.enable();

    EventBus.getInstance().on(EventNamesDefine.CurrentConnectDisconnect, () => {
      $q.loading.show({
        message:
          $t.t("network disconnect!") + $t.t("wait reconnection") + "...",
      });
    });

    EventBus.getInstance().on(EventNamesDefine.CurrentConnectConnected, () => {
      $q.loading.hide();
      setTimeout(() => {
        new Initializer(options).initialize().then(() => {
          $store.commit("setInitialized");
        });
      }, 500);
    });

    $store.commit(
      "setDeviceIpAddress",
      GlobalData.getInstance().getCurrentClientName()
    );

    const checkRegistered = () => {
      if (
        GlobalData.getInstance().getCurrentClient()?.is_connected &&
        GlobalData.getInstance().getCurrentClient()?.is_login
      ) {
        let register: any =
          GlobalData.getInstance().applicationConfig?.registered;
        try {
          register = JSON.parse(register);
        } catch {
          register = false;
        }
        if (
          !register &&
          (!register_dialog.value || !register_dialog.value.isShow())
        ) {
          $q.notify({
            color: "negative",
            icon: "report_problem",
            message:
              "<span class='text-h4'>" +
              $t.t("not registered") +
              "!!!" +
              "</span>",
            position: "center",
            actions: [
              {
                label: $t.t("register"),
                color: "blue",
                handler: () => {
                  if (register_dialog.value) {
                    register_dialog.value.showDialog();
                  }
                },
              },
            ],
            html: true,
            timeout: 2500,
          });
        }
      }
    };
    setInterval(checkRegistered, 5000);

    return {
      register_dialog,
    };
  },
});
</script>
