import config from "@/app.config";
import { getToken } from "@/plugins/auth";
import { defineStore } from "pinia";
import { Notify } from "quasar";
import { io, Socket } from "socket.io-client";
import { ref } from "vue";
interface sockeBackup {
  message: string;
  success?: boolean;
}

export const useSocketStore = defineStore("socket", () => {
  let socket: Socket;
  const notificationCounter = ref(0);

  async function init() {
    socket = io(new URL(config.API.socket).origin, {
      auth: { token: await getToken() },
      path: "/api/v1/org-socket",
    });
    socket.on("send-command-notification", (payload) => {
      let body: sockeBackup = JSON.parse(payload);
      notifyStatus(body.message, body.success);
    });

    socket.on("send-notification", (payload) => {
      let body: sockeBackup = JSON.parse(payload);
      notifyStatus(body.message, body.success);
    });

    socket.on("send-create-draft-org", (payload) => {
      let body: sockeBackup = JSON.parse(payload);
      if (body.message == "ระบบกำลังทำการสร้างแบบร่างโครงสร้างหน่วยงาน") {
        notifyStatus(body.message, body.success);
      } else {
        notifyStatusOrg("draft", body.message, body.success);
      }
    });

    socket.on("send-publish-org", (payload) => {
      let body: sockeBackup = JSON.parse(payload);
      if (body.message == "ระบบกำลังทำการเผยแพร่โครงสร้างหน่วยงาน") {
        notifyStatus(body.message, body.success);
      } else {
        notifyStatusOrg("current", body.message, body.success);
      }
    });

    socket.on("socket-notification", (payload) => {
      let body: sockeBackup = JSON.parse(payload);
      notifyStatusWithProgress(body.message, body.success);
      notificationCounter.value++;
    });
  }

  function notifyStatus(message: string, success?: boolean) {
    Notify.create({
      group: false,
      type: success === undefined || success ? "positive" : "negative",
      message: `${message}`,
      position: "top",
      timeout: 0,
      actions: [
        {
          icon: "close",
          color: "white",
          round: true,
        },
      ],
    });
  }

  function notifyStatusWithProgress(message: string, success?: boolean) {
    Notify.create({
      group: false,
      type: success === undefined || success ? "positive" : "negative",
      message: `${message}`,
      position: "top",
      timeout: success === undefined || success ? 3000 : 0,
      actions:
        success === undefined || success
          ? []
          : [
              {
                icon: "close",
                color: "white",
                round: true,
              },
            ],
      progress: true,
    });
  }

  function fnStyleNotiOrg() {
    if (document.getElementById("notify-link-style")) return;
    const style = document.createElement("style");
    style.id = "notify-link-style";
    style.textContent = `
    .notify-link {
      padding: 4px 8px;
      border-radius: 4px;
      text-decoration: none;
      color: #fff;
      border: 1px solid #fff;
      transition: all 0.3s;
      cursor: pointer;
      margin:0 0 0 5px;
    }
    .notify-link:hover {
      background-color: #ffffff;
      color: #21BA45;
    }
  `;
    document.head.appendChild(style);
  }

  (window as any).resetOrgPage = (type: string) => {
    localStorage.setItem("org_type", type);
    window.location.reload();
  };

  function notifyStatusOrg(type: string, message: string, success?: boolean) {
    fnStyleNotiOrg();
    Notify.create({
      message: `${message} <a href="#" onclick="window.resetOrgPage('${type}')" class="notify-link">${
        type == "draft" ? "ไปยังโครงสร้างแบบร่าง" : "ไปยังโครงสร้างปัจจุบัน"
      }</a>`,
      html: true,
      group: false,
      type: success === undefined || success ? "positive" : "negative",
      position: "top",
      timeout: 0,
      actions: [
        {
          icon: "close",
          color: "white",
          round: true,
        },
      ],
    });
  }

  init();

  return { notificationCounter };
});