"""Core components for building fh-matui Material Design apps with BeerCSS"""

# AUTOGENERATED! DO NOT EDIT! File to edit: ../nbs/01_core.ipynb.

# %% auto #0
__all__ = ['HEADER_URLS', 'beer_hdrs', 'COLOR_NAMES', 'SIZES', 'WIDTH_HEIGHT', 'ELEVATES', 'DIRECTIONS', 'FORMS', 'MARGINS',
           'PADDINGS', 'POSITIONS', 'RESPONSIVE', 'ALIGNMENTS', 'BLURS', 'OPACITIES', 'SHADOWS', 'SPACES', 'RIPPLES',
           'SCROLLS', 'WAVES', 'ZOOMS', 'THEME_HELPERS', 'TYPOGRAPHY', 'TRIGGERS', 'COLOR_HELPERS', 'ALL_HELPERS',
           'MatTheme', 'BeerCssChain']

# %% ../nbs/01_core.ipynb #4894c2b5
from fastcore.utils import *
from fasthtml.common import *
from fasthtml.jupyter import *
from fastlite import *
from fasthtml.common import A, Button as FhButton, I, Span
from .foundations import normalize_tokens, dedupe_preserve_order, stringify, listify, VEnum
from nbdev.showdoc import show_doc

# %% ../nbs/01_core.ipynb #8e02ad09
#| code-fold: true
#| code-fold: true
HEADER_URLS = {
    "beercss_css": "https://cdn.jsdelivr.net/npm/beercss@3.13.1/dist/cdn/beer.min.css",
    "beercss_js": "https://cdn.jsdelivr.net/npm/beercss@3.13.1/dist/cdn/beer.min.js",
    "mdc_js": "https://cdn.jsdelivr.net/npm/material-dynamic-colors@1.1.2/dist/cdn/material-dynamic-colors.min.js",
}

beer_hdrs = (
    Link(href=HEADER_URLS["beercss_css"], rel='stylesheet', type='text/css'),
    Script(src=HEADER_URLS["beercss_js"], type='module'),
    Script(src=HEADER_URLS["mdc_js"], type='module'),
)

# %% ../nbs/01_core.ipynb #2e3ec12e
#| code-fold: true
#| code-fold: true
# All BeerCSS color names
COLOR_NAMES = ['amber', 'blue', 'blue_grey', 'brown', 'cyan', 'deep_orange', 'deep_purple', 
               'green', 'grey', 'indigo', 'light_blue', 'light_green', 'lime', 'orange', 
               'pink', 'purple', 'red', 'teal', 'yellow']

# All shared helpers organized by category
SIZES = ['tiny', 'small', 'medium', 'large', 'extra', 'wrap', 'no_wrap', 'max']
WIDTH_HEIGHT = ['auto_width', 'small_width', 'medium_width', 'large_width',
                'auto_height', 'small_height', 'medium_height', 'large_height']
ELEVATES = ['elevate', 'no_elevate', 'small_elevate', 'medium_elevate', 'large_elevate']
DIRECTIONS = ['horizontal', 'vertical']
FORMS = ['border', 'no_border', 'circle', 'square', 'none', 'fill', 'extend', 'tabbed', 
         'round', 'no_round', 'small_round', 'medium_round', 'large_round',
         'left_round', 'right_round', 'top_round', 'bottom_round']
MARGINS = ['margin', 'no_margin', 'auto_margin', 'tiny_margin', 'small_margin', 'medium_margin', 'large_margin',
           'left_margin', 'right_margin', 'top_margin', 'bottom_margin', 'horizontal_margin', 'vertical_margin']
PADDINGS = ['padding', 'no_padding', 'tiny_padding', 'small_padding', 'medium_padding', 'large_padding',
            'left_padding', 'right_padding', 'top_padding', 'bottom_padding', 'horizontal_padding', 'vertical_padding']
POSITIONS = ['left', 'right', 'center', 'top', 'bottom', 'middle', 'front', 'back']
RESPONSIVE = ['responsive', 's', 'm', 'l']
ALIGNMENTS = ['left_align', 'right_align', 'center_align', 'top_align', 'bottom_align', 'middle_align']
BLURS = ['blur', 'small_blur', 'medium_blur', 'large_blur']
OPACITIES = ['opacity', 'no_opacity', 'small_opacity', 'medium_opacity', 'large_opacity']
SHADOWS = ['shadow', 'left_shadow', 'right_shadow', 'top_shadow', 'bottom_shadow']
SPACES = ['space', 'no_space', 'small_space', 'medium_space', 'large_space']
RIPPLES = ['ripple', 'slow_ripple', 'fast_ripple']
SCROLLS = ['scroll', 'no_scroll']
WAVES = ['wave', 'no_wave']
ZOOMS = ['zoom', 'tiny_zoom', 'small_zoom', 'medium_zoom', 'large_zoom', 'extra_zoom']
THEME_HELPERS = ['light', 'dark', 'primary', 'secondary', 'tertiary', 'transparent',
                 'primary_text', 'primary_border', 'primary_container',
                 'secondary_text', 'secondary_border', 'secondary_container',
                 'tertiary_text', 'tertiary_border', 'tertiary_container',
                 'error', 'error_text', 'error_border', 'error_container',
                 'background', 'surface', 'surface_variant', 'inverse_surface',
                 'inverse_primary', 'inverse_primary_text', 'inverse_primary_border',
                 'black', 'black_text', 'black_border',
                 'white', 'white_text', 'white_border',
                 'transparent_text', 'transparent_border']
TYPOGRAPHY = ['italic', 'bold', 'underline', 'overline', 'upper', 'lower', 'capitalize', 
              'link', 'small_text', 'medium_text', 'large_text']
TRIGGERS = ['active']

# Generate color variants (color1-10, color, color-border, color-text)
COLOR_HELPERS = []
for color in COLOR_NAMES:
    for i in range(1, 11):
        COLOR_HELPERS.append(f'{color}{i}')
    COLOR_HELPERS.extend([color, f'{color}_border', f'{color}_text'])

# Combine all helpers
ALL_HELPERS = (SIZES + WIDTH_HEIGHT + ELEVATES + DIRECTIONS + FORMS + MARGINS + PADDINGS + 
               POSITIONS + RESPONSIVE + ALIGNMENTS + BLURS + OPACITIES + SHADOWS + SPACES + 
               RIPPLES + SCROLLS + WAVES + ZOOMS + THEME_HELPERS + TYPOGRAPHY + TRIGGERS + COLOR_HELPERS)

# %% ../nbs/01_core.ipynb #74645b97
#| code-fold: true
#| code-fold: true
class _ThemeChain:
    """Internal class for building themed headers"""
    def __init__(self, color=None):
        self._color = color
    
    def headers(self, title="App", mode="auto"):
        """Generate FastHTML headers with BeerCSS theming"""
        hdrs = list(beer_hdrs)
        if self._color:
            color_map = {
                'amber': '#ffc107', 'blue': '#2196f3', 'red': '#f44336', 'green': '#4caf50',
                'purple': '#9c27b0', 'orange': '#ff9800', 'pink': '#e91e63', 'cyan': '#00bcd4',
                'teal': '#009688', 'indigo': '#3f51b5', 'lime': '#cddc39', 'grey': '#9e9e9e',
                'brown': '#795548', 'yellow': '#ffeb3b', 'light_blue': '#03a9f4',
                'light_green': '#8bc34a', 'deep_orange': '#ff5722', 'deep_purple': '#673ab7',
                'blue_grey': '#607d8b'
            }
            hex_color = color_map.get(self._color, '#673ab7')
            theme_script = Script(f'''
                window.addEventListener("load", () => {{
                    function initTheme() {{
                        if (typeof ui !== 'undefined') {{
                            try {{
                                ui("theme", "{hex_color}");
                            }} catch (e) {{ console.error("Beer CSS theme error:", e.message); }}
                        }}
                        if (typeof ui !== 'undefined' && "{mode}" !== "auto") {{
                            try {{ ui("mode", "{mode}"); }} catch (e) {{ }}
                        }}
                    }}
                    setTimeout(initTheme, 50);
                    setTimeout(initTheme, 200);
                    setTimeout(initTheme, 500);
                }});
                window.setTheme = function(hexColor) {{
                    if (typeof ui !== 'undefined') {{ try {{ ui("theme", hexColor); }} catch (e) {{ }} }}
                }};
                window.toggleMode = function() {{
                    if (typeof ui !== 'undefined') {{
                        try {{
                            const currentMode = ui("mode");
                            const newMode = currentMode === "dark" ? "light" : "dark";
                            ui("mode", newMode);
                            return newMode;
                        }} catch (e) {{ }}
                    }}
                }};
                window.setMode = function(mode) {{
                    if (typeof ui !== 'undefined') {{ try {{ ui("mode", mode); }} catch (e) {{ }} }}
                }};
                window.toggleNav = function(selector) {{
                    const nav = document.querySelector(selector);
                    if (nav) {{
                        nav.classList.toggle('max');
                        const isOpen = nav.classList.contains('max');
                        const btn = nav.querySelector('button i, button .icon');
                        if (btn) btn.textContent = isOpen ? 'menu_open' : 'menu';
                    }}
                }};
            ''')
            hdrs.append(theme_script)
        hdrs.append(Title(title))
        return tuple(hdrs)

# %% ../nbs/01_core.ipynb #18fbe01e
#| code-fold: true
#| code-fold: true
class _ThemeNamespace:
    """Namespace providing color properties that return _ThemeChain instances"""
    @property
    def amber(self): return _ThemeChain("amber") 
    @property
    def blue(self): return _ThemeChain("blue")
    @property
    def red(self): return _ThemeChain("red")
    @property
    def slate(self): return _ThemeChain("grey")
    @property
    def stone(self): return _ThemeChain("brown")
    @property
    def gray(self): return _ThemeChain("grey")
    @property
    def grey(self): return _ThemeChain("grey")
    @property
    def neutral(self): return _ThemeChain("grey")
    @property
    def rose(self): return _ThemeChain("pink")
    @property
    def orange(self): return _ThemeChain("orange")
    @property
    def green(self): return _ThemeChain("green")
    @property
    def yellow(self): return _ThemeChain("yellow")
    @property
    def violet(self): return _ThemeChain("purple")
    @property
    def purple(self): return _ThemeChain("purple")
    @property
    def zinc(self): return _ThemeChain("blue_grey")
    @property
    def cyan(self): return _ThemeChain("cyan")
    @property
    def teal(self): return _ThemeChain("teal")
    @property
    def indigo(self): return _ThemeChain("indigo")
    @property
    def pink(self): return _ThemeChain("pink")
    @property
    def lime(self): return _ThemeChain("lime")
    @property
    def light_blue(self): return _ThemeChain("light_blue")
    @property
    def light_green(self): return _ThemeChain("light_green")
    @property
    def deep_orange(self): return _ThemeChain("deep_orange")
    @property
    def deep_purple(self): return _ThemeChain("deep_purple")
    @property
    def blue_grey(self): return _ThemeChain("blue_grey")
    @property
    def brown(self): return _ThemeChain("brown")

MatTheme = _ThemeNamespace()

# %% ../nbs/01_core.ipynb #4672930e
#| code-fold: true
#| code-fold: true
class BeerCssChain:
    """Base class for chaining Beer CSS helper classes together"""
    def __init__(self, tokens=None):
        self._tokens = list(tokens or [])
    
    def __iter__(self):
        return iter(self._tokens)
    
    def __str__(self):
        return " ".join(self._tokens)
    
    def __repr__(self):
        return f"BeerCssChain({self._tokens})"

# Generate properties for all Beer CSS helpers
for name in ALL_HELPERS:
    css_name = name.replace('_', '-')
    setattr(BeerCssChain, name, property(lambda self, css=css_name: type(self)(self._tokens + [css])))
