import { ref } from 'vue'
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'
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('socket-notification', (payload) => {
      let body: sockeBackup = JSON.parse(payload)
      notificationCounter.value++ 
      notifyStatus(body.message, body.success)
    })
  }

  function notifyStatus(message: string, success?: boolean) {
    Notify.create({
      group: false,
      type: success === undefined || success ? 'positive' : 'negative',
      message: `${message}`,
      position: 'top',
      classes: 'custom-notification-top', // ใส่ class ที่เราสร้างไว้
      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 }
})