import "luxe: world" for Entity, UIClear 
import "luxe: ui/control" for Control
import "luxe: ui/list" for UIList
import "luxe: ui/button" for UIButton

var Color_spaces = [
	{
		"name": "RGB",
		"components": ["r", "g", "b"],
		"componentsFull": ["Red", "Green", "Blue"],
	},
	{
		"name": "HSV",
		"components": ["h", "s", "v"],
		"componentsFull": ["Hue", "Saturation", "Value"],
	},
	{
		"name": "HSL",
		"components": ["h", "s", "l"],
		"componentsFull": ["Hue", "Saturation", "Lightness"],
	},
	{
		"name": "Oklab",
		"components": ["L", "a", "b"],
		"componentsFull": ["Lightness", "red/green", "blue/yellow"],
	}
]

var Modes = [
	//I wanted to do unicode icons but it doesnt render with the current font
	{
		"name": "Triangle",
		"icon": "tri", //▲
	},
	{
		"name": "Square",
		"icon": "box", //■
	},
	{
		"name": "Circle",
		"icon": "round" //●
	}
]

class ColorPicker{
	static create(ui: Entity) : Control{
		//setup root
		var root = Control.create(ui)
		Control.set_size(root, 350, 400)

		//setup colorspace buttons
		//todo: this should be a dropdown???
		var colorspace_list = UIList.create(ui) //could use naked control but logically its a list?
		Control.child_add(root, colorspace_list)
		//base button size is 92x32 btw
		var space_button_height = 30
		var space_button_width = 50
		for(i in 0...Color_spaces.count){
			var space = Color_spaces[i]
			var colorspace_button = UIButton.create(ui)
			Control.set_size(colorspace_button, space_button_width, space_button_height)
			UIList.add(colorspace_list, colorspace_button)
			UIButton.set_text(colorspace_button, space["name"])
			Control.set_pos(colorspace_button, i * space_button_width, 0) //manually set position
			//todo: add event to actually do stuff here
		}
		Control.set_size(colorspace_list, Control.get_width(root).min(space_button_width * Color_spaces.count), space_button_height)
		//UIList.refresh(colorspace_list) //uilist can only do vertical ordering so far :(

		//setup uimode buttons
		//todo: this should be a dropdown???
		var mode_list = UIList.create(ui)
		Control.child_add(root, mode_list)
		Control.set_pos(mode_list, 0, space_button_height)
		//base button size is 92x32 btw
		var mode_button_height = 30
		var mode_button_width = 50
		for(i in 0...Modes.count){
			var mode = Modes[i]
			var mode_button = UIButton.create(ui)
			Control.set_size(mode_button, mode_button_width, mode_button_height)
			UIList.add(mode_list, mode_button)
			UIButton.set_text(mode_button, mode["icon"])
			Control.set_pos(mode_button, i * mode_button_width, 0) //manually set position
			//todo: add event to actually do stuff here
		}
		Control.set_size(mode_list, Control.get_width(root).min(mode_button_width * Modes.count), mode_button_height)

		//setup main editor
		var main_editor_root = Control.create(ui)
		Control.child_add(root, main_editor_root)
		Control.set_size(main_editor_root, 200, 200)
		Control.set_pos(main_editor_root, 0, mode_button_height + space_button_height)
		//todo: configurable default editor
		build_triangle_editor(ui, main_editor_root)

		//setup sliders
		var sliders_root = Control.create(ui)
		Control.child_add(root, sliders_root)
		Control.set_size(sliders_root, 300, 140)
		Control.set_pos(sliders_root, 0, mode_button_height + space_button_height + 200)

		//setup text input/output
		var text_io_root = Control.create(ui)
		Control.child_add(root, text_io_root)
		Control.set_size(text_io_root, 150, 100)
		Control.set_pos(text_io_root, 200, 160)

		//setup preview field (old => new)
		var preview_root = Control.create(ui)
		Control.child_add(root, preview_root)
		Control.set_size(preview_root, 150, 100)
		Control.set_pos(preview_root, 200, 60)


		//other stuff? gamma/linear? scene color pick? range toggle (0-1/0-255)? HDR??
		//todo

		return root
	}

	static build_triangle_editor(ui: Entity, root: Control){
		Control.clear(root, UIClear.destroy)
	}

	static build_square_editor(ui: Entity, root: Control){
		Control.clear(root, UIClear.destroy)
	}

	static build_circle_editor(ui: Entity, root: Control){
		Control.clear(root, UIClear.destroy)
	}
}