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)
    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']}"
        bar_items.append(
            f'<button type="button" class="forgeTabBtn{" active" if active else ""}" '
            f'data-tab-btn="{group_id}" data-tab-target="{target_id}" '
            f'onclick="forgeShowTab(this)">{html_lib.escape(str(label))}</button>'
        )
        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>'
        )

    return (
        f'<div {_attr_string(attrs, style)}>'
        f'<div class="forgeTabBar">{"".join(bar_items)}</div>'
        f'<div class="forgeTabPanels" style="flex:1 1 auto; min-height:0;">{"".join(panels)}</div>'
        f"</div>"
    )