import React from 'react'
import withDefaults from '../utils/with-defaults'
import useTheme from '../use-theme'
import TableCell from './table-cell'
import { useTableContext } from './table-context'

interface Props {
  hover: boolean
  emptyText: string
  onRow: (row: any, index: number) => void
  onCell: (cell: any, index: number, colunm: number) => void
  data: Array<any>
  selected?: number
}

const defaultProps = {
  className: ''
}

type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>
export type TableBodyProps = Props & typeof defaultProps & NativeAttrs

export type cellActions = {
  remove: () => void
}

export type cellData = {
  row: number
  column: number
  value: any
}

const TableBody: React.FC<TableBodyProps> = ({
  data,
  hover,
  emptyText,
  selected,
  onRow,
  onCell
}) => {
  const theme = useTheme()
  const { columns } = useTableContext()
  const rowClickHandler = (row: any, index: number) => {
    onRow(row, index)
  }

  return (
    <tbody>
      {data.map((row, index) => {
        return (
          <tr
            key={`tbody-row-${index}`}
            className={(hover ?? 'hover') + (selected === index ? ' selected' : '')}
            onClick={() => rowClickHandler(row, index)}
          >
            <TableCell
              columns={columns}
              row={row}
              rowIndex={index}
              emptyText={emptyText}
              onCellClick={onCell}
            />
          </tr>
        )
      })}
      <style jsx>{`
        tr {
          transition: background-color 0.25s ease;
        }

        tr.hover:hover {
          background-color: ${theme.palette.accents_1};
        }

        tr :global(td) {
          padding: 0 ${theme.layout.gapHalf};
          border-bottom: 1px solid ${theme.palette.border};
          color: ${theme.palette.accents_10};
          font-size: 0.875rem;
          text-align: left;
        }

        tr :global(.cell) {
          min-height: 3.125rem;
          display: flex;
          -webkit-box-align: center;
          align-items: center;
          flex-flow: row wrap;
        }
      `}</style>
    </tbody>
  )
}

const MemoTableBody = React.memo(TableBody)

export default withDefaults(MemoTableBody, defaultProps)