from flask_logic.registry import register_component


@register_component("image", css="css/components/image.css")
def render_image_component(src, caption=None, css_class=None, context=None):
    if context:
        context["used_components"].add("image")

    base_class = "image-container"
    full_class = f"{base_class} {css_class}" if css_class else base_class

    caption_html = f'<div class="caption">{caption}</div>' if caption else ""

    return f"""
    <div class="{full_class}">
        <img src="/content/image/{src}" alt="{caption or ''}">
        {caption_html}
    </div>
    """

@register_component("code", css="css/components/code.css")
def render_code_block(value=None, code=None, context=None):
    if context:
        context["used_components"].add("code")

    code = code or value or ""

    return f"""
    <pre class="code-block"><code>{code}</code></pre>
    """


@register_component("tree", css="css/components/tree.css")
def render_tree_component(context=None):
    if context:
        context["used_components"].add("tree")
    return f"""
    <div class="background-svg">
        <img src="/content/image/animation.svg" alt="" />
        <br />
        <p>tree source: codepen @uchardon</p>
    </div>"""

@register_component("timeline", css="css/components/timeline.css")

def render_timeline_component(timeline=None, value=None, context=None):
    if context:
        context["used_components"].add("timeline")
    timeline = timeline or value or ""
    return f"""
<div class="tw-w-full tw-mx-auto tw-px-0 tw-py-12">
  <ol
    class="tw-relative tw-border-l-2 tw-border-gray-300 tw-list-none tw-p-0 tw-m-0 tw-ml-4"
  >
    {timeline}
  </ol>
</div>

<li class="tw-mb-12 tw-ml-6 tw-list-none tw-relative"></li>
"""