import { LineEdit, TextEdit } from "std-widgets.slint";
import { Theme } from "../theme.slint";

export component NeonInput {
    in-out property <string> text;
    in property <string> placeholder: "";
    in property <string> label: "";
    in property <string> hint: "";
    in property <bool> has-error: false;
    in property <bool> enabled: true;
    in property <bool> has-focus: false;

    forward-focus: input;

    VerticalLayout {
        spacing: Theme.sp-1;
        if (root.label != "") : Text {
            text: root.label;
            font-size: Theme.font-sm;
            color: root.enabled ? Theme.text-muted : Theme.text-dim;
        }
        Rectangle {
            min-height: 36px;
            background: root.enabled ? Theme.bg-surface : Theme.bg-elevated;
            border-radius: Theme.radius-md;
            border-width: 1px;
            border-color: root.has-error ? Theme.neon-red :
                          root.has-focus ? Theme.border-focus :
                          Theme.border;
            opacity: root.enabled ? 1.0 : 0.4;
            HorizontalLayout {
                padding-left: Theme.sp-3;
                padding-right: Theme.sp-3;
                alignment: start;
                input := LineEdit {
                    text <=> root.text;
                    placeholder-text: root.placeholder;
                    font-size: Theme.font-base;
                    horizontal-stretch: 1;
                    enabled: root.enabled;
                }
            }
        }
        if (root.hint != "") : Text {
            text: root.hint;
            font-size: Theme.font-xs;
            color: root.has-error ? Theme.neon-red : (root.enabled ? Theme.text-dim : Theme.text-dim);
        }
    }
}

export component NeonSearchInput {
    in-out property <string> text;
    in property <string> placeholder: "Search…";
    in property <string> label: "";
    in property <string> hint: "";
    in property <bool> has-error: false;
    in property <bool> enabled: true;
    in property <bool> has-focus: false;

    NeonInput {
        text <=> root.text;
        placeholder: root.placeholder;
        label: root.label;
        hint: root.hint;
        has-error: root.has-error;
        enabled: root.enabled;
        has-focus: root.has-focus;
    }
}

export component NeonTextArea {
    in-out property <string> text;
    in property <string> placeholder: "";
    in property <string> label: "";
    in property <string> hint: "";
    in property <bool> has-error: false;
    in property <bool> enabled: true;
    in property <bool> has-focus: false;

    VerticalLayout {
        spacing: Theme.sp-1;
        if (root.label != "") : Text {
            text: root.label;
            font-size: Theme.font-sm;
            color: root.enabled ? Theme.text-muted : Theme.text-dim;
        }
        Rectangle {
            min-height: 80px;
            background: root.enabled ? Theme.bg-surface : Theme.bg-elevated;
            border-radius: Theme.radius-md;
            border-width: 1px;
            border-color: root.has-error ? Theme.neon-red :
                          root.has-focus ? Theme.border-focus :
                          Theme.border;
            opacity: root.enabled ? 1.0 : 0.4;
            TextEdit {
                text <=> root.text;
                font-size: Theme.font-base;
                padding: Theme.sp-2;
                vertical-stretch: 1;
                enabled: root.enabled;
            }
        }
        if (root.hint != "") : Text {
            text: root.hint;
            font-size: Theme.font-xs;
            color: root.has-error ? Theme.neon-red : Theme.text-dim;
        }
    }
}
