export const render: PlasmoRender<PlasmoCSUIJSXContainer> = async ({
  createRootContainer
}) => {
  const rootContainer = await createRootContainer()
  if (!rootContainer) return console.error("Root container not found")
  const root = createRoot(rootContainer)
  root.render(<CustomButton />)
}

export const render: PlasmoRender<PlasmoCSUIJSXContainer> = async ({
  createRootContainer
}) => {
  const rootContainer = await createRootContainer()
  if (!rootContainer) return console.error("Root container not found")
  const root = createRoot(rootContainer)
  root.render(<CustomButton />)
}

export const getRootContainer = () => {
  new Promise((resolve) => {
    const selector = "ul[data-test-id='ticket-editor-app-icon-view']"

    if (document.querySelector(selector)) {
      const rootContainerParent = document.querySelector(selector)
      const rootContainer = document.createElement("li")
      rootContainerParent.appendChild(rootContainer)
      return resolve(rootContainer)
    }

    const observer = new MutationObserver((mutations) => {
      if (document.querySelector(selector)) {
        const rootContainerParent = document.querySelector(selector)
        const rootContainer = document.createElement("li")
        rootContainerParent.appendChild(rootContainer)
        resolve(rootContainer)
        observer.disconnect()
      }
    })

    observer.observe(document.body, {
      childList: true,
      subtree: true
    })
  })
}

export const getRootContainer = () => {
  new Promise((resolve) => {
    const selector = "ul[data-test-id='ticket-editor-app-icon-view']"

    if (document.querySelector(selector)) {
      const rootContainerParent = document.querySelector(selector)
      const rootContainer = document.createElement("li")
      rootContainerParent.appendChild(rootContainer)
      return resolve(rootContainer)
    }

    const observer = new MutationObserver((mutations) => {
      if (document.querySelector(selector)) {
        const rootContainerParent = document.querySelector(selector)
        const rootContainer = document.createElement("li")
        rootContainerParent.appendChild(rootContainer)
        resolve(rootContainer)
        observer.disconnect()
      }
    })

    observer.observe(document.body, {
      childList: true,
      subtree: true
    })
  })
}