import {EditorView, keymap} from "@codemirror/view"

import {Facet} from "@codemirror/state"

import {createState} from "./editor.mjs"

import {Sandbox} from "./sandbox.mjs"

function chapterInteraction() {

document.querySelectorAll("button.help").forEach(button => {

button.style.display = "inline"

button.addEventListener("click", showHelp)

})

document.body.addEventListener("keydown", e => {

let active = document.activeElement

if (e.key == "?" && !e.ctrlKey && !e.altKey && !e.metaKey) {

if (!active || (active.contentEditable != "true" && active.nodeName != "INPUT")) {

e.preventDefault()

showHelp()

}

}

if (e.key == "Enter" && !e.ctrlKey && !e.altKey && !e.metaKey) {

let editor = active && maybeActivateCode(active)

if (editor) {

e.preventDefault()

editor.focus()

}

}

})

let modName = /Mac/.test(navigator.platform) ? "Cmd-" : "Ctrl-"

function showHelp() {

let popup = document.body.appendChild(document.createElement("div"))

popup.className = "popup"

popup.appendChild(document.createElement("h2")).textContent = "Instructions"

popup.appendChild(document.createElement("p")).textContent = `Code snippets on this page can be edited and run by clicking them or moving focus to them and pressing Enter. Executed snippets share their environment with other snippets ran on the page, and some pre-defined code for the chapter. When inside the code editor, the following keyboard shortcuts are available:`

for (let [key, desc] of [

[modName + "Enter", "Run code"],

[modName + "j", "Revert code"],

[modName + "↓", "Deactivate editor"],

[modName + "Escape", "Reset environment"],

]) {

let b = popup.appendChild(document.createElement("div"))

b.appendChild(document.createElement("kbd")).textContent = key

b.appendChild(document.createTextNode(": " + desc))

}

popup.tabIndex = 0

popup.addEventListener("blur", () => popup.remove())

popup.addEventListener("keydown", e => {

if (e.key == "Escape") { e.preventDefault(); popup.remove() }

})

popup.focus()

}

document.body.addEventListener("mousedown", e => {

for (let n = e.target; n; n = n.parentNode) {

if (n.className == "c_ident") return

let editor = maybeActivateCode(n)

if (editor) {

e.preventDefault()

setTimeout(() => {

let pos = editor.posAtCoords({x: e.clientX, y: e.clientY}, false)

editor.dispatch({selection: {anchor: pos}})

editor.focus()

}, 20)

return

}

}

})

function elt(type, attrs) {

let firstChild = 1

let node = document.createElement(type)

if (attrs && typeof attrs == "object" && attrs.nodeType == null) {

for (let attr in attrs) if (attrs.hasOwnProperty(attr)) {

let value = attrs[attr]

if (attr == "css") node.style.cssText = value

else if (typeof value !== "string") node[attr] = value

else node.setAttribute(attr, value)

}

firstChild = 2

}

for (let i = firstChild; i < arguments.length; ++i) {

let child = arguments[i]

if (typeof child == "string") child = document.createTextNode(child)

node.appendChild(child)

}

return node

}

const contextFacet = Facet.define({

combine(vs) { return vs[0] }

})

const extraKeys = keymap.of([

{key: "ArrowDown", run(cm) {

let {main} = cm.state.selection

if (!main.empty || main.head < cm.state.doc.length) return false

document.activeElement.blur()

return true

}},

{key: "ArrowUp", run(cm) {

let {main} = cm.state.selection

if (!main.empty || main.head > 0) return false

document.activeElement.blur()

return true

}},

{key: "Escape", run(cm) {

cm.contentDOM.blur()

return true

}},

{key: "Mod-Enter", run(cm) {

runCode(cm)

return true

}},

{key: "Mod-j", run(cm) {

revertCode(cm)

return true

}},

{key: "Mod-ArrowDown", run(cm) {

closeCode(cm)

return true

}},

{key: "Mod-Escape", run(cm) {

resetSandbox(cm.state.facet(contextFacet).sandbox)

return true

}}

])

function maybeActivateCode(element) {

if (element.nodeName == "PRE") {

let lang = element.getAttribute("data-language")

if (/^(javascript|html)$/.test(lang))

return activateCode(element, lang)

}

}

let nextID = 0

let article = document.getElementsByTagName("article")[0]

function activateCode(node, lang) {

let scrollPos = pageYOffset, rect = node.getBoundingClientRect()

if (rect.top < 0 && rect.height > 500) scrollPos -= Math.min(-rect.top, rect.height - 500)

let codeId = node.querySelector("a").id

let code = (window.localStorage && localStorage.getItem(codeId)) || node.textContent

let wrap = node.parentNode.insertBefore(elt("div", {"class": "editor-wrap"}), node)

let pollingScroll = null

function pollScroll() {

if (document.activeElement != editor.contentDOM) return

let rect = editor.dom.getBoundingClientRect()

if (rect.bottom < 0 || rect.top > innerHeight) editor.contentDOM.blur()

else pollingScroll = setTimeout(pollScroll, 500)

}

let sandbox = node.getAttribute("data-sandbox")

let context = {

wrap: wrap,

orig: node,

isHTML: lang == "html",

sandbox,

meta: node.getAttribute("data-meta")

}

let editorState = createState(code, lang, [

extraKeys,

EditorView.domEventHandlers({

focus: (e, view) => {

clearTimeout(pollingScroll)

pollingScroll = setTimeout(pollScroll, 500)

showEditorControls(view)

},

blur: (e, view) => {

setTimeout(() => {

if (!view.hasFocus) hideEditorControls(view)

}, 100)

}

}),

EditorView.updateListener.of(debounce(update => {

if (update.docChanged && window.localStorage)

localStorage.setItem(codeId, editor.state.doc.toString())

}, 250)),

contextFacet.of(context)

])

let editor = new EditorView({state: editorState, parent: wrap})

let out = wrap.appendChild(elt("div", {"class": "sandbox-output", "aria-live": "polite"}))

context.output = new Sandbox.Output(out)

if (lang == "html" && !sandbox) {

sandbox = context.sandbox = "html" + nextID++

node.setAttribute("data-sandbox", sandbox)

sandboxSnippets[sandbox] = node

}

node.style.display = "none"

// Cancel weird scroll stabilization magic from brower (which

// doesn't work at all for this)

window.scrollTo(pageXOffset, scrollPos)

setTimeout(() => window.scrollTo(pageXOffset, scrollPos), 20)

return editor

}

function openMenu(editor, node) {

let menu = elt("div", {"class": "sandbox-open-menu"})

let context = editor.state.facet(contextFacet)

function click(e) {

let target = e.target

if (e.target.parentNode == menu) {

for (let i = 0; i < menu.childNodes.length; ++i)

if (target == menu.childNodes[i])

items[i][1]()

}

menu.parentNode.removeChild(menu)

window.removeEventListener("click", click)

}

setTimeout(() => window.addEventListener("click", click), 20)

node.offsetParent.appendChild(menu)

}

function runCode(editor) {

let context = editor.state.facet(contextFacet)

context.output.clear()

let val = editor.state.doc.toString()

getSandbox(context.sandbox, context.isHTML).then(box => {

if (context.isHTML)

box.setHTML(val, context.output).then(() => {

if (context.orig.getAttribute("data-focus")) {

box.win.focus()

box.win.document.body.focus()

}

})

else

box.run(val, context.output).then(value => {

if (value != null && context.meta && /\bexpr\b/.test(context.meta) && context.output.empty)

box.out("log", [value])

})

})

}

function closeCode(editor) {

let context = editor.state.facet(contextFacet)

if (context.isHTML && context.sandbox) return

context.wrap.remove()

context.orig.style.display = ""

}

function revertCode(editor) {

let context = editor.state.facet(contextFacet)

editor.dispatch({

selection: {anchor: 0},

changes: {from: 0, to: editor.state.doc.length, insert: context.orig.textContent}

})

}

function showEditorControls(editor) {

if (editor.dom.parentNode.querySelector(".editor-controls")) return

editor.dom.parentNode.appendChild(elt("div", {

class: "editor-controls"

}, elt("button", {

onmousedown: e => {

runCode(editor)

e.preventDefault()

},

title: `Run code (${modName}Enter)`,

"aria-label": "Run code"

}, "▸"), elt("button", {

onmousedown: e => {

revertCode(editor)

e.preventDefault()

},

title: `Revert code (${modName}j)`,

"aria-label": "Revert code"

}, "▫"), elt("button", {

onmousedown: e => {

resetSandbox(editor.state.facet(contextFacet).sandbox)

e.preventDefault()

},

title: `Reset sandbox (${modName}Escape)`,

"aria-label": "Reset sandbox"

}, "ø")))

}

function hideEditorControls(editor) {

let controls = editor.dom.parentNode.querySelector(".editor-controls")

if (controls) controls.remove()

}

let sandboxSnippets = {}

{

let snippets = document.getElementsByClassName("snippet")

for (let i = 0; i < snippets.length; i++) {

let snippet = snippets[i]

if (snippet.getAttribute("data-language") == "html" &&

snippet.getAttribute("data-sandbox"))

sandboxSnippets[snippet.getAttribute("data-sandbox")] = snippet

}

}

let sandboxes = {}

async function getSandbox(name, forHTML) {

name = name || "null"

if (sandboxes.hasOwnProperty(name)) return sandboxes[name]

let options = {loadFiles: window.page.load_files}, html

if (sandboxSnippets.hasOwnProperty(name)) {

let snippet = sandboxSnippets[name]

options.place = node => placeFrame(node, snippet)

if (!forHTML) html = snippet.textContent

}

let box = await Sandbox.create(options)

if (html != null)

box.win.document.documentElement.innerHTML = html

sandboxes[name] = box

return box

}

function resetSandbox(name) {

if (!sandboxes.hasOwnProperty(name)) return

let frame = sandboxes[name].frame

frame.parentNode.removeChild(frame)

delete sandboxes[name]

}

function placeFrame(frame, snippet) {

let wrap = snippet.previousSibling, bot

if (!wrap || wrap.className != "editor-wrap") {

bot = snippet.getBoundingClientRect().bottom

activateCode(snippet, "html")

wrap = snippet.previousSibling

} else {

bot = wrap.getBoundingClientRect().bottom

}

wrap.insertBefore(frame, wrap.childNodes[1])

if (bot < 50) {

let newBot = wrap.getBoundingClientRect().bottom

window.scrollBy(0, newBot - bot)

}

}

}

function debounce(fn, delay = 50) {

let timeout

return arg => {

if (timeout) clearTimeout(timeout)

timeout = setTimeout(() => fn(arg), delay)

}

}

if (window.page && /^chapter|hints$/.test(window.page.type)) {

chapterInteraction()

// 3rd-edition-style anchor

let {hash} = document.location

if (/^#[phic]_./.test(hash)) {

let exists = document.getElementById(hash.replace(/_/, "-"))

if (exists) {

document.location.hash = hash.replace(/_/, "-")

} else {

let chapter = /\/[^\/]+\.html/.exec(document.location)

if (chapter) document.location = `https://eloquentjavascript.net/3rd_edition${chapter[0]}${hash}`

}

}

}