import React from 'react';
import cn from 'classnames';
import moment from 'moment';

import { genUniqId } from './helpers';
import './scss/table.scss';

const TableRow = ({
  rowData, columns, checked, onSelectionChanged, onRowClick,
}) => {
  const defaultFormatFunction = (val) => val;
  const row = columns.map(({ key, displayFormat = defaultFormatFunction }) => {
    const { value } = rowData[key];
    const dataStyle = { ...rowData[key].style };
    if (moment.isMoment(value)) {
      return <td
          style={dataStyle}
          key={`${rowData.rowId}_${genUniqId()}`}
        >
          {value.format(displayFormat)}
        </td>;
    }
    return <td style={dataStyle} key={`${rowData.rowId}_${genUniqId()}`}>
      {displayFormat(value)}
    </td>;
  });
  const handleClick = () => {
    if (onSelectionChanged) {
      onSelectionChanged(!checked);
    }
    if (onRowClick) {
      onRowClick(rowData);
    }
  };
  const rowClassNames = cn({
    'omni-table__body__row': true,
    'omni-table__body__row_checked': checked,
  });

  return <tr className={rowClassNames} onClick={handleClick} >{row}</tr>;
};

export default TableRow;