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

export component VButton inherits Rectangle {

	in property<string> text;
	in property<brush> text-color: Palette.foreground;
	in property<length> text-size: 1rem;
	in property<image> icon-source;
	in property<brush> icon-colorize: Palette.foreground;
	in property<length> icon-size: 1rem;
	in property <string> icon-svg;
	in property enabled <=> ta.enabled;
	callback clicked;

	private property<bool> active: false;

	background: enabled ? Palette.control-background : Palette.control-background.darker(0.2);
	border-radius: 4px;

	ta := TouchArea {
		mouse-cursor: pointer;
		clicked => {
			active = !active;
			root.clicked();
		}
	}

	HorizontalLayout {
		alignment: center;
		spacing: 8px;
		padding: 16px;
		padding-top: 4px;
		padding-bottom: 4px;
		if root.icon-svg != "" : VerticalLayout {
			alignment: center;
			Path {
				padding: 8px;
				commands: root.icon-svg;
				stroke: icon-colorize;
				stroke-width: 2px;
				width: icon-size;
				height: icon-size;
			}
		}
		if root.icon-source.width != 0 : Image {
			padding: 8px;
			source: icon-source;
			colorize: icon-colorize;
			width: icon-size;
		}
		if root.text != "" : VerticalLayout {
			VText {
				text: root.text;
				font-size: root.text-size;
				color: root.text-color;
				horizontal-alignment: center;
			}
		}
	}
}