import { ToggleButton } from "@selenite";
import { VPopupIconMenu, VTag, VText, VButton, VActionButton, VCheckBox, Svg, Palette } from "@selenite";
import { TaskEdit } from "./TaskEdit.slint";
import { Date } from "std-widgets.slint";

export struct TaskLineEditData {
	title: string,
	scheduled: bool,
	date: Date,
	checked: bool
}

export component TaskLine inherits VerticalLayout {
	in property<string> title;
	in property<string> source-name;
	in property<bool> hide-source-name;
	in property<bool> scheduled;
	in property<Date> date;
	in property<bool> checked;
	in property<bool> allow-edit-date;

	callback delete();
	callback edit();
	callback toggle-check();
	callback edited(TaskLineEditData);

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

	taskEdit := TaskEdit {
		allow-edit-date: root.allow-edit-date;
		accepted(task) => {
			root.edited({
				title: task.title,
				scheduled: task.date.year != 0,
				date: task.date
			});
			taskEdit.close();
		}
	}

	if !taskEdit.should-show : Rectangle {
		popup := VPopupIconMenu {
			VActionButton {
				icon-svg: Svg.pen;
				icon-colorize: Colors.grey;
				icon-size: 1.5rem;
				border-radius: 0;
				clicked => { 
					taskEdit.show({
						title: title,
						date: date
					});
				}
			}

			VActionButton {
				icon-svg: Svg.trash;
				icon-colorize: Colors.pink;
				icon-size: 1.5rem;
				border-radius: 0;
				clicked => {
					root.delete();
				}
			}
		}

		ta := TouchArea {
			clicked => {
				checkbox.checked = !checkbox.checked;
				root.toggle-check();
			}
			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: "\{root.title}";
					checked: root.checked;
					toggled => {
						root.toggle-check()
					}
				}
				if !hide-source-name : source-name := VTag {
					text-color: Palette.accent;
					text: "\{root.source-name}";
				}
			}
		}
	}
}
