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

export component VCheckBox {
	in-out property<string> text;
	in property <brush> color <=> textComponent.color;
	in-out property<bool> checked: false;

	callback toggled(bool); // toggled(state: bool)

	HorizontalLayout {
		spacing: 8px;
		VerticalLayout {
			alignment: center;
			if checked : Rectangle {
				background: Palette.accent;
				height: 1rem;
				width: self.height;
				border-radius: 32px;
			}
			if !checked : Rectangle {
				border-color: Palette.foreground;
				border-width: 2px;
				height: 1rem;
				width: self.height;
				border-radius: 32px;
			}
		}
		textComponent := VText {
			text: root.text;
			vertical-alignment: center;
		}
	}

	ta := TouchArea {
		clicked => {
			checked = !checked;
			root.toggled(checked)
		}
	}
}