import React from 'react'
import { DropDownInRowComponent} from "../../additional-addons"
import './table-row.styles.scss'

const TableRow = (props) => {
    /**
     * dataColumnCount: actual number of fields in each data set/row
     * visible column count: # of column as determined from the viewport size
     * actionColumn: determines last column of individual action to be present
     * rowformatters: delegate call to the view to help in rendering individual cells
     **/ 
    const {idkey, visibleColumnCount, dataColumnCount, hiddenColumnCount, expanded, rowIndex, onExpandRow, actionColumn,...otherProps} = props 
    const {rowMenu, columnNamesInOrder, rowFormatters, rowIsLoading = false , workingAtRow = -1} = otherProps
    /**columnNamesToDisplay: to be displayed column names
     * original columnNamesInOrder now contains only the hidden elememts that form the child row
      */
    const hiddenFieldNames = columnNamesInOrder.slice(visibleColumnCount)
    const firstField = columnNamesInOrder.shift()

    const extraRow = () => (
        <tr className="child-row">
            <td className="child-col" data-row={rowIndex} colSpan={visibleColumnCount}>
                <ul className="dtr-details">
                    {
                        hiddenFieldNames.map( ({label, field}, localIndex) => {
                            const formatter = rowFormatters[visibleColumnCount + localIndex]                        
                            // console.log(`formatter at: ${visibleColumnCount + localIndex - 1} ${visibleColumnCount} ${localIndex}`, format)
                            return (
                                    <li key={`${label}-${localIndex}`} data-dt-row={rowIndex} 
                                        data-dt-column={visibleColumnCount + localIndex}>
                                        <span className="dtr-title">{label}</span> 
                                        <span className="dtr-data">{formatter(rowIndex, field)}</span>
                                    </li>
                                )
                            }
                        )
                    }
                    {
                        /**
                         *  +1 as first field was removed before entering this block 
                         * visibleColumnCount < dataColumnCount + 1 : +1 as to consider the action column count, when it is configured to be shown
                         * */
                        actionColumn ? (
                            <li data-dtr-index="8" data-dt-row={rowIndex} data-dt-column={columnNamesInOrder.length}>
                                <span className="dtr-title">Action</span> 
                                <span className="dtr-data">
                                    <DropDownInRowComponent menuData={rowMenu} rowIsLoading={rowIsLoading}
                                     dataIndex={rowIndex} workingAtRow={workingAtRow}
                                     expandedRow={expanded && (visibleColumnCount < dataColumnCount + 1)}
                                     />
                                </span>
                            </li>
                        ): null
                        
                    }
                </ul>
            </td>
        </tr>
    )

    return (
        <React.Fragment key={idkey}>
            
            <tr  className={`${rowIndex % 2 === 0 ? 'even' : 'odd'}${expanded ? ' parent' : ''}`}>
                {/* first column */}
                <td className="dtr-control" data-row={rowIndex} onClick={onExpandRow}>
                    {rowFormatters[0](rowIndex,firstField.field)}
                </td>

                {
                    /** subsequent columns */    
                    columnNamesInOrder.map(({field}, index) => {
                        const format = rowFormatters[index + 1]                        
                        return (<td data-dt-column={index + 1} data-row={rowIndex} key={`${idkey}col${index + 1}`}>{format(rowIndex, field)}</td>)
                        
                    })
                }
                
                {
                    actionColumn ? (
                        <td className="action-control" data-row={rowIndex}>
                            <DropDownInRowComponent menuData={rowMenu} rowIsLoading={rowIsLoading} 
                                dataIndex={rowIndex} workingAtRow={workingAtRow} 
                                expandedRow={expanded && (visibleColumnCount < dataColumnCount + 1)}/>
                        </td>): null
                }
            </tr>
            { expanded && (visibleColumnCount < dataColumnCount + 1) ? extraRow() : null}
        </React.Fragment>
    )
}

export default TableRow