import bb.cascades 1.4

Page {
    id: settingsPage
    
    signal modifySetting(string setting, variant value)

    titleBar: TitleBar {
        title: qsTr("Settings")
    }
    ScrollView {
        Container {
            layout: StackLayout {}
            Container {
                topPadding: 15.0
            }
            Container {
                layout: DockLayout {}
                horizontalAlignment: HorizontalAlignment.Fill
                verticalAlignment: VerticalAlignment.Fill
                Container {
                    verticalAlignment: VerticalAlignment.Center
                    leftPadding: ui.sdu(3)
                    Label {
                        text: "This is my toggle"
                    }
                }
                Container {
                    rightPadding: ui.sdu(3)
                    horizontalAlignment: HorizontalAlignment.Right
                    ToggleButton {
                        checked: true
                        onCheckedChanged: {
                            if (checked) {
                                modifySetting("datenew", true)
                            } else {
                                modifySetting("datenew", false)
                            }
                        }
                    }
                }
            }
            Divider {}
            Container {
                layout: DockLayout {}
                horizontalAlignment: HorizontalAlignment.Fill
                Container {
                    leftPadding: ui.sdu(3)
                    rightPadding: ui.sdu(3)
                    DropDown {
                        title: "Dropdown"
                        preferredWidth: 1440.0
                        onSelectedIndexChanged: {
                            modifySetting("sort", selectedValue)
                        }
                        Option {
                            text: "Option Zero"
                            value: 0
                            selected: sort == 0
                        }
                        Option {
                            text: "Option Three"
                            value: 3
                            selected: sort == 3
                        }
                        Option {
                            text: "Option One"
                            value: 1
                            selected: sort == 1
                        }
                        Option {
                            text: "Option Two"
                            value: 2
                            selected: sort == 2
                        }
                    }
                }
            }
            Divider {}
            Container {
                layout: DockLayout {}
                horizontalAlignment: HorizontalAlignment.Fill
                leftPadding: 30.0
                rightPadding: 30.0
                Button {
                    preferredWidth: 1440.0
                    text: "Button"
                    onClicked: {
                        console.log("button")
                    }
                }
            }
            Divider {}
        }
    }
}