import { Compartment, EditorState } from 'https://esm.sh/@codemirror/state@6.5.2';

import { EditorView, lineNumbers } from 'https://esm.sh/@codemirror/view@6.41.1?deps=@codemirror/state@6.5.2';

import { defaultHighlightStyle, syntaxHighlighting } from 'https://esm.sh/@codemirror/language@6.12.3?deps=@codemirror/state@6.5.2,@codemirror/view@6.41.1';

import { python } from 'https://esm.sh/@codemirror/lang-python@6.2.1?deps=@codemirror/state@6.5.2,@codemirror/view@6.41.1,@codemirror/language@6.12.3';

import { oneDarkHighlightStyle } from 'https://esm.sh/@codemirror/theme-one-dark@6.1.3?deps=@codemirror/state@6.5.2,@codemirror/view@6.41.1,@codemirror/language@6.12.3';

const themePreference = window.matchMedia('(prefers-color-scheme: dark)');

const highlightStyle = () => themePreference.matches ? oneDarkHighlightStyle : defaultHighlightStyle;

const highlightCompartment = new Compartment();

const textarea = document.getElementById('code-editor');

const form = document.querySelector('form.runner-editor');

if (textarea && form) {

textarea.classList.add('textarea-fallback');

const view = new EditorView({

state: EditorState.create({

doc: textarea.value,

extensions: [

python(),

highlightCompartment.of(syntaxHighlighting(highlightStyle())),

lineNumbers(),

EditorView.lineWrapping,

EditorView.contentAttributes.of({

'aria-label': textarea.getAttribute('aria-label') || 'Editable Python example code',

}),

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

if (update.docChanged) textarea.value = update.state.doc.toString();

}),

],

}),

});

textarea.insertAdjacentElement('afterend', view.dom);

textarea.hidden = true;

themePreference.addEventListener?.('change', () => {

view.dispatch({ effects: highlightCompartment.reconfigure(syntaxHighlighting(highlightStyle())) });

});

function resize() {

view.dom.style.minHeight = '';

const minimum = Number.parseFloat(getComputedStyle(view.dom).minHeight) || 0;

view.dom.style.minHeight = `${Math.max(minimum, view.contentDOM.scrollHeight)}px`;

}

function scheduleResize() {

requestAnimationFrame(resize);

}

function setValue(value) {

view.dispatch({ changes: { from: 0, to: view.state.doc.length, insert: value } });

textarea.value = value;

scheduleResize();

}

resize();

function syncTextarea() {

textarea.value = view.state.doc.toString();

}

form.addEventListener('submit', syncTextarea);

window.pythonByExampleEditor = { setValue, syncTextarea, resize: scheduleResize, focus: () => view.focus() };

}