// @ts-ignore
import clipboardScript from "./scripts/clipboard.inline"
import clipboardStyle from "./styles/clipboard.scss"
import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types"

let webringdata = []
let webringmyindex = 17
let webringnext = {name: "ERROR", url: "about:blank"}
let webringprev = {name: "ERROR", url: "about:blank"}

fetch('https://raw.githubusercontent.com/CORTEXIMPLANT/webring/main/websites.json')
.then(function(response) {
  return response.json();
})
.then(function(myJson) {
  webringdata=myJson

  if (webringmyindex + 1 > webringdata.length - 1) {
    webringnext = webringdata[0]
  } else {
    webringnext = webringdata[webringmyindex + 1]
  }
  if (webringmyindex - 1 < 0) {
    webringprev = webringdata[webringdata.length - 1]
  } else {
    webringprev = webringdata[webringmyindex - 1]
  }

  // OVERWRITE
  webringnext = {"name": "NEXT", "url": "https://webring.obeythesystem.com/page?=next"}
  webringprev = {"name": "PREV", "url": "https://webring.obeythesystem.com/page?=previous"}
});

const Body: QuartzComponent = ({ children }: QuartzComponentProps) => {
  return (
    <div id="quartz-body" style="display: inline-block;">
      <span class="webring-container">
      <div class="webring">
        <a href={webringprev.url} rel="nofollow" class="webring-previous">{webringprev.name}</a>
        <a href="https://webring.obeythesystem.com" rel="nofollow" class="webring-long">OBEY THE SYSTEM webring</a>
        <a href="https://webring.obeythesystem.com" rel="nofollow" class="webring-short">OTS webring</a>
        <a href={webringnext.url} rel="nofollow" class="webring-next">{webringnext.name}</a>
      </div>
      <hr style="border: none; width: 100wh; height: 1px; margin: 0.5em 0 auto auto;" />
      </span>
      {children}
    </div>
  )
}

Body.afterDOMLoaded = clipboardScript
Body.css = clipboardStyle

export default (() => Body) satisfies QuartzComponentConstructor
