import { __decorate } from 'tslib';
import { html } from 'lit';
import { property, state } from 'lit/decorators.js';
import { classMap } from 'lit/directives/class-map.js';
import SgdsElement from '../../base/sgds-element.js';
import css_248z from './table.js';
import { HasSlotController } from '../../utils/slot.js';
import { provide } from '@lit/context';
import { TableHeaderBackgroundContext } from './table-context.js';

/**
 * @summary Table is used for displaying collections of data in organized rows and columns.
 * It supports two rendering methods: supply an array of data for automatic table generation, or use the slot to insert custom table elements for full structural control.
 *
 * @slot - Insert custom table elements (such as rows, headers, or cells) to define the table structure manually.
 */
class SgdsTable extends SgdsElement {
    constructor() {
        super(...arguments);
        /**
         * Array of strings to populate row header cells.
         * @type {string[]}
         */
        this.rowHeader = [];
        /**
         * Array of strings to populate column header cells.
         * Only used when `headerPosition` is set to "vertical" or "both".
         * @type {string[]}
         */
        this.columnHeader = [];
        /**
         * Two-dimensional array of strings or numbers to populate table data cells.
         * @type {Array<(string | number)[]>}
         */
        this.tableData = [];
        /**
         * Defines the placement of headers in the table.
         * Use "horizontal" for top headers only, "vertical" for left headers only,
         * or "both" for both row and column headers.
         * @type {"horizontal" | "vertical" | "both"}
         * @default "horizontal"
         */
        this.headerPosition = "horizontal";
        /**
         * Enables background styling on horizontal header rows.
         * When true, applies background color to header cells for better visual distinction.
         * @type {boolean}
         * @default false
         */
        this.headerBackground = false;
        /**
         * Enables borders around table cells.
         * When true, displays visible borders between all table cells.
         * @type {boolean}
         * @default false
         */
        this.tableBorder = false;
        /**
         * Controls the CSS `table-layout` algorithm.
         * Use "auto" to let the browser size columns based on content, or "fixed" to distribute column widths evenly regardless of content.
         * @type {"auto" | "fixed"}
         * @default "auto"
         */
        this.layout = "auto";
        /**
         * Indicates the presence of the default slot.
         * Used for server-side rendering to determine table structure.
         * @type {boolean}
         * @internal
         * @default false
         */
        this.hasDefaultSlot = false;
        this._headerBackground = false;
        /** @internal */
        this.hasSlotController = new HasSlotController(this, "[default]");
    }
    connectedCallback() {
        super.connectedCallback();
    }
    updated() {
        if (!this.hasDefaultSlot)
            this.hasDefaultSlot = this.hasSlotController.test("[default]");
        this._headerBackground = this.headerBackground;
    }
    _renderTable() {
        if (this.headerPosition === "horizontal") {
            return html `
        <thead>
          <tr>
            ${this.rowHeader.map((header) => html ` <th><div>${header}</div></th> `)}
          </tr>
        </thead>
        <tbody>
          ${this.tableData.map(row => html `
              <tr>
                ${row.map((cell) => html `<td><div>${cell}</div></td>`)}
              </tr>
            `)}
        </tbody>
      `;
        }
        if (this.headerPosition === "both") {
            return html `
        <thead>
          <tr>
            <th><div></div></th>
            ${this.rowHeader.map((header) => html ` <th><div>${header}</div></th> `)}
          </tr>
        </thead>
        <tbody>
          ${this.tableData.map((row, index) => html `
              <tr>
                <th><div>${this.columnHeader[index]}</div></th>
                ${row.map((cell) => html `<td><div>${cell}</div></td>`)}
              </tr>
            `)}
        </tbody>
      `;
        }
        if (this.headerPosition === "vertical") {
            const flippedTableData = this.tableData[0].map((_, colIndex) => this.tableData.map(row => row[colIndex]));
            return html `
        ${flippedTableData.map((row, index) => html `
            <tr>
              <th><div>${this.columnHeader[index]}</div></th>
              ${row.map((cell) => html `<td><div>${cell}</div></td>`)}
            </tr>
          `)}
      `;
        }
    }
    render() {
        return html `
      <div
        class=${classMap({
            "table-responsive": this.responsive === "always",
            "table-responsive-sm": this.responsive === "sm",
            "table-responsive-md": this.responsive === "md",
            "table-responsive-lg": this.responsive === "lg",
            "table-responsive-xl": this.responsive === "xl"
        })}
        tabindex="0"
      >
        <div role="table">
          <slot id="table-slot" class=${classMap({ table: true, "no-border": !this.hasDefaultSlot })}></slot>

          ${!this.hasDefaultSlot
            ? html `<table class="table">
                ${this._renderTable()}
              </table>`
            : ""}
        </div>
      </div>
    `;
    }
}
SgdsTable.styles = [...SgdsElement.styles, css_248z];
__decorate([
    property({ type: String, reflect: true })
], SgdsTable.prototype, "responsive", void 0);
__decorate([
    property({ type: Array })
], SgdsTable.prototype, "rowHeader", void 0);
__decorate([
    property({ type: Array })
], SgdsTable.prototype, "columnHeader", void 0);
__decorate([
    property({ type: Array })
], SgdsTable.prototype, "tableData", void 0);
__decorate([
    property({ type: String, reflect: true })
], SgdsTable.prototype, "headerPosition", void 0);
__decorate([
    property({ type: Boolean, reflect: true })
], SgdsTable.prototype, "headerBackground", void 0);
__decorate([
    property({ type: Boolean, reflect: true })
], SgdsTable.prototype, "tableBorder", void 0);
__decorate([
    property({ type: String, reflect: true })
], SgdsTable.prototype, "layout", void 0);
__decorate([
    property({ type: Boolean })
], SgdsTable.prototype, "hasDefaultSlot", void 0);
__decorate([
    provide({ context: TableHeaderBackgroundContext }),
    state()
], SgdsTable.prototype, "_headerBackground", void 0);

export { SgdsTable, SgdsTable as default };
//# sourceMappingURL=sgds-table.js.map
