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

export component ToggleButton inherits Rectangle {

	in property text <=> text-component.text;
	in property text-color <=> text-component.color;
	in property text-alignment <=> text-component.horizontal-alignment;
	in property<string> icon-svg;
	in property<length> icon-size: 1rem;
	in property<brush> icon-colorize: Palette.foreground;
	in property<length> icon-svg-stroke-width: 1px;
	in property<bool> active: false;
	callback clicked;
	callback right-clicked;


	background: root.active ? Palette.control-background
		: ta.has-hover ? Palette.control-background.transparentize(0.5)
		: Colors.transparent;
	border-radius: 4px;

	ta := TouchArea {
		mouse-cursor: pointer;
		clicked => {
			root.clicked();
		}
		pointer-event(e) => {
			if (e.button == PointerEventButton.right && e.kind == PointerEventKind.up) {
				root.right-clicked();
			}
		}
	}

	HorizontalLayout {
		alignment: start;
		
		//spacing: 16px;
		if icon-svg != "" : VerticalLayout {
			alignment: center;
			padding-left: 8px;
			padding-right: 8px;
			Path {
				commands: root.icon-svg;
				stroke: icon-colorize;
				stroke-width: icon-svg-stroke-width;
				width: icon-size;
				height: icon-size;
			}
		}
		VerticalLayout {
			padding: 8px;
			padding-top: 4px;
			padding-bottom: 4px;
			text-component := VText {
				horizontal-alignment: center;
			}
		}
	}
}