/**
 * Non-side-effect class export for `<block-ui>`.
 *
 * Importing this file gives you the class(es) without auto-registering the tag.
 * Useful for test isolation, subclassing with tag-name override, or selective
 * composition.
 *
 * The auto-register path stays at `@adia-ai/web-components/components/block`
 * (which imports this file + calls `defineIfFree()`).
 *
 * @see ../../USAGE.md#registration--auto-vs-explicit
 */

/**
 * <block-ui padding="md" margin="lg">Content here</block-ui>
 *
 * Generic padded/margined content wrapper. Pure CSS component.
 *
 * Properties:
 *   padding — none | xs | sm | md | lg | xl (default 'md')
 *   margin  — none | xs | sm | md | lg | xl (default 'none')
 *
 * Values resolve to the parametric --a-{padding,margin}-{xs..xl} scale
 * (foundation/space.css), unified with the global [padding]/[margin] attribute
 * API: md = 24px @k=1, tracks --a-{padding,margin}-k. The `@bp` responsive
 * path below emits the same tokens as the static block.css rules.
 */

import { UIElement } from '../../core/element.js';
import { parseResponsive, breakpoint } from '../../core/responsive.js';

const _NAMED = new Set(['xs', 'sm', 'md', 'lg', 'xl']);
/** Resolve a (responsive-parsed) padding/margin value to CSS for dimension
 *  `dim` ('padding' | 'margin'). Named rungs map to the parametric
 *  --a-{dim}-{xs..xl} scale (foundation/space.css) so this responsive JS path
 *  AGREES with the static block.css rules + the global [padding]/[margin]
 *  attribute API; bare integers stay literal --a-space-N rungs; 'none' → 0. */
function _spaceToCss(v, dim) {
  if (v == null || v === '') return '';
  if (v === 'none') return '0';
  if (_NAMED.has(v)) return `var(--a-${dim}-${v})`;
  if (/^\d+$/.test(v)) return `var(--a-space-${v})`;
  return v;
}

export class UIBlock extends UIElement {
  static properties = {
    padding: { type: String, default: 'md',   reflect: true },
    margin:  { type: String, default: 'none', reflect: true },
  };

  static template = () => null;

  render() {
    const padding = this.padding;
    const margin  = this.margin;
    const anyR    = padding?.includes('@') || margin?.includes('@');
    const bp      = anyR ? breakpoint.value : '';

    if (padding?.includes('@')) {
      this.style.setProperty('--block-padding', _spaceToCss(parseResponsive(padding, bp), 'padding'));
    } else {
      this.style.removeProperty('--block-padding');
    }

    if (margin?.includes('@')) {
      this.style.setProperty('--block-margin', _spaceToCss(parseResponsive(margin, bp), 'margin'));
    } else {
      this.style.removeProperty('--block-margin');
    }
  }
}
