import { Button, VerticalBox, HorizontalBox, LineEdit, ListView, CheckBox, StandardButton } from "std-widgets.slint";

export struct TodoItemSlint {
    id: string,
    content: string,
    done: bool,
}

export global Logic {
    callback add_todo(string);
    callback set_todo_content(string, string);
    callback set_todo_done(string, bool);
    callback del_todo(string);
}

component TodoList inherits Rectangle {

    // callback set_todo_content(string, string);
    // callback set_todo_done(string, bool);
    // callback del_todo(string);

    in property <TodoItemSlint> item;
    in property <bool> notLast: true;

    VerticalLayout {
        HorizontalBox {
            // padding-top: 86px;
            // padding-bottom: 4px;
            padding: 8px;
            height: 50px;
            // spacing: 0;
            
            LineEdit {
                // height: 40px;
                font-size: 16px;
                enabled: true;
                text: item.content;
                accepted(s) => {
                    debug("Enter pressed, set content");
                    if (s != "") {
                        Logic.set_todo_content(item.id, s);
                    }
                }
            }

            CheckBox {
                width: 30px;
                // text: "Done";
                checked: item.done;
                toggled => {
                    debug("CheckBox toggled");
                    Logic.set_todo_done(item.id, !item.done);
                }
            }

            Button {
                // text: "Delete";
                icon: @image-url("icons/delete.svg");
                colorize-icon: true;
                clicked() => {
                    debug("Delete item clicked, id: " + item.id);
                    Logic.del_todo(item.id);
                }
            }

            Rectangle {
                width: 0px;
            }

            // Rectangle {
            //     // padding: 20px;
            //     width: 30px;
            //     padding: 0;
            //     // background: #666;
                
            //     Image {
            //         width: 18px;
            //         height: 18px;
            //         source:  @image-url("icons/delete.svg");
            //         colorize: lightgrey;
                    
            //         // clicked() => {
            //         //     debug("Delete item clicked");
            //         //     Logic.del_todo(item.id);
            //         // }
            //     }
            // }
            

            // Text {
            //     text: item.content;
            //     font-size: 16px;
            //     vertical-alignment: center;
            // }
            
        }

        if notLast: Rectangle {
            background: #666;
            height: 0.5px;
        }
    }
}

component DelConfirmDialog inherits Rectangle {

    // title: "Confirm";
    // background: background.darker(25%);
    width: 100%;
    height: 100%;
    background: #333;
    opacity: 0.95;
    preferred-width: 100%;

    HorizontalBox {
        Rectangle {
            background: root.background.darker(25%);
            VerticalBox {
                Rectangle {
                    // width: 70%;
                    // height: 70%;
                    // background: #333;
                    Text {
                        text: "Are you sure to delete this todo item?";
                        font-size: 16px;
                        font-weight: 600;
                    }
                }

                StandardButton {
                    kind: ok;
                    clicked() => {
                        debug("OK button clicked");
                    }
                }

                StandardButton {
                    kind: cancel;
                }
            }
        }
    }

    // Text {
    //     text: "This is a dialog box";
    // }

    

    // Button {
    //     text: "More Info";
    //     dialog-button-role: action;
    // }
}

export component MyApp inherits Window {

    title: @tr("Todo Lists");

    in property <[TodoItemSlint]> todos: [
        { id: "1", content: "Buy milk", done: false },
        { id: "2", content: "Buy bread", done: true },
        { id: "3", content: "Buy butter", done: false },
        { id: "1", content: "Buy milk", done: false },
        { id: "2", content: "Buy bread", done: true },
        { id: "3", content: "Buy butter", done: false },
        // { id: "1", content: "Buy milk", done: false },
        // { id: "2", content: "Buy bread", done: true },
        // { id: "3", content: "Buy butter", done: false },
    ];
        width: 400px;
        height: 500px;

        VerticalBox {
            padding: 0px;
            spacing: 0;

            HorizontalBox {
                padding: 8px;
                spacing: 8px;
                height: 50px;
                // Rectangle {width: 0;}
            Text {
                    text: "Todos";
                    font-size: 18px;
                    // width: 60px;
                vertical-alignment: center;
                    // vertical-alignment: center;
            }

                edtInput := LineEdit {
                    // height: 40px;
                // height: 100%;
                // width: 100%;
                font-size: 16px;
                    placeholder-text: @tr("Input todo and press Enter.");
                    enabled: true;
                    horizontal-stretch: 1;
                    accepted(s) => {
                        debug("Enter pressed, add todoItem");
                        if (s != "") {
                            Logic.add_todo(s);
                            edtInput.text = "";
                        }
                    }
                    edited(s) => {
                    }
                }

                // Button {
            //     text: "Add";
            //     clicked() => {
            //         debug("Add button clicked");
            //         if (edtInput.text != "") {
            //             Logic.add_todo(edtInput.text);
            //             edtInput.text = "";
            //         }
            //     }
            // }
        }

            Rectangle {
                background: #666;
                height: 0.5px;
            }

            HorizontalBox {
                padding: 4px;
                vertical-stretch: 1;

                ListView {
                    for item[index] in todos: TodoList {
                        item: item;
                        notLast: index < todos.length - 1;

                        // set_todo_content => {
                    //     set_todo_content(item.id, item.content);
                    // }
                    // set_todo_done => {
                    //     set_todo_done(item.id, item.done);
                    // }
                    // del_todo => {
                    //     del_todo(item.id);
                    // }
                }
                }
            }
        }

        // DelConfirmDialog { }
    }