import { AppWindowModels, TaskData } from "../Models.slint";
import { AppWindowActions, NewTaskData, SaveTaskData } from "../Actions.slint";
import { Button, VerticalBox, CheckBox, ScrollView, ComboBox } from "std-widgets.slint";
import { TaskLine } from "../../../components/TaskLine.slint";
import { EventGroup } from "../../../components/EventGroup.slint";
import { Calendar } from "../../../components/Calendar.slint";
import { VPopupIconMenu, VDatePicker, VTimePicker, VCheckBox, VButton, VTag, VText, VTextInput, Svg, Palette } from "@selenite";
import { CreateTaskOrEvent } from "../../../components/CreateTaskOrEvent.slint";
import { Utils } from "../../../shared/Utils.slint";
import { VActionButton } from "../../../../external/selenite/components/index.slint";

export component CalendarView inherits Rectangle {

	private property<string> icon-visible: Svg.visible;
	private property<string> icon-not-visible: Svg.not-visible;
	private property<bool> completed-tasks-visible: false;

	createEventPopup := PopupWindow {
		x: parent.width / 2 - 200px;
		y: parent.height / 2 - 300px;
		close-policy: close-on-click-outside;
		background := Rectangle {
			height: 100%;
			width: 100%;
			background: Palette.background1;
			border-color: Palette.popup-border;
			border-width: 1px;
			border-radius: 4px;
		}
		VerticalLayout {
			padding: 16px;
			spacing: 8px;
			titleInput := VTextInput {
				label: "title";
			}
			VText { text: "on"; vertical-alignment: bottom;}
			dateInput := VDatePicker {
				enabled: true;
			}
			HorizontalLayout {
				spacing: 4px;
				VText { text: "between"; vertical-alignment: bottom; }
				startTimeInput := VTimePicker {  }
				VText { text: "and"; vertical-alignment: bottom; }
				endTimeInput := VTimePicker {  }
			}
			VButton {
				text: "Create";
				clicked => { 
					AppWindowActions.create-event({
						title: titleInput.text,
						date: dateInput.date, 
						startsAt: startTimeInput.time,
						endsAt: endTimeInput.time
					});
					createEventPopup.close();
				}
			}
		 }
	}

	VerticalLayout {
		padding: 16px;
		spacing: 16px;
		HorizontalLayout {
			alignment: start;
			VButton {
				text: "New event";
				icon-svg: Svg.plus;
				icon-colorize: greenyellow;
				clicked => { 
					createEventPopup.show();
				}
			}
		}	
		Rectangle {
			horizontal-stretch: 1;
			background: Palette.background.brighter(0.2);
			height: 1px;
		}
		Calendar {
			delete-event-request(source-id, event-id) => { debug("DEELTE", source-id);AppWindowActions.delete-event(source-id, event-id) }
			init => { debug("cal len", AppWindowModels.calendar.length) }
			days: AppWindowModels.calendar;
			current-date: Utils.current-date;
			current-time: Utils.current-time;
		}
	}
}