import { Backend, TaskData, Event } from "../Backend.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 "../Utils.slint";

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

	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 => { 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);
				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 => { 
					Backend.save-event({
						sourceId: event.sourceId,
						id: event.id,
						title: title.text,
						//date: event.date,
						startsAt: event.startsAt,
						endsAt: event.endsAt,
					});
					root.edit-name = false;
				}
			}
			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;
				}
			}
			if show-add-task : taskInput := VTextInput {
				accepted => { 
					Backend.create-task({
						sourceId: event.sourceId,
						eventId: event.id,
						title: taskInput.text,
					});
					root.show-add-task = false;
				}
			}
		}
	}

}