loader.ts

import * as paneRegistry from 'pane-registry'
import * as $rdf from 'rdflib'
import { solidLogicSingleton, store, authSession } from 'solid-logic'
import { getOutliner } from '../src'
import { formPane as Pane } from '../src/form/pane'
import './dev-mash.css'

function registerPaneModule (moduleOrPane: any) {
  const pane = moduleOrPane?.default || moduleOrPane
  paneRegistry.register(pane)
}

async function preloadFormOntologies () {
  const ontologyDocs = [
    'https://www.w3.org/ns/ui.ttl'
  ]

  await Promise.all(
    ontologyDocs.map(async uri => {
      try {
        await store.fetcher.load($rdf.sym(uri))
      } catch (error) {
        console.warn('Could not preload ontology:', uri, error)
      }
    })
  )
}

// Add custom properties to the Window interface for TypeScript
declare global {
  interface Window {
    logout: () => void;
    login: () => Promise<void>;
    renderPane: typeof renderPane;
    Pane: typeof Pane;
  }
}

async function renderPane (uri: string) {
  if (!uri) {
    console.log("usage renderPane('http://example.com/#this')", uri)
    return
  }
  const subject = $rdf.sym(uri)
  const doc = subject.doc()
  const paneSubject = Pane.name === 'dataContents' ? doc : subject

  const target = document.getElementById('render')

  try {
    await new Promise((resolve, reject) => {
      store.fetcher.load(doc).then(resolve, reject)
    })
  } catch (error) {
    console.error('Failed to load document for pane rendering', error)
    if (target) {
      target.innerHTML = `<pre>Failed to load ${doc.uri}\n${String(error)}</pre>`
    }
    return
  }

  const context = {
    // see https://github.com/solidos/solid-panes/blob/005f90295d83e499fd626bd84aeb3df10135d5c1/src/index.ts#L30-L34
    dom: document,
    getOutliner,
    session: {
      store: store,
      paneRegistry,
      logic: solidLogicSingleton
    }
  }

  console.log(subject, context)
  try {
    const icon = createIconElement(Pane)
    const paneDiv = Pane.render(paneSubject, context, {})
    if (target) {
      target.innerHTML = ''
      target.appendChild(icon)
      target.appendChild(paneDiv)
    } else {
      console.error("Element with id 'render' not found.")
    }
  } catch (error) {
    console.error('Pane render failed', error)
    if (target) {
      target.innerHTML = `<pre>Pane render failed\n${String(error)}</pre>`
    }
  }
}

function createIconElement (Pane: { icon: string }) {
  const icon = Pane.icon
  const img = document.createElement('img')
  img.src = icon
  img.width = 40
  return img
}

window.onload = async () => {
  console.log('document ready')
  // registerPanes((cjsOrEsModule: any) => paneRegistry.register(cjsOrEsModule.default || cjsOrEsModule))
  registerPaneModule(Pane)
  registerPaneModule(require('contacts-pane'))
  await preloadFormOntologies()
  await authSession.handleIncomingRedirect({
    restorePreviousSession: true
  })
  const session = await authSession
  if (!session.info.isLoggedIn) {
    console.log('The user is not logged in')
    const loginBanner = document.getElementById('loginBanner');
    if (loginBanner) {
      loginBanner.innerHTML = '<button onclick="login()">Log in</button>';
    }
    } else {
      console.log(`Logged in as ${session.info.webId}`)
    
    const loginBanner = document.getElementById('loginBanner');
    if (loginBanner) {
      loginBanner.innerHTML = `Logged in as ${session.info.webId} <button onclick="logout()">Log out</button>`;
    }
  }
  renderPane('https://sstratsianis.solidcommunity.net/formtest.ttl#this')
}
window.logout = () => {
  authSession.logout()
  window.location.href = ''
}
window.login = async function () {
  const session = await authSession
  if (!session.info.isLoggedIn) {
    const issuer = prompt('Please enter an issuer URI', 'https://solidcommunity.net')
    if (issuer) {
      await authSession.login({
        oidcIssuer: issuer,
        redirectUrl: window.location.href,
        clientName: 'Solid Panes Dev Loader'
      })
    } else {
      console.warn('Login cancelled: No issuer provided.')
    }
  }
};
(window as any).renderPane = renderPane
console.log("Pane at runtime:", Pane); window.Pane = Pane;