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";

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 => {
					AppWindowActions.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: AppWindowModels.sources;
			create-task(data) => {
				AppWindowActions.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 AppWindowModels.days.length == 0 && AppWindowModels.unscheduled-tasks.length == 0 : VText {
					text: "There is no task to show";
					horizontal-alignment: center;
					vertical-alignment: center;
				}
				for day[dayIndex] in AppWindowModels.days: VerticalLayout {
					spacing: day.tasks.length > 0 ? 16px : 0px;
					padding-bottom: 32px;
					
					if day.tasks.length > 0 : Rectangle {
						border-radius: 8px;
						VerticalLayout {
							HorizontalLayout {
								alignment: start;
								VText {
									text: Utils.format-date(day.date);
									color: day.isLate ? Palette.orange : Palette.foreground;
									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 task[taskIndex] in day.tasks: VerticalLayout {
								padding-top: taskIndex == 0 ? 16px : 0px;
								padding-bottom: 8px;
								TaskLine {
									title: task.title;
									source-name: AppWindowModels.get-source-name-from-id(task.sourceId);
									scheduled: task.date.year != 0;
									date: day.date;
									checked: task.checked;
									allow-edit-date: true;
									delete => { 
										AppWindowActions.delete-task-clicked(task.sourceId, task.id)
									}
									toggle-check => {
										AppWindowActions.task-clicked(task.sourceId, task.id);
									}
									edited(data) => {
										AppWindowActions.save-task({
											id: task.id,
											sourceId: task.sourceId,
											title: data.title,
											scheduled: data.scheduled,
											date: data.date
										})
									}
								}
							}
						}
					}
				}
				if AppWindowModels.unscheduled-tasks.length > 0 : VerticalLayout {
					Rectangle {
						//background: Palette.card-background;
						border-radius: 8px;
						VerticalLayout {
							HorizontalLayout {
								alignment: start;
								VText {
									text: "Unscheduled";
									color: Palette.foreground;
									font-size: 1.2rem;
								}
							}
							for task[taskIndex] in AppWindowModels.unscheduled-tasks: VerticalLayout {
								padding-top: taskIndex == 0 ? 16px : 0px;
								padding-bottom: 8px;
								TaskLine {
									title: task.title;
									source-name: AppWindowModels.get-source-name-from-id(task.sourceId);
									checked: task.checked;
									allow-edit-date: true;
									delete => { 
										AppWindowActions.delete-task-clicked(task.sourceId, task.id)
									}
									toggle-check => {
										AppWindowActions.task-clicked(task.sourceId, task.id);
									}
									edited(data) => {
										AppWindowActions.save-task({
											id: task.id,
											sourceId: task.sourceId,
											title: data.title,
											scheduled: data.scheduled,
											date: data.date
										})
									}
								}
							}
						}
					}
				}
			}
		}
	}
}