const MAX_MESH_ITEMS = 3;

class Mesh {
  constructor(data) {
    const children = [];
    for (const [i, item] of data.items.entries()) {
      if (i >= MAX_MESH_ITEMS) break;
      children.push({
        ...item,
        type: 'containerDirective',
        name: 'dsfr-doc-page-item-card',
      });
    }
    children.sort((a, b) => {
      const textA = a.text.toLowerCase();
      const textB = b.text.toLowerCase();
      return textA.localeCompare(textB);
    });

    this._node ={
      type: 'htmlContainer',
      tagName: 'div',
      classes: ['dsfr-doc-mesh'],
      children: [
        {
          type: 'heading',
          classes: ['dsfr-doc-mesh__title', 'fr-h3'],
          depth: data.depth ?? 5,
          children: [
            {
              type: 'text',
              value: data.title
            }
          ]
        },
        {
          type: 'htmlContainer',
          tagName: 'div',
          classes: [
            'fr-grid-row',
            'fr-grid-row--gutters',
            'fr-mb-12v',
          ],
          children: children,
        }
      ]
    }
  }

  get node () {
    return this._node;
  }
}

export { Mesh };
