import * as React from 'react';
import { ComponentModeWindow, COMPONENT_MODE_OK } from '../common';

export interface MmuiDefaultTableProps {
    columns: unknown; // columns must be an object that use same keys as records ex: { name: 'Companies', value: 'Percent' }
    records: [unknown]; // records should respect columns  keys ex: [{name:'MM', value:'100%'}, {name:'MM-RO': value : 75%}]
    staticUrl: string;
    tableClassNameList: [string];
    mode: string;
    getColumnHeaderRender?: any;
    getColumnDataRender?: any;
    caption?: string;
}

export interface MmuiDefaultTableState {}

export class MmuiDefaultTable<
    P extends MmuiDefaultTableProps,
    S extends MmuiDefaultTableState
> extends React.Component<P, S> {
    // css classes to apply to the rendered table
    tableClassNameList;

    constructor(props) {
        super(props);

        // css classes to apply to the rendered table
        this.tableClassNameList = ['table', 'table-sm', 'mmui-table'];
        if (props.tableClassNameList) {
            this.tableClassNameList = props.tableClassNameList;
        }

        //@ts-ignore
        this.state = {};
    }

    getColumnHeaderRender(colKey, index) {
        if (this.props.getColumnHeaderRender) {
            return this.props.getColumnHeaderRender(colKey, index);
        }

        const records = this.props.records,
            classList: Array<string> = [];
        if (records.length > 0) {
            let value;
            for (let i = 0; i < records.length; i++) {
                value = records[i][colKey];
                if (value !== undefined && value !== null) {
                    if (typeof value === 'number') {
                        classList.push('text-right');
                    }
                    break;
                }
            }
        }

        return (
            <th className={classList.join(' ')} key={`table-head-${index}`}>
                {this.props.columns[colKey]}
            </th>
        );
    }

    getColumnDataRender(record, colKey, index) {
        if (this.props.getColumnDataRender) {
            return this.props.getColumnDataRender(record, colKey, index);
        }

        const value = record[colKey],
            classList: Array<string> = [];
        if (typeof value === 'number') {
            classList.push('text-right');
        }
        return (
            <td className={classList.join(' ')} key={`table-row-data-${index}`}>
                {record[colKey]}
            </td>
        );
    }

    getColumnKeys() {
        return Object.keys(this.props.columns);
    }

    getEmptyRow() {
        return (
            <tr>
                <td
                    className="text-center font-weight-bold"
                    colSpan={this.getColumnKeys().length}
                >
                    No results found.
                </td>
            </tr>
        );
    }

    renderComponentMode(mode, loadingImage) {
        return (
            <ComponentModeWindow
                    mode={mode}
                    loadingGraphicUrl={loadingImage}
                    hasErrorMode
                    hasEmptyMode
                />
        )
    }

    render() {
        const { records, staticUrl, mode, caption } = this.props;

        if (mode && mode !== COMPONENT_MODE_OK) {
            const loadingImage = `${staticUrl}images/mm-loading.gif`;
            return (
                this.renderComponentMode(mode, loadingImage)
            );
        }

        const columnsHeaders = this.getColumnKeys().map((colKey, i) =>
            this.getColumnHeaderRender(colKey, i)
        );

        let rows;
        const hasRows = records && records.length > 0;
        if (hasRows) {
            rows = records.map((record, index) => (
                <tr key={`table-row-${index}`}>
                    {this.getColumnKeys().map((colKey, i) => {
                        return this.getColumnDataRender(
                            record,
                            colKey,
                            `${index}${i}`
                        );
                    })}
                </tr>
            ));
        } else {
            rows = this.getEmptyRow();
        }

        return (
            <table className={this.tableClassNameList.join(' ')}>
                <caption>
                    {caption}
                </caption>
                <thead>
                    <tr>{columnsHeaders}</tr>
                </thead>
                <tbody>{rows}</tbody>
            </table>
        );
    }
}