import { app } from "/scripts/app.js";

function getNamedWidget(node, name) {
	return node.widgets.find(function(w){return w.name == name})
}

function addCanvasWidget(node) {
	const canvas = document.createElement("canvas");
	canvas.width = 1000
	canvas.height = 400

	canvas.style.pointerEvents = "none"; 
	canvas.style.border = "1px solid " + LiteGraph.WIDGET_OUTLINE_COLOR
	canvas.style.backgroundColor = LiteGraph.WIDGET_BGCOLOR
	canvas.stcolor = app.canvas.default_connection_color_byType.IMAGE

	let opts = {
		getMinHeight() { return 100 },
		selectOn: [],
	}
	const widget = node.addDOMWidget("canvas", "CTYCanvas", canvas, opts);
	widget.canvas = canvas;
	return widget;
}

function drawCanvasInitial(ctx, width, height, pv_x, pv_y) {
	// clear
	ctx.clearRect(0, 0, width, height)

	// draw cross
	ctx.beginPath()
	ctx.lineWidth = 5
	ctx.strokeStyle = "#444"

	ctx.moveTo(0, pv_y)
	ctx.lineTo(width, pv_y)
	ctx.moveTo(pv_x, 0)
	ctx.lineTo(pv_x, height)
	ctx.stroke()
}

function drawCanvasCMMovePivot(node) {
	let move = getNamedWidget(node, "move").value
	let pivot = getNamedWidget(node, "pivot").value
	let canvas = getNamedWidget(node, "canvas").canvas

	let ctx = canvas.getContext("2d")

	// Calc pivot coords
	let width = canvas.width
	let height = canvas.height
	let pv_x = width * pivot
	let pv_y = height * (1.0 - pivot) - (height * move)

	// clear
	drawCanvasInitial(ctx, width, height, pv_x, pv_y)

	// draw lines
	ctx.beginPath()
	ctx.lineWidth = 15
	ctx.strokeStyle = canvas.stcolor

	ctx.moveTo(0, height)  // start
	ctx.lineTo(pv_x, pv_y) // start -> pivot
	ctx.lineTo(width, 0)   // pivot -> end
	ctx.stroke()
}

function drawCanvasCMEdges(node) {
	let low = getNamedWidget(node, "low").value
	let high = getNamedWidget(node, "high").value
	let pivot = getNamedWidget(node, "pivot").value
	let canvas = getNamedWidget(node, "canvas").canvas

	let ctx = canvas.getContext("2d")
	ctx.lineWidth = 15
	ctx.strokeStyle = canvas.stcolor

	// Calc pivot coords
	let width = canvas.width
	let height = canvas.height
	let pv_x = width * pivot
	let pv_y = height * (1.0 - pivot)

	// clear
	drawCanvasInitial(ctx, width, height, pv_x, pv_y)

	// draw lines
	ctx.beginPath()
	ctx.lineWidth = 15
	ctx.strokeStyle = canvas.stcolor

	ctx.moveTo(0, height * low)            // start
	ctx.lineTo(pv_x, pv_y)                 // start -> pivot
	ctx.lineTo(width, height * (1.0-high)) // pivot -> end
	ctx.stroke()
}

app.registerExtension({
	name: "City96.ColorMod",
	nodeCreated(node, app) {
		if (node.__proto__.comfyClass == "ColorModPivot") {
			var widget = addCanvasWidget(node)
			var refresh = function(v=null) { drawCanvasCMMovePivot(node) }
			getNamedWidget(node, "move").callback = refresh
			getNamedWidget(node, "pivot").callback = refresh
			setTimeout(refresh, 100);
		}
		if (node.__proto__.comfyClass == "ColorModEdges") {
			var widget = addCanvasWidget(node)
			var refresh = function(v) { drawCanvasCMEdges(node) }
			getNamedWidget(node, "low").callback = refresh
			getNamedWidget(node, "high").callback = refresh
			getNamedWidget(node, "pivot").callback = refresh
			setTimeout(refresh, 100);
		}
	}
})