import { Backend, TaskData } from "../Backend.slint";
import { Button, VerticalBox, CheckBox, ScrollView, ComboBox } from "std-widgets.slint";
import { VPopupIconMenu, VDatePicker, VTimePicker, VCheckBox, VButton, VActionButton, VTag, VText, Svg, VTextInput, Palette } from "@selenite";
import { NewTaskData, SaveTaskData } from "../Backend.slint";

export component CreateTaskOrEvent inherits Rectangle {

	private property <int> task-or-event: 1;
	function create-task() {
		if (task-or-event == 1) {
			Backend.create-task({
				sourceId: sourceInput.current-index,
				eventId: -1,
				title: newTaskTitleInput.text,
				scheduled: taskDateInput.date.year != 0,
				date: taskDateInput.date
			})
		} else {
			Backend.create-event({
				sourceId: sourceInput.current-index,
				title: newTaskTitleInput.text,
				date: taskDateInput.date,
				startsAt: eventStartTimeInput.time,
				endsAt: eventEndTimeInput.time,
			});
		}
		newTaskTitleInput.edit-text("");
	}

	Rectangle {
		border-color: newTaskTitleInput.text != "" ? Palette.card-background : transparent;
		border-width: newTaskTitleInput.text != "" ? 4px : 0px;
		border-radius: newTaskTitleInput.text != "" ? 8px : 0px;
		animate border-color, border-width {
			duration: 250ms;
		}
		VerticalLayout {
			spacing: 8px;
			padding: newTaskTitleInput.text != "" ? 16px : 0px;
			animate padding {
				duration: 250ms;
			}
			newTaskTitleInput := VTextInput {
				placeholder: "Add new Task / Event";
			 	started-writting() => {
					sourceInput.current-index = Backend.default-source-index;
			 	}
				accepted => { create-task() }
			}
			Rectangle {
				min-height: 0px;
				max-height: newTaskTitleInput.text != "" ? 512px : 0px;
				opacity: newTaskTitleInput.text != "" ? 1 : 0;
				clip: true;
				animate max-height, opacity {
					 duration: 250ms;
				}
				
				HorizontalLayout {
					alignment: start;
					spacing: 8px;
					VerticalLayout {
						alignment: end;
						VButton {
							text: task-or-event == 1 ? "Task" : "Event";
							clicked => { task-or-event = task-or-event == 1 ? 0 : 1 }
						}
					}
					VText { text: "for"; vertical-alignment: bottom;}
					VerticalLayout {
						alignment: end;
						sourceInput := ComboBox {
							model: Backend.sources; 
							
						}
					}
					VText { text: "on"; vertical-alignment: bottom;}
					taskDateInput := VDatePicker {
						enabled: true;
					}
					Rectangle {
						min-width: 0;
						max-width: task-or-event == 0 ? 9999px : 0px;
						opacity: task-or-event == 0 ? 1 : 0;
						clip: true;
						animate max-width, opacity {
						     duration: 250ms;
						}
						HorizontalLayout {
							spacing: 4px;
							VText { text: "between"; vertical-alignment: bottom; }
							eventStartTimeInput := VTimePicker {  }
							VText { text: "and"; vertical-alignment: bottom; }
							eventEndTimeInput := VTimePicker {  }
						}
					}
					VButton {
						text: "Create";
						icon-svg: Svg.correct;
						icon-colorize: greenyellow;
						clicked => { create-task() }
					}
				}
			}
		}
	}
}