import { createElement, FunctionComponent } from 'rax';
import View from "rax-view";
import TableCell from "./TableCell";
import { ColumnProps } from './interface';

const TableCellRow: FunctionComponent<any> = (props: any) => {
  const { columns, dataSource, rowIndex, bordered, styles } = props;

  const onRow = (method: string, extraParam) => {
    const { onRow, dataSource, rowIndex } = props;
    if (typeof onRow === "function") {
      const eventMap = onRow(dataSource, rowIndex);
      if (eventMap && typeof eventMap[method] === "function") {
        return eventMap[method](extraParam);
      }
    }
    return null;
  }

  const cells = [];
  columns.forEach((column: ColumnProps) => {
    cells.push(
      <TableCell
        styles={styles}
        bordered={bordered}
        key={column.key}
        rowIndex={rowIndex}
        dataSource={dataSource}
        column={column}
      />
    );
  });

  const defaultStyle = { ...styles.row, ...styles.rowBorder };
  const customStyle = onRow("customStyle", defaultStyle);
  return (
    <View
      style={customStyle || defaultStyle}
      onClick={(event) => { onRow("onClick", event); }}
      onAppear={(event) => { onRow("onAppear", event); }}
      onDisappear={(event) => { onRow("onDisappear", event); }}
      onLongPress={(event) => { onRow("onLongPress", event); }}
    >
      {cells}
    </View>
  );
}

export default TableCellRow;