import { AppWindowModels } from "../windows/AppWindow/Models.slint";
import { Date, Time, Button, VerticalBox, CheckBox, ScrollView, ComboBox } from "std-widgets.slint";
import { VPopupIconMenu, VDatePicker, VTimePicker, VCheckBox, VButton, VActionButton, VTag, VText, Svg, VTextInput, Palette } from "@selenite";

export struct CreateTaskData {
	sourceId: int,
	title: string,
	date: Date
}

export component CreateTaskOrEvent inherits Rectangle {

	in property <[string]> sources;

	callback create-task(CreateTaskData);

	function accepted() {
		root.create-task({
			sourceId: AppWindowModels.get-source-id-from-name(sourceInput.current-value),
			title: newTaskTitleInput.text,
			date: taskDateInput.date
		});
		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: "Enter new task";
			 	started-writting() => {
					sourceInput.current-index = AppWindowModels.default-source-index;
			 	}
				accepted => { accepted() }
			}
			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;
					VText { text: "for"; vertical-alignment: bottom;}
					VerticalLayout {
						alignment: end;
						sourceInput := ComboBox {
							model: root.sources; 
							
						}
					}
					VText { text: "on"; vertical-alignment: bottom;}
					taskDateInput := VDatePicker {
						enabled: true;
					}
					VButton {
						text: "Create";
						icon-svg: Svg.correct;
						icon-colorize: greenyellow;
						clicked => { accepted() }
					}
				}
			}
		}
	}
}