import { attribute, elementDefine, innerHtml, onAttributeChanged } from '../index';
import { SwcHTMLOutputElementBase } from '../elements/base/SwcHTMLOutputElementBase';

@elementDefine({ name: 'swc-for-of-children-output', extends: 'output' })
export class SwcForOfChildrenOutput extends SwcHTMLOutputElementBase {
  @attribute('swc-value') _swcValue: any[] = [];
  private _rowNodes: Node[][] = [];
  @onAttributeChanged('swc-value') onValueChange() { if (!Array.isArray(this._swcValue)) this._swcValue = []; this._swcValue = this.createReactiveProxy(this._swcValue, () => this.renderAll(), (idx, v) => this.updateSingleRow(idx, v)); if (this._masterTplNodes.length === 0) this.initCore(); this.renderAll(); }
  set swcValue(val: any[]) { this._swcValue = val; } get swcValue(): any[] { return this._swcValue; }
  @innerHtml renderTemplate() { return `<slot id="tpl-slot" style="display:none;"></slot>`; }
  connectedCallback() { this.initCore(); if (this._masterTplNodes.length > 0) { this.innerHTML = ''; this.renderAll(); } }
  public updateSingleRow(index: number, newValue: any) { const nodes = this._rowNodes[index]; if (nodes && nodes.length > 0) { nodes.forEach(node => this.applyData(node, newValue, index)); } else { this.renderRow(newValue, index); } }
  private renderRow(item: any, index: number) { if (this._masterTplNodes.length === 0) return; const currentNodes: Node[] = []; this._masterTplNodes.forEach(tplNode => { const clone = tplNode.cloneNode(true); this.appendChild(clone); this.applyData(clone, item, index); currentNodes.push(clone); }); this._rowNodes[index] = currentNodes; }
  private renderAll() { this.innerHTML = ''; this._rowNodes = []; this._swcValue.forEach((item, index) => this.renderRow(item, index)); }
}
