// Switch toggle primitive — the standard on/off control for settings.
//
// The toggle does not flip itself: it emits `toggled(new-value)` and the
// caller updates the bound state. This keeps a single source of truth in
// the SettingsState global.

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

export component QbzToggle inherits Rectangle {
    in property <bool> checked: false;
    in property <bool> enabled: true;
    callback toggled(bool);

    width: 40px;
    height: 22px;
    border-radius: 11px;
    background: root.checked ? Theme.accent : Theme.surface-elevated;
    opacity: root.enabled ? 1.0 : 0.4;

    Rectangle {
        width: 16px;
        height: 16px;
        border-radius: 8px;
        background: Theme.text-primary;
        y: 3px;
        x: root.checked ? root.width - self.width - 3px : 3px;
        animate x { duration: 120ms; easing: ease-out; }
    }

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