import TableCell from '@mui/material/TableCell'
import TableRow from '@mui/material/TableRow'
import _get from 'lodash/get'
import _identity from 'lodash/identity'
import React from 'react'

import tableConfig from './tableConfig'

const Row = ({
  row,
  handleDetailsInfo,
  columns = [],
  hideDetailsButton,
}: RowPropsTypes) => (
  <TableRow sx={{ '& > *': { borderBottom: 'unset' } }}>
    {tableConfig(columns).body.map((column: ITableBodyType, index: number) => (
      <TableCell
        component="th"
        scope="row"
        key={index}
        onClick={e => {
          const { columnProps, component }: IRowReturnType = column(row)
          const onCellClick = columnProps?.onCellClick || _identity
          const componentProps = _get(component, 'props', {})

          onCellClick(componentProps, e)
        }}
      >
        {column(row).component}
      </TableCell>
    ))}
    {!hideDetailsButton && (
      <TableCell component="th" scope="row">
        <button
          type="button"
          className="order-details-button"
          onClick={() => handleDetailsInfo(row.id)}
        >
          Details
        </button>
      </TableCell>
    )}
  </TableRow>
)

export default Row