/**
 * 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')
 */

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

const _SPACE = { none: '0', xs: 'var(--a-space-1)', sm: 'var(--a-space-2)', md: 'var(--a-space-4)', lg: 'var(--a-space-6)', xl: 'var(--a-space-10)' };
function _spaceToCss(v) { return _SPACE[v] ?? (/^\d+$/.test(v ?? '') ? `var(--a-space-${v})` : 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)));
    } else {
      this.style.removeProperty('--block-padding');
    }

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