import { Backend, TaskData } from "Backend.slint";
import { ToggleButton } from "@vynui";
import { VPopupIconMenu, VTag, VButton, VCheckBox, Palette } from "@vynui";

export component TaskLine {
	in property<TaskData> task;
	in property<int> source-index: -1;
	in property<int> task-index: -1;

	private property<length> popup-x: 200px;
	private property<length> popup-y: 200px;

	init => {
		if (task-index == -1) {
			debug("Error: missing task-index")
		}
	}


	popup := VPopupIconMenu {
		VButton {
			icon-source: @image-url("./images/edit.png");
			icon-colorize: Colors.grey;
			icon-size: 1.5rem;
			border-radius: 0;
			clicked => { Backend.open_edit_task_form(source-index, task-index) }
		}

		VButton {
			icon-source: @image-url("./images/delete.png");
			icon-colorize: Colors.pink;
			icon-size: 1.5rem;
			border-radius: 0;
			clicked => { Backend.delete_task_clicked(source-index, task-index) }
		}
	}

	ta := TouchArea {
		clicked => {
			checkbox.checked = !checkbox.checked;
			Backend.task_clicked(source-index, task-index);
		}
		pointer-event(e) => {
			if (e.button == PointerEventButton.right && e.kind == PointerEventKind.up) {
				popup.show(ta.mouse-x, ta.mouse-y);
			}
		}
		z: 10;
	}

	

	HorizontalLayout {
		alignment: space-between;
		HorizontalLayout {
			alignment: start;
			spacing: 8px;
			checkbox := VCheckBox {
				text: task.title;
				checked: task.checked;
				toggled => {
					Backend.task_clicked(source-index, task-index)
				}
			}
			for tag[tag-index] in task.tags: VTag {
				text: tag;
				size: 0.8rem;
			}
		}
		HorizontalLayout {
			alignment: end;
			spacing: 8px;
			// Not needed anymore, to remove later
			/*VButton {
				icon-source: @image-url("./images/edit.png");
				icon-colorize: Colors.grey;
				clicked => { Backend.open_edit_task_form(source-index, task-index) }
			}

			VButton {
				icon-source: @image-url("./images/delete.png");
				icon-colorize: Colors.pink;
				clicked => { Backend.delete_task_clicked(source-index, task-index) }
			}*/
		}
	}
}