import { Palette } from "@selenite";
import { VTextInput } from "../../external/selenite/components/TextInput.slint";
import { VButton, VText, VDatePicker } from "../../external/selenite/components/index.slint";
import { AppActions } from "../shared/Actions.slint"; 
import { Modal } from "../../external/selenite/components/Modal.slint";
import { VTimePicker } from "../../external/selenite/components/TimePicker.slint";

export component AddEventModal inherits Modal {
	public function open() {
		root.show();
	}

	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 => { 
				AppActions.create-event({
					title: titleInput.text,
					date: dateInput.date, 
					startsAt: startTimeInput.time,
					endsAt: endTimeInput.time
				});
				root.close();
			}
		}
	 }
}