import "../../search/atomic-text/atomic-text.js";
import { html } from "lit";
import { keyed } from "lit/directives/keyed.js";
import { map } from "lit/directives/map.js";
import { ref } from "lit/directives/ref.js";
import { tableElementTagName } from "../table-element-utils.js";
const renderTableLayout = ({ props })=>{
    const { host, listClasses, logger, label } = props;
    const fieldColumns = getFieldTableColumns(props);
    if (!fieldColumns.length) logger.error('atomic-table-element elements missing in the template to display columns.', host);
    return (children)=>html`<table
      class="list-root ${listClasses}"
      part="result-table"
      aria-label=${label}
    >
      <thead part="result-table-heading">
        <tr part="result-table-heading-row">
          ${map(fieldColumns, (column)=>html`<th part="result-table-heading-cell">
              <atomic-text
                .value=${column.getAttribute('label')}
              ></atomic-text>
            </th>`)}
        </tr>
      </thead>
      <tbody part="result-table-body">
        ${children}
      </tbody>
    </table>`;
};
const renderTableRow = ({ props })=>{
    const { key, rowIndex, setRef } = props;
    return (children)=>html`${keyed(key, html`<tr
        .part="result-table-row${rowIndex % 2 === 1 ? ' result-table-row-even' : ' result-table-row-odd'}"
        ${ref((element)=>setRef(element))}
      >
        ${children}
      </tr>`)}`;
};
const renderTableData = ({ props })=>{
    const { renderItem, firstItem, itemRenderingFunction } = props;
    const fieldColumns = getFieldTableColumns(props);
    let currentItemColumns = fieldColumns;
    if (itemRenderingFunction && firstItem) {
        const contentDiv = document.createElement('div');
        const renderedHTML = itemRenderingFunction(firstItem, document.createElement('div'));
        contentDiv.innerHTML = renderedHTML;
        currentItemColumns = Array.from(contentDiv.querySelectorAll(tableElementTagName));
    }
    return html`${map(currentItemColumns, (column, index)=>{
        const label = fieldColumns[index]?.getAttribute('label') || column.getAttribute('label');
        return html`${keyed(`${label}${props.key}`, html`<td part="result-table-cell">${renderItem(column)}</td>`)}`;
    })}`;
};
const getFieldTableColumns = (props)=>{
    if (props.itemRenderingFunction) return getFieldTableColumnsFromRenderingFunction(props);
    return getFieldTableColumnsFromHTMLTemplate(props);
};
const getFieldTableColumnsFromRenderingFunction = (props)=>{
    const { firstItem, itemRenderingFunction } = props;
    const contentOfRenderingFunction = document.createElement('div');
    const contentOfRenderingFunctionAsString = itemRenderingFunction(firstItem, document.createElement('div'));
    contentOfRenderingFunction.innerHTML = contentOfRenderingFunctionAsString;
    return Array.from(contentOfRenderingFunction.querySelectorAll(tableElementTagName));
};
const getFieldTableColumnsFromHTMLTemplate = (props)=>{
    if (!props.templateContentForFirstItem) return [];
    return Array.from(props.templateContentForFirstItem.querySelectorAll(tableElementTagName));
};
export { renderTableData, renderTableLayout, renderTableRow };
