import { Backend, TaskData, Event } from "../Backend.slint";
import { ScrollView } from "std-widgets.slint";
import { VCheckBox, VButton, VActionButton, Svg, VTag, VPopupIconMenu, VText, Palette } from "@selenite";
import { TaskLine } from "./TaskLine.slint";
import { Utils } from "../Utils.slint";

export component EventGroup {
	in property<Event> event;

	eventPopup := VPopupIconMenu {
		VActionButton {
			icon-svg: Svg.plus;
			icon-colorize: Colors.greenyellow;
			icon-size: 1.5rem;
			border-radius: 0;
			clicked => { Backend.open-new-task-form({
				eventSourceId: event.sourceId,
				eventId: event.id,
			})}
		}
		VActionButton {
			icon-svg: Svg.pen;
			icon-colorize: Colors.grey;
			icon-size: 1.5rem;
			border-radius: 0;
			clicked => { Backend.open-edit-event-form(event.sourceId, event.id) }
		}

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

	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);
				color: Palette.accent;
			}
			HorizontalLayout {
				alignment: center;
				Rectangle {
					width: 4px;
					background: Palette.accent;
					border-radius: 8px;

				}
			}
			VText {
				text: Utils.time-to-string(event.endsAt);
				color: Palette.accent;
				font-size: 0.8rem;
				horizontal-alignment: center;
			}
		}
		VerticalLayout {
			horizontal-stretch: 1;
			padding: 16px;
			padding-top: 32px;
			padding-bottom: 32px;
			padding-right: 0px;
			VText {
				text: event.title;
				font-size: 1.1rem;
			}
			for task[taskIndex] in event.tasks: VerticalLayout {
				padding-top: taskIndex == 0 ? 16px : 0px;
				padding-bottom: 8px;
				TaskLine {
					task: task;
					source-index: task.sourceId;
					task-index: task.id;
				}
			}
		}
	}

}