import {
    Button,
    VerticalBox,
    LineEdit,
    GridBox,
    StandardListView,
    ListView,
    ComboBox,
} from "std-widgets.slint";

// Implementations of standard widgets can be found at https://github.com/slint-ui/slint/tree/master/internal/compiler/widgets

// See https://github.com/slint-ui/slint/issues/4956 for issues with fonts.
import "../fonts/IBM_Plex_Mono/IBMPlexMono-Regular.ttf";
import { UserSitesView } from "user-sites-view.slint";
import { Style } from "globals.slint";
import { UsersView } from "users-view.slint";
import { LoginView } from "login-view.slint";
import { UserEditView } from "user-edit-view.slint";

export enum AppState {
    login,
    users,
    user-edit,
    user-sites,
}

export component AppWindow inherits Window {
    // Special characters to generate pre-render glyphs for.
    in property <string> dummy: "ÄÖÜÁÉÍÓÚÝŔŚĹŹĆŃĚĽŽŠČŘĎŤŇŮÅäöüáéíóúýŕśĺźćńěľžščřďťňůåß„“”‘’—–@&$%+=¡¿¢£$¥€²³¼½¬¤¦§©®™°´ˇ¨";
    in property <string> dummy_identicon_symbols: "╔╚╰═█░▒▓☺☻╗╝╯═◈◎◐◑◒◓☀☁☂☃☄★☆☎☏⎈⌂☘☢☣☕⌚⌛⏰⚡⛄⛅☔♔♕♖♗♘♙♚♛♜♝♞♟♨♩♪♫⚐⚑⚔⚖⚙⚠⌘⏎✄✆✈✉✌";
    default-font-family: "IBM Plex Mono";
    default-font-size: 16pt;
    height: 368px;
    width: 960px;
    forward-focus: focus-scope;
    in property <AppState> app-state: AppState.login;
    callback escape();
    callback enter-view(view: AppState);
    // Login View
    callback login_pw_accepted <=> login_view.pw_accepted;
    // Users View
    callback users_edit_user <=> users_view.edit_user;
    // User Edit View
    in property <string> user_edit_username <=> user_edit_view.username;
    in-out property <string> user_edit_identicon <=> user_edit_view.identicon;
    callback user_edit_compute_identicon <=> user_edit_view.compute_identicon;
    callback user_edit_confirm <=> user_edit_view.confirm;
    // User Sites View
    in property <[StandardListViewItem]> sites <=> user_sites_view.model;
    callback site_pw_edited <=> user_sites_view.pw_edited;
    callback site_pw_accepted <=> user_sites_view.pw_accepted;
    focus-scope := FocusScope {
        key-pressed(event) => {
            if event.text == "\u{1b}" {
                root.escape();
                EventResult.accept
            } else {
                EventResult.reject
            }
        }
        vertical-box := VerticalBox {
            width: 960px;
            height: 368px;
            padding: 0px;
            padding-top: 120px;
            padding-bottom: 8px;
            Rectangle {
                height: 240px;
                background: #00141d;
                // For debugging bounds.
                // border-color: #ffcf00;
                // border-width: 1px;
                login_view := LoginView {
                    visible: app-state == AppState.login;
                    users_clicked => {
                        enter-view(AppState.users);
                    }
                }

                users_view := UsersView {
                    visible: app-state == AppState.users;
                }

                user_edit_view := UserEditView {
                    visible: app-state == AppState.user-edit;
                    cancel => {
                        root.escape();
                    }
                }

                user_sites_view := UserSitesView {
                    visible: app-state == AppState.user-sites;
                }
            }
        }
    }
}
