import { Theme } from "../theme.slint";

export component NeonSlider {
    in property <string> label: "";
    in property <float> min: 0.0;
    in property <float> max: 100.0;
    in-out property <float> value: 50.0;
    in property <bool> enabled: true;
    in property <bool> has-focus: false;
    callback changed;

    property <float> norm: (root.value - root.min) / (root.max - root.min);

    VerticalLayout { spacing: Theme.sp-2;
        if (root.label != "") : Text { text: root.label; font-size: Theme.font-sm; color: root.enabled ? Theme.text-muted : Theme.text-dim; }
        Rectangle { height: 4px;
            Rectangle { height: 4px; border-radius: 2px; background: Theme.border; width: 100%; }
            Rectangle { height: 4px; border-radius: 2px; background: root.enabled ? Theme.neon-cyan : Theme.text-dim; width: parent.width * root.norm; y: 0; }
            Rectangle { width: 16px; height: 16px; border-radius: 8px; background: root.enabled ? Theme.neon-cyan : Theme.text-dim; x: parent.width * root.norm - 8px; y: -6px; }
            opacity: root.enabled ? 1.0 : 0.4;
            touch := TouchArea {
                moved => { if (root.enabled) { root.value = root.min + (touch.mouse-x / touch.width).max(0.0).min(1.0) * (root.max - root.min); root.changed(); } }
                enabled: root.enabled;
                mouse-cursor: root.enabled ? MouseCursor.pointer : MouseCursor.default;
            }
        }
    }
}

export component NeonProgressBar {
    in property <float> value: 0.0;
    in property <color> color: Theme.neon-cyan;
    in property <bool> show-label: false;

    VerticalLayout { spacing: Theme.sp-1;
        Rectangle { height: 6px; border-radius: 3px; background: Theme.border;
            Rectangle { height: 6px; border-radius: 3px; background: root.color; width: parent.width * root.value; }
        }
        if (root.show-label) : Text {
            text: Math.round(root.value * 100.0) + "%";
            font-size: Theme.font-xs; color: Theme.text-dim;
        }
    }
}

export component NeonSpinner {
    Rectangle {
        width: 24px; height: 24px;
        border-radius: 12px;
        border-width: 2px;
        border-color: Theme.neon-cyan;
    }
}
