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

export component VLabeledComponent {
	in property<string> label;
	in property<length> label-size: 1rem;
	in property <TextHorizontalAlignment> label-alignment: TextHorizontalAlignment.left;
	in property<bool> enabled: true;
	in property<bool> no-background: false;

	function calc-background() -> brush {
		if (no-background == true) {
			return Palette.control-background.transparentize(1);
		}
		if (enabled == false) {
			return Palette.control-background.darker(0.2);
		}
		return Palette.control-background;
	}

	VerticalLayout {
		if root.label != "" : VerticalLayout {
			padding-left: 4px;
			padding-right: 4px;
			VText {
				text: root.label;
				font-size: label-size;
				horizontal-alignment: root.label-alignment;
			}
		}	

		Rectangle {
			background: calc-background();
			border-radius: 4px;
			VerticalLayout {
				@children
			}
		}
	}
}

export component CommonComponentBackground {
	in property<bool> enabled: true;
	in property<bool> no-background: false;

	function calc-background() -> brush {
		if (no-background == true) {
			return Palette.control-background.transparentize(1);
		}
		if (enabled == false) {
			return Palette.control-background.darker(0.2);
		}
		return Palette.control-background;
	}

	Rectangle {
		background: calc-background();
		@children
	}
}