import { AppWindowModels, TaskData } from "../Models.slint";
import { AppWindowActions } from "../Actions.slint";
import { VButton, ToggleButton, VActionButton, VText, Svg, Palette } from "@selenite";
import { EditSourceModal } from "../../../components/editSourceModal.slint";

export component SideBar inherits Rectangle {

	function open-edit-source-window(source-id: int) {
		editSourcePopup.edit(source-id)
	}

	editSourcePopup := EditSourceModal {
		//x: parent.width / 2 - 200px;
		//y: parent.height / 2 - 300px;
	}

	VerticalLayout {
		height: parent.height;
		padding: 16px;
		spacing: 16px;
		HorizontalLayout {
			alignment: stretch;
			VText {
				text: "Sources";
				font-size: 1.5rem;
				horizontal-stretch: 0;
			}

			Rectangle {
				horizontal-stretch: 1;
			}	

			VActionButton {
				horizontal-stretch: 0;
				icon-svg: Svg.plus;
				icon-colorize: Palette.green;
				background: transparent;
				clicked => { AppWindowActions.open-add-source-window() }
			}
		}
		VerticalLayout {
			alignment: space-between;
			vertical-stretch: 1;
			VerticalLayout {
				vertical-stretch: 1;
				spacing: 4px;
				ToggleButton {
					text: "All";
					text-alignment: left;
					active: AppWindowModels.no-source-selected;
					clicked => { AppWindowActions.source-clicked(-1) }

					
				}
				for item[index] in AppWindowModels.sources-selected: ToggleButton {
					text: item.name;
					text-alignment: left;
					active: item.selected;
					clicked => { AppWindowActions.source-clicked(item.id) }
					VActionButton {
						visible: parent.active;
						icon-svg: Svg.cog;
						background: transparent;
						clicked => { editSourcePopup.edit(item.id) }
					}
				}
			}
			VerticalLayout {
				spacing: 4px;
				/*VButton {
					icon-svg: Svg.cog;
					text: "Settings";
					background: transparent;
					clicked => { AppWindowModels.open-settings-window() }
				}*/
			}
		}
	}
}