import {CustomElement, defineElement, Host, prop, state} from "../../packages/csx";
import TableComponentStyle from "./table-component.scss";

let tableId = 0;

@defineElement("tripto-table")
export class TableComponent extends CustomElement {

    #columnDefinitions;

    @prop()
    set columns(value) {
        this.#columnDefinitions = value;
    }

    @state() data;

    @prop()
    set data(value) {
        this.data = value;
        this.rows = new Map();
    }
    
    @prop()
    rowKey = (value,index)=>index;
    
    @prop()
    cellRef = ()=>null;
    
    rows = new Map();

    #tableId = tableId++;
    render() {
        console.log(`Table render at for ${this.data?.length??0} rows: ${Date.now()}`);
        return (
            <Host>
                <style>{TableComponentStyle}</style>
                <style>
                    {this.#columnDefinitions?.map((col, idx) => (
                        `#table_${this.#tableId} .cell.cell_${idx} {` +
                        `   flex: ${(col.size ? (`0 0 ${col.size}px`) : `1`)};` +
                        `}`
                    ))}
                </style>
                <section className="table" id={`table_${this.#tableId}`}>
                    <header>
                        <div className="row">
                            {this.#columnDefinitions.map((col, idx) => (
                                <div className={`cell cell_${idx}`}>
                                    {col.headerRender()}
                                </div>
                            ))}
                        </div>
                    </header>
                    <main>
                        {this.data?.map((dataRow,index) => (
                            <div className="row"
                                 key={this.rowKey(dataRow, index)}
                                 ref={(el)=>this.rows.set(this.rowKey(dataRow,index), el)}>
                                {this.#columnDefinitions.map((col, idx) => (
                                    <div className={`cell cell_${idx}`} key={idx} ref={(el)=>this.cellRef(dataRow,idx,el)}>
                                        {col.render(dataRow)}
                                    </div>
                                ))}
                            </div>
                        ))}
                    </main>
                </section>
            </Host>
        );
    }
}