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

@component
def ChatBox(message, set_message, send_message, collapsed):
    # Store the static SVG button in a ref so it doesn't re-render unnecessarily
    send_button_ref = use_ref(None)
    def handle_input_change(event):
        # Update the message state when input changes
        set_message(event['target']['value'])
    def handle_key_down(event):
        # Check for Enter key and send message if the message is not empty
        if event['key'] == 'Enter' and message.strip():
            send_message()
    # Only define the static button SVG once
    if send_button_ref.current is None:
        send_button_ref.current = svg.svg(
                {
                    "xmlns": "http://www.w3.org/2000/svg",
                    "width": "20",
                    "height": "20",
                    "fill": "none",
                    "stroke": "currentColor",
                    "stroke-linecap": "round",
                    "stroke-linejoin": "round",
                    "stroke-width": "2",
                    "viewBox": "0 0 24 24",
                    "class": "feather feather-send",
                },
                svg.path({"d": "M22 2 11 13"}),
                svg.path({"d": "M22 2 15 22 11 13 2 9z"})
            )

    return html.div(
        {
            "style": {
                "position": "fixed",
                "bottom": "70px" if collapsed else "140px",
                "left": "50%",
                "transform": "translateX(-50%)",
                "width": "80%",
                "display": "flex",
                "alignItems": "center",
                "backgroundColor": "#FFFFFF",
                "borderRadius": "50px",
                "zIndex": "1000",
            }
        },
        html.input(
            {
                "type": "text",
                "value": message,
                "placeholder": "Your Message",
                "onChange": handle_input_change,
                "onKeyDown": handle_key_down,
                "style": {
                    "width": "100%",
                    "padding": "10px 50px 10px 20px",
                    "border": "none",
                    "borderRadius": "50px",
                    "color": "#65558F",
                }
            }
        ),
        html.button(
            {
                "type": "button",
                "onClick": send_message,
                "style": {
                    "position": "absolute",
                    "right": "8px",
                    "top": "50%",
                    "transform": "translateY(-50%)",
                    "background": "none",
                    "border": "none",
                    "cursor": "pointer",
                    "padding": "8px",
                    "display": "flex",
                    "alignItems": "center",
                    "justifyContent": "center",
                }
            },
            send_button_ref.current  # Render the cached send button
        )
    )


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

# @component
# # def ChatBox(message, set_message, handle_input_change, handle_key_down, send_message, collapsed):
# def ChatBox(message, set_message, send_message, collapsed):
    
#     def handle_input_change(event):
#         set_message(event['target']['value'])

#     def handle_key_down(event):
#         if event['key'] == 'Enter' and message.strip():
#             send_message()

#     return html.div(
#         {
#             "style": {
#                 "position": "fixed",
#                 "bottom": "70px" if collapsed else "140px",
#                 "left": "50%",
#                 "transform": "translateX(-50%)",
#                 "width": "80%",
#                 "display": "flex",
#                 "alignItems": "center",
#                 "backgroundColor": "#FFFFFF",
#                 "borderRadius": "50px",
#                 "zIndex": "1000",
#             }
#         },
#         html.input(
#             {
#                 "type": "text",
#                 "value": message,
#                 "placeholder": "Your Message",
#                 "onChange": handle_input_change,
#                 "onKeyDown": handle_key_down,
#                 "style": {
#                     "width": "100%",
#                     "padding": "10px 50px 10px 20px",
#                     "border": "none",
#                     "borderRadius": "50px",
#                     "color": "#65558F",
#                 }
#             }
#         ),
#         html.button(
#             {
#                 "type": "button",
#                 "onClick": send_message,
#                 "style": {
#                     "position": "absolute",
#                     "right": "8px",
#                     "top": "50%",
#                     "transform":"translateY(-50%)",
#                     "background": "none",
#                     "border": "none",
#                     "cursor": "pointer",
#                     "padding": "8px",
#                     "display": "flex",
#                     "alignItems": "center",
#                     "justifyContent": "center",
#                 }
#             },
#             svg.svg(
#                 {
#                     "xmlns": "http://www.w3.org/2000/svg",
#                     "width": "20",
#                     "height": "20",
#                     "fill": "none",
#                     "stroke": "currentColor",
#                     "stroke-linecap": "round",
#                     "stroke-linejoin": "round",
#                     "stroke-width": "2",
#                     "viewBox": "0 0 24 24",
#                     "class": "feather feather-send",
#                 },
#                 svg.path({"d": "M22 2 11 13"}),
#                 svg.path({"d": "M22 2 15 22 11 13 2 9z"})
#             )
#         )
#     )