import { Event } from "../windows/AppWindow/Models.slint";
import { ScrollView } from "std-widgets.slint";
import { VCheckBox, VTextInput, VButton, VActionButton, Svg, VTag, VPopupIconMenu, VText, Palette } from "@selenite";
import { TaskLine } from "./TaskLine.slint";
import { Utils } from "../shared/Utils.slint";

export struct EventGroupAddTask {
	title: string
}

export component EventGroup {
	in property<Event> event;
	private property <bool> show-add-task: false;
	private property <bool> edit-name: false;

	callback add-task(EventGroupAddTask);
	callback edit-task(int, EventGroupAddTask);
	callback delete-task(int);
	callback delete();
	callback edit(EventGroupAddTask);
	callback toggle-check-task(int);

	eventPopup := VPopupIconMenu {
		VActionButton {
			icon-svg: Svg.plus;
			icon-colorize: Colors.greenyellow;
			icon-size: 1.5rem;
			border-radius: 0;
			clicked => { 
				root.show-add-task = true;
			}
		}
		VActionButton {
			icon-svg: Svg.pen;
			icon-colorize: Colors.grey;
			icon-size: 1.5rem;
			border-radius: 0;
			clicked => { edit-name = true; }
		}

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

	ta := TouchArea {
		pointer-event(e) => { 
			if (e.button == PointerEventButton.right && e.kind == PointerEventKind.up) {
				eventPopup.show(ta.mouse-x, ta.mouse-y); 
			}
		}
	}

	HorizontalLayout {
		VerticalLayout {
			spacing: 4px;
			VText {
				text: Utils.time-to-string(event.startsAt);
				horizontal-alignment: center;
				color: Palette.accent;
			}
			HorizontalLayout {
				alignment: center;
				Rectangle {
					width: 2px;
					background: Palette.accent;
				}
			}
			VText {
				text: Utils.time-to-string(event.endsAt);
				color: Palette.accent;
				font-size: 0.9rem;
				horizontal-alignment: center;
			}
		}
		VerticalLayout {
			horizontal-stretch: 1;
			padding: 16px;
			padding-top: 32px;
			padding-bottom: 32px;
			padding-right: 0px;
			if !edit-name : VText {
				text: event.title;
				font-size: 1.1rem;
			}
			if edit-name : title := VTextInput {
				text: event.title;
				accepted => { 
					root.edit({
						title: title.text
					});
					root.edit-name = false;
				}
			}
			for task[taskIndex] in event.tasks: VerticalLayout {
				padding-top: taskIndex == 0 ? 16px : 0px;
				padding-bottom: 8px;
				TaskLine {
					title: task.title;
					checked: task.checked;
					delete => { 
						root.delete-task(task.id)
					}
					toggle-check => {
						root.toggle-check-task(task.id)
					}
					edited(data) => {
						root.edit-task(task.id, {
							title: data.title
						});
					}
				}
			}
			if show-add-task : taskInput := VTextInput {
				accepted => { 
					root.add-task({
						title: taskInput.text
					});
					root.show-add-task = false;
				}
			}
		}
	}
}