import { Group, Panel, navbar, text, gravity, Color, LayoutSpec, vlayout, Gravity, hlayout, scroller, layoutConfig, image, modal, navigator } from "doric";
import { title, label, colors } from "./utils";

const shareIcon = "data:image/png;base64, "

@Entry
class NavbarDemo extends Panel {
    build(rootView: Group): void {
        scroller(
            vlayout(
                [
                    title("Navbar Demo"),
                    label('isHidden').apply({
                        width: 200,
                        height: 50,
                        backgroundColor: colors[0],
                        textSize: 30,
                        textColor: Color.WHITE,
                        layoutConfig: layoutConfig().just(),
                        onClick: () => {
                            navbar(context).isHidden().then(e => modal(context).alert(`Navbar isHidden:${e}`)).catch(e => {
                                modal(context).alert(e)
                            })
                        }
                    }),
                    label('setHidden').apply({
                        width: 200,
                        height: 50,
                        backgroundColor: colors[0],
                        textSize: 30,
                        textColor: Color.WHITE,
                        layoutConfig: layoutConfig().just(),
                        onClick: () => {
                            navbar(context).isHidden()
                                .then(e => navbar(context).setHidden(!e))
                                .catch(e => {
                                    modal(context).alert(e)
                                })
                        }
                    }),
                    label('setTitle').apply({
                        width: 200,
                        height: 50,
                        backgroundColor: colors[0],
                        textSize: 30,
                        textColor: Color.WHITE,
                        layoutConfig: layoutConfig().just(),
                        onClick: () => {
                            navbar(context).setTitle('Setted Title')
                                .catch(e => {
                                    modal(context).alert(e)
                                })
                        }
                    }),
                    label('setBgColor').apply({
                        width: 200,
                        height: 50,
                        backgroundColor: colors[0],
                        textSize: 30,
                        textColor: Color.WHITE,
                        layoutConfig: layoutConfig().just(),
                        onClick: () => {
                            navbar(context).setBgColor(Color.YELLOW)
                                .catch(e => {
                                    modal(context).alert(e)
                                })
                        }
                    }),
                    label('setLeft').apply({
                        width: 200,
                        height: 50,
                        backgroundColor: colors[0],
                        textSize: 30,
                        textColor: Color.WHITE,
                        layoutConfig: layoutConfig().just(),
                        onClick: () => {
                            navbar(context).setLeft(text({
                                width: 70,
                                height: 44,
                                textColor: Color.BLACK,
                                layoutConfig: layoutConfig().just().configAlignment(Gravity.Center),
                                text: "Left",
                            }))
                                .catch(e => {
                                    modal(context).alert(e)
                                })
                        }
                    }),
                    label('setRight').apply({
                        width: 200,
                        height: 50,
                        backgroundColor: colors[0],
                        textSize: 30,
                        textColor: Color.WHITE,
                        layoutConfig: layoutConfig().just(),
                        onClick: () => {
                            navbar(context).setRight(hlayout([
                                text({
                                    width: 70,
                                    height: 44,
                                    textColor: Color.BLACK,
                                    layoutConfig: layoutConfig().just().configAlignment(Gravity.Center),
                                    text: "Right",
                                }),
                                image({
                                    imageBase64: shareIcon
                                }).apply({
                                    layoutConfig: layoutConfig().just().configAlignment(gravity().centerY()),
                                    width: 33,
                                    height: 33,
                                    onClick: () => {
                                        modal(context).toast('Right Clicked', Gravity.Bottom)
                                    }
                                })
                            ]))
                                .catch(e => {
                                    modal(context).alert(e)
                                })
                        }
                    }),
                    label('setCenter').apply({
                        width: 200,
                        height: 50,
                        backgroundColor: colors[0],
                        textSize: 30,
                        textColor: Color.WHITE,
                        layoutConfig: layoutConfig().just(),
                        onClick: () => {
                            navbar(context).setCenter(hlayout([
                                text({
                                    width: 70,
                                    height: 44,
                                    textColor: Color.BLACK,
                                    layoutConfig: layoutConfig().just().configAlignment(Gravity.Center),
                                    text: "Center",
                                }),
                            ]).apply({
                                backgroundColor: Color.RED
                            }))
                                .catch(e => {
                                    modal(context).alert(e)
                                })
                        }
                    }),
                    label('Pop').apply({
                        width: 200,
                        height: 50,
                        backgroundColor: colors[0],
                        textSize: 30,
                        textColor: Color.WHITE,
                        layoutConfig: layoutConfig().just(),
                        onClick: () => {
                            navigator(context).pop()
                        }
                    }),
                ],
                {
                    layoutConfig: layoutConfig().most().configHeight(LayoutSpec.FIT),
                    gravity: gravity().center(),
                    space: 10,
                }),
            {
                layoutConfig: layoutConfig().most(),
                backgroundColor: Color.BLUE,
            }
        ).in(rootView)
    }
}