<template>
	<codemirror
		:v-model="code"
		:style="{ width: '100%', height: '200px' }"
		:placeholder="placeholder"
		:autofocus="true"
		:spellcheck="true"
		:smartIndent="true"
		:indentWithTab="true"
		:styleActiveLine="true"
		:autoCloseBrackets="true"
		:highlightDifferences="true"
		:showCursorWhenSelecting="true"
		:autorefresh="true"
		:foldGutter="true"
		:tab-size="2"
		:extensions="extensions"
		@ready="handleReady"
		@abort="$emit('abort', code)"
		@onload="$emit('load', code)"
		@onclick="$emit('click', code)"
		@ondblclick="$emit('dblclick', code)"
		@onfocus="$emit('focus', code)"
		@blur="(value) => $emit('blur', value)"
		@change="(value) => $emit('change', value)"
		@onkeyup="$emit('keyup', code)"
		@onkeydown="$emit('keydown', code)"
		@onkeypress="$emit('keypress', code)"
		@onmousedown="$emit('mousedown', code)"
		@onmousemove="$emit('mousemove', code)"
		@onmouseover="$emit('mouseover', code)"
		@onmouseout="$emit('mouseout', code)"
		@onmouseup="$emit('mouseup', code)"
	/>
</template>

<script lang="ts" setup>
import { reactive, onMounted, onUnmounted, ref, shallowRef } from 'vue';
import { Codemirror } from 'vue-codemirror';
import { javascript, esLint } from "@codemirror/lang-javascript";
import { lintGutter, linter, openLintPanel } from "@codemirror/lint";
import Linter from "eslint4b-prebuilt";
import { oneDark } from '@codemirror/theme-one-dark';
const emit = defineEmits([
	'abort',
	'load',
	'click',
	'dblclick',
	'focus',
	'blur',
	'keyup',
	'keydown',
	'keypress',
	'mousedown',
	'mousemove',
	'mouseover',
	'mouseout',
	'mouseup',
	'change',
]);

const extensions = [javascript(), oneDark,
		linter(esLint(new Linter())),
     	lintGutter(),
];
// Codemirror EditorView instance ref
const view = shallowRef();
const handleReady = (payload) => {
	view.value = payload.view;
};

const ruleFormRef = ref<HTMLElement | null>(null);

const props = defineProps({
	placeholder: {
		type: String,
		default: '',
	},
	code: {
		type: String,
		default: 'function main() { console.log("Hello World!"); }'
	},
});

const state = reactive({});
</script>

<style scope>
.code-box {
	width: 100%;
	height: 500px;
}
</style>
