import { ipcRenderer, contextBridge } from 'electron'

contextBridge.exposeInMainWorld('ipcRenderer', {
  on: (channel, listener) => {
    return ipcRenderer.on(channel, (_event, ...args) => listener(...args))
  },
  off: (channel, ...args) => ipcRenderer.off(channel, ...args),
  send: (channel, ...args) => ipcRenderer.send(channel, ...args),
  invoke: (channel, ...args) => ipcRenderer.invoke(channel, ...args),
})

contextBridge.exposeInMainWorld('api', {
  pb: {
    fetchEntries: () => ipcRenderer.invoke('pb:fetchEntries'),
    createEntry: (data) => ipcRenderer.invoke('pb:createEntry', data),
    updateEntry: (id, data) => ipcRenderer.invoke('pb:updateEntry', { id, ...data }),
    deleteEntry: (id) => ipcRenderer.invoke('pb:deleteEntry', { id }),
  },
})

function domReady(condition = ['complete', 'interactive']) {
  return new Promise((resolve) => {
    if (condition.includes(document.readyState)) {
      resolve()
    } else {
      document.addEventListener('readystatechange', () => {
        if (condition.includes(document.readyState)) resolve()
      })
    }
  })
}

const safeDOM = {
  append(parent, child) {
    if (!Array.from(parent.children).includes(child)) parent.appendChild(child)
  },
  remove(parent, child) {
    if (Array.from(parent.children).includes(child)) parent.removeChild(child)
  },
}

function useLoading() {
  const className = 'loaders-css__square-spin'
  const styleContent = `
@keyframes square-spin {
  25% { transform: perspective(100px) rotateX(180deg) rotateY(0); }
  50% { transform: perspective(100px) rotateX(180deg) rotateY(180deg); }
  75% { transform: perspective(100px) rotateX(0) rotateY(180deg); }
  100% { transform: perspective(100px) rotateX(0) rotateY(0); }
}
.${className} > div {
  animation-fill-mode: both;
  width: 50px;
  height: 50px;
  background: #fff;
  animation: square-spin 3s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite;
}
.app-loading-wrap {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #1a1b26;
  z-index: 9;
}
  `
  const style = document.createElement('style')
  const div = document.createElement('div')
  style.id = 'app-loading-style'
  style.textContent = styleContent
  div.className = 'app-loading-wrap'
  div.innerHTML = `<div class="${className}"><div></div></div>`

  return {
    appendLoading() {
      safeDOM.append(document.head, style)
      safeDOM.append(document.body, div)
    },
    removeLoading() {
      safeDOM.remove(document.head, style)
      safeDOM.remove(document.body, div)
    },
  }
}

const { appendLoading, removeLoading } = useLoading()
domReady().then(appendLoading)
window.onmessage = (ev) => {
  if (ev.data?.payload === 'removeLoading') removeLoading()
}
setTimeout(removeLoading, 4000)