import { VTextInput } from "../../external/selenite/components/TextInput.slint";
import { VButton } from "../../external/selenite/components/index.slint";
import { AppWindowActions } from "../windows/AppWindow/Actions.slint";
import { Palette } from "@selenite";
import { AppWindowModels } from "../windows/AppWindow/Models.slint";

export component EditSourceModal inherits Rectangle {
	private property <int> source-id-to-edit: -1;
	private property <string> name: "";
	private property <string> path: "";

	init() => {
		if (self.absolute-position.x < 500px) {
			self.x += 500px - self.absolute-position.x;
		}
	}

	public function edit(source-id: int) {
		source-id-to-edit = source-id;
		self.name = AppWindowModels.get-source-name-from-id(source-id);
		self.path = AppWindowModels.get-source-path-from-id(source-id);
		popup.show();
	}

	popup := PopupWindow {
		close-policy: close-on-click-outside;
		background := Rectangle {
			height: 100%;
			width: 100%;
			background: Palette.background1;
			border-color: Palette.popup-border;
			border-width: 1px;
			border-radius: 4px;
		}

		VerticalLayout {
			padding: 16px;
			spacing: 8px;
			nameInput := VTextInput {
				label: "Name";
				text <=> root.name;
			}
			pathInput := VTextInput {
				label: "Path";
				text <=> root.path;
			}
			VButton {
				text: "Save";
				clicked => { 
					AppWindowActions.edit-source(source-id-to-edit, name, path);
					popup.close();
				}
			}
			VButton {
				text: "Delete";
				background-color: Palette.red;
				double-clicked => { 
					//root.delete-source(root.id)
				}
			}
		 }
	}
}