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

/**
 * col-ui — Flex column layout primitive.
 *
 * <col-ui gap="md" align="center">...</col-ui>
 */

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

export class UICol extends UIElement {
  static properties = {
    justify: { type: String, default: 'start',   reflect: true },
    align:   { type: String, default: 'stretch', reflect: true },
    gap:     { type: String, default: 'md',      reflect: true },
    grow:    { type: Boolean, default: false,    reflect: true },
  };
  static template = () => null;

  render() {
    const gap     = this.gap;
    const align   = this.align;
    const justify = this.justify;
    // Only subscribe to breakpoint when at least one prop uses @bp notation.
    const anyR    = gap?.includes('@') || align?.includes('@') || justify?.includes('@');
    const bp      = anyR ? breakpoint.value : '';

    if (gap?.includes('@')) {
      this.style.setProperty('--col-gap', _gapToCss(parseResponsive(gap, bp)));
    } else {
      this.style.removeProperty('--col-gap');
    }

    if (align?.includes('@')) {
      const v = parseResponsive(align, bp);
      this.style.setProperty('--col-align', _flexAlign(v));
      this.style.textAlign = _textAlign(v);
    } else {
      this.style.removeProperty('--col-align');
      this.style.textAlign = '';
    }

    if (justify?.includes('@')) {
      this.style.setProperty('--col-justify', _flexJustify(parseResponsive(justify, bp)));
    } else {
      this.style.removeProperty('--col-justify');
    }
  }
}

const _ALIGN   = { start: 'flex-start', end: 'flex-end', center: 'center', stretch: 'stretch', baseline: 'baseline' };
const _JUSTIFY = { start: 'flex-start', end: 'flex-end', center: 'center', between: 'space-between', 'space-between': 'space-between', 'space-around': 'space-around' };

function _gapToCss(v)     { return (!v || v === '0') ? '0' : /^\d+$/.test(v) ? `var(--a-space-${v})` : `var(--a-gap-${v})`; }
function _flexAlign(v)    { return _ALIGN[v]   ?? v; }
function _textAlign(v)    { return { start: 'start', center: 'center', end: 'end' }[v] ?? ''; }
function _flexJustify(v)  { return _JUSTIFY[v] ?? v; }
