/**
 * Non-side-effect class export for `<text-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/text`
 * (which imports this file + calls `defineIfFree()`).
 *
 * @see ../../USAGE.md#registration--auto-vs-explicit
 */

/**
 * <text-ui variant="heading">Hello World</text-ui>
 * <text-ui truncate>Long text that gets cut off...</text-ui>
 * <text-ui variant="body" lines="3">Multi-line clamped content...</text-ui>
 *
 * Typography wrapper that applies role tokens.
 *
 * Properties:
 *   variant  — body | heading | title | display | caption | label | kicker | code
 *   truncate — single-line truncation with ellipsis
 *   lines    — multi-line clamp count (0 = no clamp)
 */

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

const _SIZE = { sm: 'var(--a-body-sm)', md: 'var(--a-body-md)', lg: 'var(--a-body-lg)' };
function _sizeToCss(v) { return _SIZE[v] ?? v; }

export class UIText extends UIElement {
  static properties = {
    variant:    { type: String,  default: 'body', reflect: true },
    strong:     { type: Boolean, default: false, reflect: true },
    truncate:   { type: Boolean, default: false, reflect: true },
    lines:      { type: Number,  default: 0,     reflect: true },
    // ── v0.6.18 (FB-10) — finer-control overrides on top of `variant` ──
    // Pre-v0.6.18, sizing/coloring/weighting required choosing a different
    // `variant` (e.g. `label-sm` → `caption`). The skill already documents
    // an intuitive overlay API (color="subtle", size="sm", weight="semibold",
    // text-align="center"); v0.6.18 implements it. Each prop is an
    // attribute selector in text.css that overrides the variant default.
    size:       { type: String,  default: '',    reflect: true },
    color:      { type: String,  default: '',    reflect: true },
    weight:     { type: String,  default: '',    reflect: true },
    'text-align': { type: String, default: '',   reflect: true },
  };

  static template = () => null;

  render() {
    if (this.lines > 0) {
      this.style.setProperty('--_text-lines', String(this.lines));
    } else {
      this.style.removeProperty('--_text-lines');
    }

    // Responsive size — e.g. size="sm sm@md lg@lg"
    const size = this.size;
    if (size?.includes('@')) {
      const bp = breakpoint.value; // subscribe only when needed
      this.style.setProperty('--text-size', _sizeToCss(parseResponsive(size, bp)));
    } else {
      this.style.removeProperty('--text-size');
    }
  }
}
