export const props = {

    divWithAFewControls : {
        _component:"components/div",
        _children: [
            {
                _component:"components/h1",
                text: "This is an <h1> component"
            },
            {
                _component:"components/text",
                value: "Label for field"
            },
            {
                _component:"components/input",
                type:"text"
            },
            {
                _component:"components/button",
                _children: [
                    {
                        _component:"components/text",
                        value:"☢"
                    },
                    {
                        _component:"components/text",
                        value:"Click Me"
                    },
                ]
            }
        ]
    },

    login: { _component:"components/login" },

    form: {
        _component: "components/form",
        formControls: [
            {
                control: {
                    _component: "components/textbox"
                },
                label:"First Name"
            },
            {
                control: {
                    _component: "components/textbox"
                },
                label:"Last Name"
            }
        ]
    },

    nav: {
        _component: "components/nav",
        navBarBackground: "red",
        navBarBorder: "1px solid maroon",
        navBarColor: "black",
        selectedItemBackground: "maroon",
        selectedItemColor: "white",
        selectedItemBorder: "green",
        itemHoverBackground: "yellow",
        itemHoverColor: "pink",
        items: [
            {
                title: "People",
                component: {
                    _component: "components/panel",
                    text:"People Panel",
                    padding: "40px",
                    border: "2px solid pink",
                    background: "mistyrose"

                }
            },
            {
                title: "Animals",
                component: {
                    _component: "components/panel",
                    text:"Animals Panel",
                    padding: "40px",
                    border: "2px solid green",
                    background: "azure"
                }
            }
        ]
    },

    table: {
        _component:"components/table",
        columns: [
            {
                title: {
                    "##bbstate":"NameColumnName",
                    "##bbsource":"store",
                    "##bbstatefallback": "Name"
                },
                value: {
                    "##bbstate":"name",
                    "##bbsource":"context"
                }
            },
            {
                title: "Address",
                value: {
                    "##bbstate":"address",
                    "##bbsource":"context"
                }
            },
            {
                title: "Status",
                value: {
                    "##bbstate":"status",
                    "##bbsource":"context"
                }
            }
        ],
        data: {
            "##bbstate":"people"
        },
        onRowClick: [
            {
                "##eventHandlerType": "Set State",
                parameters: {
                    path: "NameColumnName",
                    value: {
                        "##bbstate":"name",
                        "##bbsource":"context",
                        "##bbstatefallback": "balls to that"
                    }
                }
            }
        ],
        tableClass: "table-default",
        theadClass: "thead-default",
        tbodyClass: "tbody-default",
        trClass: "tr-default",
        thClass: "th-default"

    },

    hiddenNav: {
        _component: "components/stackpanel",
        children: [
            {
                control:{
                    _component: "components/button",
                    contentText: "Peep",
                    onClick: [
                        {
                            "##eventHandlerType": "Set State",
                            parameters: {
                                path: "selected",
                                value: "People"
                            }
                        }
                    ]
                }
            },
            {
                control:{
                    _component: "components/button",
                    contentText: "Ani",
                    onClick: [
                        {
                            "##eventHandlerType": "Set State",
                            parameters: {
                                path: "selected",
                                value: "Animals"
                            }
                        }
                    ]
                }
            },
            {
                control: {
                    _component: "components/nav",
                    hideNavBar: true,
                    selectedItem: {
                        "##bbstate":"selected",
                        "##bbsource":"store",
                        "##bbstatefallback": "Animals"
                    },
                    items: [
                        {
                            title: "People",
                            component: {
                                _component: "components/panel",
                                text:"People Panel",
                                padding: "40px",
                                border: "2px solid pink",
                                background: "mistyrose"
            
                            }
                        },
                        {
                            title: "Animals",
                            component: {
                                _component: "components/panel",
                                text:"Animals Panel",
                                padding: "40px",
                                border: "2px solid green",
                                background: "azure"
                            }
                        }
                    ]
                }
            }
        ]
    }

}