/**
 * Component used for Table 
 * 
 * @author Ashique
 * 
 * Ensure to follow a minimal standard
 */

import React, { useState, useEffect } from 'react';

import './table-wrapper.scss';


import { getExportData } from './../../utils/generic/generic.utils';

import { ExportReactCSV } from './../../modules/generic/generic-list/ExportReactCSV';

export default function TableWrapper({ columns = [], records = [] }) {

    // Get the export data 
    let exportData = getExportData(records, columns);

    return (<div className='table-wrapper'>

        <div className='page-header'>

            {/*table data export to csc component*/}
            {/* {records && <ExportReactCSV csvData={exportData} />} */}

        </div>


        <table className="styled-table">

            <TableHeader columns={columns} />

            <tbody>

                {
                    records.map((row, index) => {

                        return (<TableRow index={index} key={index} row={row} columns={columns} />)

                    })
                }

            </tbody>
        </table>
    </div>)

}

/**
 * The Table Header Element
 * 
 * @param {*} param0 
 * @returns 
 */
function TableHeader({ columns }) {

    return (
        <thead>
            <tr>
                {columns.map((column, key) => {

                    return (<TableHeaderColumn key={key} column={column} />)
                })}

            </tr>
        </thead>
    )
}


function TableHeaderColumn({ column }) {


    return (<th>
        {column.title}
    </th>
    )
}




/**
 * Table Row Element
 * 
 * @param {*} param0 
 * @returns 
 */
function TableRow({ row, columns, index: rowIndex }) {

    console.log(row, columns);
    return (<tr>

        {
            columns.map((column, index) => {

                return (<TableField rowIndex={rowIndex} key={index} row={row} column={column} />)

            })
        }

    </tr>)
}


/**
 * 
 * 
 * @param {*} param0 
 * @returns 
 */
function TableField({ row, column, rowIndex }) {

    console.log(row[column.field]);

    return (<td className={`${rowIndex}-${rowIndex}`}>

        {column.render ? column.render(row, column, rowIndex) : row[column.field]}

    </td>)

}