import html as html_lib

from .visible_attrs import _visible_attrs
from .style_string import _style_string
from .parent_flex_direction import _parent_flex_direction
from .auto_id import _auto_id
from .attr_string import _attr_string


def _render_onglets(el, meta, slug, children_map=None, ctx=None, parent_flex_direction=None):
    """Élément à onglets : chaque onglet est un vrai conteneur posé comme
    enfant (voir screens/elements/add_tab.py) — ça réutilise tel quel tout
    ce qui existe déjà pour un conteneur normal (ajouter du contenu dedans
    via "Ajouter DANS ce conteneur", le renommer pour changer le libellé
    affiché sur l'onglet, le supprimer via la poubelle standard) plutôt que
    d'inventer un stockage séparé pour les onglets. Un seul panneau visible
    à la fois, basculé par un petit script embarqué qui marche aussi bien
    dans l'éditeur qu'en jeu (voir forgeShowTab dans screen_edit.html et
    play.html)."""
    from .render_element_html import render_element_html

    tabs = (children_map or {}).get(el["id"], [])
    attrs = _visible_attrs(el, meta, ctx)
    # Les variantes Bulma (alignement/style/taille... voir BULMA_TABS_CONTROLS)
    # calculées par _visible_attrs atterrissent dans "class" — c'est le
    # <div class="tabs"> qui doit les porter, pas ce wrapper de positionnement.
    tabs_extra_classes = attrs.pop("class", "")
    style = _style_string(el, " display:flex; flex-direction:column;", parent_flex_direction)
    group_id = _auto_id(el)

    if not tabs:
        return (
            f'<div {_attr_string(attrs, style)}>'
            f'<em style="opacity:.6;">Onglets — ajoute au moins un onglet dans ses réglages.</em></div>'
        )

    flex_dir = _parent_flex_direction(el)
    bar_items = []
    panels = []
    for i, tab in enumerate(tabs):
        label = tab.get("name") or f"Onglet {i + 1}"
        active = i == 0
        tab_html = render_element_html(tab, slug, children_map, ctx, parent_flex_direction=flex_dir)
        target_id = f"tabpanel-{tab['id']}"
        # <li> Bulma natif ("tabs" > "ul" > "li", "is-active" sur le <li> —
        # pas le <a> — pour l'onglet en cours) : le <li> porte le clic ET les
        # data-attributes ciblés par forgeShowTab (voir screen_edit.html /
        # play.html), le <a> imbriqué n'est là que pour le rendu visuel Bulma.
        bar_items.append(
            f'<li class="{"is-active" if active else ""}" '
            f'data-tab-btn="{group_id}" data-tab-target="{target_id}" '
            f'onclick="forgeShowTab(this)"><a>{html_lib.escape(str(label))}</a></li>'
        )
        hidden_style = "" if active else ' style="display:none;"'
        panels.append(
            f'<div class="forgeTabPanel" id="{target_id}" data-tab-group="{group_id}"{hidden_style}>'
            f'{tab_html}</div>'
        )

    tabs_class = html_lib.escape(("tabs " + tabs_extra_classes).strip())
    return (
        f'<div {_attr_string(attrs, style)}>'
        f'<div class="{tabs_class}"><ul>{"".join(bar_items)}</ul></div>'
        f'<div class="forgeTabPanels" style="flex:1 1 auto; min-height:0;">{"".join(panels)}</div>'
        f"</div>"
    )