import { VLabeledComponent } from "LabeledComponent.slint";
import { Palette } from "Palette.slint";
import { VText } from "Text.slint";

export component VTextInput inherits VLabeledComponent {
	in-out property text <=> textInputComponent.text;
	out property has-focus <=> textInputComponent.has-focus;
	in-out property placeholder <=> textInputComponent.accessible-placeholder-text;
	in-out property wrap <=> textInputComponent.wrap;
	callback accepted();
	callback edited();
	callback started-writting();

	public function edit-text(text: string) {
		root.text = text;
		root.old-text = text;
	}

	private property <string> old-text: "";

	VerticalLayout {
		padding: 4px;
		padding-left: 8px;
		padding-right: 8px;
		textInputComponent := TextInput {
			color: Palette.foreground;
			accepted => { root.accepted() }
			edited => { 
				root.edited();
				if (textInputComponent.text != "" && old-text == "") {
					root.started-writting();
				}
				old-text = textInputComponent.text;
			}
			HorizontalLayout {
				alignment: start;
				VText {
					visible: textInputComponent.text == "";
					color: Palette.foreground-hint;
					text: root.placeholder;
				}
			}
			
		}
	}
	
}