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

export component DarkLineEdit inherits Rectangle {
    in property <string> placeholder-text: "";
    in-out property <string> text: "";
    callback accepted(string);
    callback edited(string);

    forward-focus: inner;
    height: 28px;
    min-width: 60px;
    border-radius: 4px;
    border-width: 1px;
    border-color: inner.has-focus ? Theme.accent-purple : Theme.button-border;
    background: Theme.button-bg;

    // Placeholder
    if root.text == "" && !inner.has-focus : Text {
        x: 6px;
        y: 0;
        width: root.width - 12px;
        height: root.height;
        text: root.placeholder-text;
        color: Theme.fg-secondary;
        font-size: 12px;
        vertical-alignment: center;
    }

    inner := TextInput {
        x: 6px;
        y: 0;
        width: root.width - 12px;
        height: root.height;
        text <=> root.text;
        color: Theme.fg-primary;
        font-size: 12px;
        vertical-alignment: center;
        accepted => { root.accepted(root.text); }
        edited => { root.edited(root.text); }
    }
}