import { AppModels } from "../../../shared/Models.slint";
import { AppActions, NewTaskData, SaveTaskData } from "../../../shared/Actions.slint";
import { Button, VerticalBox, CheckBox, ScrollView, ComboBox } from "std-widgets.slint";
import { TaskLine } from "../../../components/TaskLine.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";

export component MainView 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;

	VerticalLayout {
		padding: 16px;
		spacing: 16px;
		HorizontalLayout {
			alignment: start;
			spacing: 8px;
			VButton {
				text: "Show/Hide completed tasks";
				clicked => {
					AppActions.toggle-show-completed-tasks();
					completed-tasks-visible = !completed-tasks-visible;
				}
				icon-svg: completed-tasks-visible ? icon-visible : icon-not-visible;
				icon-colorize: Palette.control-foreground;
			}
		}
		Rectangle {
			horizontal-stretch: 1;
			background: Palette.background.brighter(0.2);
			height: 1px;
		}

		CreateTaskOrEvent {
			sources: AppModels.available-sources-strings;
			create-task(data) => {
				AppActions.create-task({
					sourceId: data.sourceId,
					eventId: -1,
					title: data.title,
					scheduled: data.date.year != 0,
					date: data.date
				})
			}
		}
		
		Flickable {
			max-width: 9999px; // The window keeps resizing down if we don't set the max width
			horizontal-stretch: 1;
			VerticalLayout {
				alignment: start;
				if AppModels.tasks-view.dates.length == 0 : VText {
					text: "There is no task to show";
					horizontal-alignment: center;
					vertical-alignment: center;
				}
				for day[dayIndex] in AppModels.tasks-view.dates: VerticalLayout {
					spacing: day.sources.length > 0 ? 16px : 0px;
					padding-bottom: 32px;

					HorizontalLayout {
						alignment: start;
						VText {
							text: day.no-date ? "Unscheduled" : Utils.format-date(day.due-date);
							color: day.is-late ? Palette.orange : Palette.foreground;
							font-weight: 800;
							font-size: 1.2rem;
						}
						//VerticalLayout {
							//alignment: center;
							//VText {
								//text: day.relativeDaysDiff == 0 ? "  -  today" :
									//day.relativeDaysDiff == 1 ? "  -  tomorrow" :
									//day.relativeDaysDiff == -1 ? "  -  yesterday" :
									//day.relativeDaysDiff > 0 ? "  -  in \{day.relativeDaysDiff} days" :
									//"  -  \{-day.relativeDaysDiff} days ago";
								//color: Palette.foreground-hint;
								//font-size: 1rem;
							//}
						//}
					}

					for source[source-index] in day.sources: Rectangle {
						Rectangle {
							x: 0;
							y: 0;
							width: 1px;
							height: 100%;
							background: source.color;
							border-radius: 4px;
						}
						Rectangle {
							width: 100%;
							height: 100%;
							background: source.color;
							opacity: 0.05;
						}
						VerticalLayout {
							padding: 16px;
							VText {
								text: source.name;
								color: source.color;
								font-weight: 800;
							}
							if source.tasks.length > 0 : Rectangle {
								VerticalLayout {
									for task[taskIndex] in source.tasks: VerticalLayout {
										padding-top: taskIndex == 0 ? 16px : 0px;
										padding-bottom: 8px;
										TaskLine {
											title: task.title;
											checked: task.checked;
											allow-edit-date: true;
											delete => { 
												AppActions.delete-task-clicked(task.source-id, task.id)
											}
											toggle-check => {
												AppActions.task-clicked(task.source-id, task.id);
											}
											edited(data) => {
												AppActions.save-task({
													id: task.id,
													sourceId: task.source-id,
													title: data.title,
													scheduled: data.scheduled,
													date: data.date
												})
											}
										}
									}
								}
							}
						}
					}
				}
			}
		}
	}
}