// App-wide CIRCULAR selection checkbox — the canonical multi-select / select-all
// idiom shared by TrackRow (single) and LocalLibraryView's TreeRow (tri-state).
// 13px, fully rounded (border-radius 6.5px), accent fill when on/partial, an 8px
// white check.svg (on) or minus.svg (partial/indeterminate). NOT the square
// `QbzCheckbox` (4px radius — that is for Settings/Login only). Centralizes the
// spec verbatim so every multi-select row matches (homologation; the prior
// MyQBZ square copies were the divergence).

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

export component SelectionCheckbox inherits Rectangle {
    // Checked (fully selected).
    in property <bool> checked: false;
    // Indeterminate / partial (folder with some-but-not-all selected). When set
    // the box fills accent and renders minus.svg instead of a check.
    in property <bool> partial: false;
    callback toggled();

    width: 13px;
    height: 13px;
    border-radius: 6.5px;
    background: (root.checked || root.partial) ? Theme.accent : transparent;
    border-width: (root.checked || root.partial) ? 0px : 1.5px;
    border-color: cb-ta.has-hover ? Theme.text-primary : Theme.text-muted;
    animate background { duration: 120ms; }

    QbzIcon {
        source: root.partial
            ? @image-url("../assets/icons/minus.svg")
            : @image-url("../assets/icons/check.svg");
        visible: root.checked || root.partial;
        width: 8px;
        height: 8px;
        x: Math.round((parent.width - self.width) / 2 / 1px) * 1px;
        y: Math.round((parent.height - self.height) / 2 / 1px) * 1px;
        tint: #ffffff;
    }

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