import { ListView, Button, LineEdit, GroupBox, ScrollView, VerticalBox, StyleMetrics , HorizontalBox} from "std-widgets.slint";


struct Event {
    name: string,
    start-date: string,
    end-date: string
}

export component EventsView inherits HorizontalBox {
    in property <[Event]> events-model;
    in-out property <string> new-name <=> new-name.text;
    in-out property <string> new-start-date <=> new-start-date.text;
    in-out property <string> new-end-date <=> new-end-date.text;
    in-out property <bool> highlight-new: false;
    callback add-event(string, string, string) -> string;
    callback remove-event(int);
    callback update-event(int, string, string, string) -> string;

    preferred-height: 100%;
    preferred-width: 100%;

    ScrollView {         
        VerticalLayout { 
            alignment: start;

            for item[i] in events-model: 
            GroupBox {             
                title: item.name + ", " + item.start-date + " - " + item.end-date;
                padding: 5px;

                GridLayout {
                    spacing: 5px;
                    padding: 5px;
                    Text {
                        text: "Event name";
                        vertical-alignment: center;
                    }
                    event-name := LineEdit { 
                        text: item.name;
                    }
                    Text {
                        text: "📅 Start date";
                        row: 1;
                        vertical-alignment: center;
                    }
                    start-date := LineEdit { 
                        text: item.start-date;
                        min-width: 300px;
                    }
                    Text {
                        text: "📅 End date";
                        row: 2;
                        vertical-alignment: center;
                    }
                    end-date := LineEdit { 
                        text: item.end-date;
                        min-width: 300px;
                    }
                }

                HorizontalLayout { 
                    spacing: 5px;
                    Button {
                        width: 150px;
                        text: "💾 Update";
                        clicked => { 
                            error-message.text = update-event(i, event-name.text, start-date.text, end-date.text);
                        }
                    }
                    Button {
                        width: 150px;
                        text: "🗑 Remove";
                        clicked => { remove-event(i) }
                    }
                }            
            }
            
            GroupBox { 
                padding: 5px;
                title: "New event";
                VerticalBox { 
                    alignment: start;
                    new-name := LineEdit { 
                        placeholder-text: "Event name";
                    }
                    new-start-date := LineEdit { 
                        min-width: 300px;
                        placeholder-text: "Start date (YYYY-MM-DD or DD-MM-YYYY)";
                    }
                    new-end-date := LineEdit { 
                        min-width: 300px;
                        placeholder-text: "End date (YYYY-MM-DD or DD-MM-YYYY)";
                    }
                }
                Button {
                    text: "➕ Add";
                    width: 300px;
                    clicked => { 
                        highlight-new = false;
                        error-message.text = add-event(new-name.text, new-start-date.text, new-end-date.text);
                        if (error-message.text == "") {                            
                            new-name.text = "";
                            new-start-date.text = "";
                            new-end-date.text = "";
                        }
                    }
                }
            }
            error-message := Text {
                text: "";
                color: red;
                visible: self.text != "";
            }
        }
    }
}