// Small square checkbox primitive matching the QBZ dark theme.

import { Theme } from "../foundation/semantic-colors.slint";
import { QbzIcon } from "QbzIcon.slint";

export component QbzCheckbox inherits Rectangle {
    in-out property <bool> checked: false;
    callback toggled();

    width: 18px;
    height: 18px;
    border-radius: 4px;
    background: root.checked ? Theme.accent : transparent;
    border-width: root.checked ? 0px : 1.5px;
    border-color: Theme.text-muted;

    QbzIcon {
        source: @image-url("../assets/icons/check.svg");
        visible: root.checked;
        width: 12px;
        height: 12px;
        x: Math.round((parent.width - self.width) / 2 / 1px) * 1px;
        y: Math.round((parent.height - self.height) / 2 / 1px) * 1px;
        tint: Theme.accent-text;
    }

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