from reactpy import component, html, svg, hooks  
from reactpy.core.hooks import use_ref  

@component
def Footer(collapsed, set_collapsed):

    expanded_footer_ref = use_ref(None)
    collapsed_footer_ref = use_ref(None)

    if expanded_footer_ref.current is None:
        expanded_footer_ref.current = html.footer(
            {
                "style": {
                    "backgroundColor": "#FFFFFF",
                    "position": "fixed",
                    "bottom": 0,
                    "width": "100%",
                    "height": "50px",
                }
            },
            html.button(
                {
                    "style": {
                        "background": "none",
                        "border": "none",
                        "color": "#757575",
                        "cursor": "pointer",
                        "position": "absolute",
                        "bottom": "5px",
                        "right": "10px",
                    },
                    "type": "button",
                    "on_click": lambda _: set_collapsed(False)
                },
                svg.svg(
                    {
                        "xmlns": "http://www.w3.org/2000/svg",
                        "width": "24",
                        "height": "24",
                        "fill": "none",
                        "stroke": "currentColor",
                        "stroke-linecap": "round",
                        "stroke-linejoin": "round",
                        "stroke-width": "3",
                        "viewBox": "0 0 24 24",
                    },
                    svg.path({"d": "M19 14l-7-7-7 7"})
                )
            )
        )
        
    if collapsed_footer_ref.current is None:
        collapsed_footer_ref.current = html.footer(
            {
                "style": {
                    "backgroundColor": "#FFFFFF",
                    "position": "fixed",
                    "bottom": 0,
                    "width": "100%",
                }
            },
            html.div(
                {
                    "style": {
                        "backgroundColor": "#FFFFFF",
                        "padding": "0px 20px 0px 50px",
                        "position": "relative",
                        "display": "block",
                    }
                },
                html.button(
                    {
                        "style": {
                            "position": "absolute",
                            "right": "10px",
                            "background": "none",
                            "border": "none",
                            "color": "#757575",
                            "cursor": "pointer",
                        },
                        "type": "button",
                        "on_click": lambda _: set_collapsed(True)
                    },
                    svg.svg(
                        {
                            "xmlns": "http://www.w3.org/2000/svg",
                            "width": "24",
                            "height": "24",
                            "fill": "none",
                            "stroke": "currentColor",
                            "stroke-linecap": "round",
                            "stroke-linejoin": "round",
                            "stroke-width": "3",
                            "viewBox": "0 0 24 24",
                        },
                        svg.path({"d": "M18 6L6 18"}),
                        svg.path({"d": "M6 6l12 12"})
                    )
                ),
                html.p(
                    {
                        "style": {
                            "fontSize": "20px",
                            "color": "#4b4851"
                        }
                    },
                    "How this works?",
                ),
                html.p(
                    {
                        "style": {
                            "color": "#757575",
                        }
                    },
                    "This app was built with ",
                    html.a(
                        {
                            "href": "https://vectara.com/",
                            "target": "_blank",
                        },
                        "Vectara",
                    ),
                    html.br(),
                    "It demonstrates the use of Agentic-RAG functionality with Vectara",
                )
            )
        )

    if collapsed:
        return expanded_footer_ref.current
    else:
        return collapsed_footer_ref.current




# from reactpy import component, html, svg, hooks    

# @component
# def Footer(collapsed, set_collapsed):

#     if collapsed:
#         return html.footer(
#             {
#                 "style": {
#                     "backgroundColor": "#FFFFFF",
#                     "position": "fixed",
#                     "bottom": 0,
#                     "width": "100%",
#                     "height": "50px",
#                 }
#             },
#             html.button(
#                 {
#                     "style": {
#                         "background": "none",
#                         "border": "none",
#                         "color": "#757575",
#                         "cursor": "pointer",
#                         "position": "absolute",
#                         "bottom": "5px",
#                         "right": "10px",
#                     },
#                     "type": "button",
#                     "on_click": lambda _: set_collapsed(False)
#                 },
#                 svg.svg(
#                     {
#                         "xmlns": "http://www.w3.org/2000/svg",
#                         "width": "24",
#                         "height": "24",
#                         "fill": "none",
#                         "stroke": "currentColor",
#                         "stroke-linecap": "round",
#                         "stroke-linejoin": "round",
#                         "stroke-width": "3",
#                         "viewBox": "0 0 24 24",
#                     },
#                     svg.path({"d": "M19 14l-7-7-7 7"})
#                 )
#             )
#         )
#     else:
#         return html.footer(
#             {
#                 "style": {
#                     "backgroundColor": "#FFFFFF",
#                     "position": "fixed",
#                     "bottom": 0,
#                     "width": "100%",
#                 }
#             },
#             html.div(
#                 {
#                     "style": {
#                         "backgroundColor": "#FFFFFF",
#                         "padding": "0px 20px 0px 50px",
#                         "position": "relative",
#                         "display": "block",
#                     }
#                 },
#                 html.button(
#                     {
#                         "style": {
#                             "position": "absolute",
#                             "right": "10px",
#                             "background": "none",
#                             "border": "none",
#                             "color": "#757575",
#                             "cursor": "pointer",
#                         },
#                         "type": "button",
#                         "on_click": lambda _: set_collapsed(True)
#                     },
#                     svg.svg(
#                         {
#                             "xmlns": "http://www.w3.org/2000/svg",
#                             "width": "24",
#                             "height": "24",
#                             "fill": "none",
#                             "stroke": "currentColor",
#                             "stroke-linecap": "round",
#                             "stroke-linejoin": "round",
#                             "stroke-width": "3",
#                             "viewBox": "0 0 24 24",
#                         },
#                         svg.path({"d": "M18 6L6 18"}),
#                         svg.path({"d": "M6 6l12 12"})
#                     )
#                 ),
#                 html.p(
#                     {
#                         "style": {
#                             "fontSize": "20px",
#                             "color": "#4b4851"
#                         }
#                     },
#                     "How this works?",
#                 ),
#                 html.p(
#                     {
#                         "style": {
#                             "color": "#757575",
#                         }
#                     },
#                     "This app was built with ",
#                     html.a(
#                         {
#                             "href": "https://vectara.com/",
#                             "target": "_blank",
#                         },
#                         "Vectara",
#                     ),
#                     html.br(),
#                     "It demonstrates the use of Agentic-RAG functionality with Vectara",
#                 )
#             )
#         )