from reactpy import component, html, svg, hooks

@component
def Header(demo_name: str, short_description: str, extra_info: str, start_over):
    more_info, set_more_info = hooks.use_state(False)

    def toggle_header(event=None):
        set_more_info(not more_info)

    return html.header(
        {
            "style": {
                "backgroundColor": "#FFFFFF",
                "display": "flex",
                "justifyContent": "space-between",
                "alignItems": "center",
            }
        },
        html.div(
            {
                "style": {
                    "display": "flex",
                    "alignItems": "center",
                    "flex": 2,
                    "textAlign": "left",
                    "padding": "10px",
                }
            },
            html.img(
                {
                    "src": "https://avatars.githubusercontent.com/u/108304503?s=200&v=4",
                    "style": {
                        "height": "30px",
                        "marginRight": "15px",
                        "marginLeft": "5px",
                        "transform": "translateY(-2px)",
                    }
                }
            ),
            html.p(
                {
                    "style": {
                        "fontSize": "25px",
                        "fontFamily": "Georgia, 'Times New Roman', Times, serif",
                    }
                },
                f"{demo_name}"
            ),
        ),
        html.div(
            {
                "style": {
                    "flex": 5,
                    "textAlign": "center",
                    "padding": "10px 0px 15px 0px",
                    "fontFamily": "Lato",
                    "position": "relative",
                }
            },
            html.h3(f"Welcome to the {demo_name} Demo"),
            html.p(
                short_description,
                html.button(
                    {
                        "style": {
                            "display": "inline" if not more_info else "none",
                            "backgroundColor": "#FFFFFF",
                            "color": "#757575",
                            "fontSize": "13px",
                            "cursor": "pointer",
                            "border": "none",
                            "padding": "0px 0px 0px 5px",
                        },
                        "type": "button",
                        "onClick": toggle_header,
                    },
                    html.u(
                        {
                            "style": {
                                "flex": 2,
                                "textAlign": "right",
                                "padding": "10px",
                            }
                        },
                        "Learn More"
                    )
                ),
                f" {extra_info}" if more_info else ""
            ),
            html.button(
                {
                    "style": {
                        "display": "block" if more_info else "none",
                        "background": "none",
                        "border": "none",
                        "color": "#757575",
                        "cursor": "pointer",
                        "position": "absolute",
                        "left": "50%",
                        "transform": "translateX(-50%)",
                        "bottom": "1px",
                    },
                    "type": "button",
                    "on_click": toggle_header,
                },
                svg.svg(
                    {
                        "width": "20", 
                        "height": "20", 
                        "viewBox": "0 0 20 20", 
                        "fill": "none", 
                        "stroke": "black", 
                        "strokeWidth": "2", 
                        "strokeLinecap": "round", 
                        "strokeLinejoin": "round",
                    },
                    svg.path(
                        {
                            "d": "M12 19V5M5 12l7-7 7 7", 
                            "stroke": "currentColor",
                        }
                    )
                )
            )
        ),
        html.div(
            {
                "style": {
                    "flex": 2,
                    "textAlign": "right",
                    "padding": "10px",
                }
            },
            html.button(
                {
                    "style": {
                        "backgroundColor": "#FFFFFF",
                        "color": "#757575",
                        "fontSize": "14px",
                        "cursor": "pointer",
                        "border": "1px solid #e2dfdf",
                        "borderRadius": "5px",
                        "padding": "6px 20px",
                        "marginRight": "15px",
                    },
                    "type": "button",
                    "onClick": start_over,
                },
                "Start Over?"
            )
        )
    )