/// TEMPORARY AI GENERATED FRONTEND \\\
///   NOT TO BE USED IN PRODUCTION  \\\

import { Theme } from "theme.slint";
import { TextField } from "components/text-field.slint";

export component LoginScreen inherits Rectangle {
    in property <string> error;
    in property <bool> busy;
    in-out property <string> homeserver;
    in-out property <string> username;
    callback submit(string, string, string); // homeserver, username, password

    background: Theme.rail-bg;

    function try-submit() {
        if (!root.busy && root.username != "" && password.text != "") {
            root.submit(root.homeserver, root.username, password.text);
        }
    }

    Rectangle {
        width: min(480px, parent.width - 32px);
        height: card.preferred-height + 64px;
        x: (parent.width - self.width) / 2;
        y: (parent.height - self.height) / 2;
        background: Theme.chat-bg;
        border-radius: 8px;

        card := VerticalLayout {
            padding: 32px;
            spacing: 6px;

            Text {
                text: "Welcome back!";
                color: Theme.text-header;
                font-size: 24px;
                font-weight: 700;
                horizontal-alignment: center;
            }

            Text {
                text: "Sign in with your Matrix account";
                color: Theme.text-muted;
                font-size: 15px;
                horizontal-alignment: center;
            }

            Rectangle {
                height: 14px;
            }

            Text {
                text: "HOMESERVER";
                color: Theme.text-muted;
                font-size: 12px;
                font-weight: 700;
            }

            TextField {
                placeholder: "matrix.org";
                text <=> root.homeserver;
            }

            Rectangle {
                height: 6px;
            }

            Text {
                text: "USERNAME";
                color: Theme.text-muted;
                font-size: 12px;
                font-weight: 700;
            }

            TextField {
                placeholder: "user  (or @user:matrix.org)";
                text <=> root.username;
            }

            Rectangle {
                height: 6px;
            }

            Text {
                text: "PASSWORD";
                color: Theme.text-muted;
                font-size: 12px;
                font-weight: 700;
            }

            password := TextField {
                password: true;
                accepted => {
                    root.try-submit();
                }
            }

            if root.error != "": Text {
                text: root.error;
                color: Theme.danger;
                font-size: 13px;
                wrap: word-wrap;
            }

            Rectangle {
                height: 10px;
            }

            Rectangle {
                height: 44px;
                border-radius: 4px;
                background: root.busy ? Theme.accent-hover : (login-touch.has-hover ? Theme.accent-hover : Theme.accent);
                Text {
                    text: root.busy ? "Signing in…" : "Log In";
                    color: white;
                    font-size: 16px;
                    font-weight: 600;
                    horizontal-alignment: center;
                    vertical-alignment: center;
                }

                login-touch := TouchArea {
                    mouse-cursor: pointer;
                    clicked => {
                        root.try-submit();
                    }
                }
            }
        }
    }
}