import React from 'react';
import { RowRendererParams } from './interface';
import styles from './Table.less';
import _ from 'lodash';
import Cell from './Cell';

const renderBodyCell = ({ column, columnIndex, rowData, rowIndex, key }) => {
    const columnData: any = rowData.rowData[columnIndex]; // 列数据
    const cellData: any = columnData.cellValueList; // 列数据
    let text = '';
    if (Array.isArray(cellData) && cellData.length > 0) {
        text = cellData[0].text;
    }
    const { width = 200, fixed } = column;
    const style: any = {
        display: 'inline-block',
        width: '200px',
    };
    if (fixed) {
        style.position = 'sticky';
        style.left = 0;
    }
    return (
        <div key={key} style={style}>
            {text}
        </div>
    );
};
export default function defaultRowRenderer({
    rowClassName,
    columns,
    rowIndex,
    key,
    onRowClick,
    onRowDoubleClick,
    onRowMouseOut,
    onRowMouseOver,
    onRowRightClick,
    rowData,
    rowStyle,
}: RowRendererParams) {
    const a11yProps: any = { 'aria-rowindex': rowIndex + 1 };

    if (onRowClick || onRowDoubleClick || onRowMouseOut || onRowMouseOver || onRowRightClick) {
        a11yProps['aria-label'] = 'row';
        a11yProps.tabIndex = 0;

        if (onRowClick) {
            a11yProps.onClick = (event) => onRowClick({ event, rowIndex, rowData });
        }
        if (onRowDoubleClick) {
            a11yProps.onDoubleClick = (event) => onRowDoubleClick({ event, rowIndex, rowData });
        }
        if (onRowMouseOut) {
            a11yProps.onMouseOut = (event) => onRowMouseOut({ event, rowIndex, rowData });
        }
        if (onRowMouseOver) {
            a11yProps.onMouseOver = (event) => onRowMouseOver({ event, rowIndex, rowData });
        }
        if (onRowRightClick) {
            a11yProps.onContextMenu = (event) => onRowRightClick({ event, rowIndex, rowData });
        }
    }

    return (
        <div {...a11yProps} className={rowClassName} key={key} role="row" style={rowStyle}>
            {columns.map((column, columnIndex) =>
                renderBodyCell({
                    column,
                    columnIndex,
                    rowData,
                    rowIndex,
                    key,
                }),
            )}
        </div>
    );
}