import React from 'react';
import PropTypes from 'prop-types';
import TableCell from '@material-ui/core/TableCell';
import TableHead from '@material-ui/core/TableHead';
import TableRow from '@material-ui/core/TableRow';
import TableSortLabel from '@material-ui/core/TableSortLabel';
import Tooltip from '@material-ui/core/Tooltip';
import { noop } from 'node-noop';

const rows = [
  {
    id: 'firstName', numeric: false, label: 'First name'
  },
  {
    id: 'lastName', numeric: false, label: 'Last name'
  },
  {
    id: 'email', numeric: false, label: 'Email address'
  },
  {
    id: 'type', numeric: false, label: 'User type'
  },
];

const UsersTableHead = ({ order, orderBy, onRequestSort }) => {
  const createSortHandler = property => (event) => {
    onRequestSort(event, property);
  };

  return (
    <TableHead>
      <TableRow>
        {rows.map(row => (
          <TableCell
            key={row.id}
            sortDirection={orderBy === row.id ? order : false}
          >
            <Tooltip
              title="Sort"
              placement="bottom-start"
              enterDelay={300}
            >
              <TableSortLabel
                active={orderBy === row.id}
                direction={order}
                onClick={createSortHandler(row.id)}
              >
                {row.label}
              </TableSortLabel>
            </Tooltip>
          </TableCell>
        ), this)}
      </TableRow>
    </TableHead>
  );
};

UsersTableHead.propTypes = {
  onRequestSort: PropTypes.func,
  order: PropTypes.string,
  orderBy: PropTypes.string,
};
UsersTableHead.defaultProps = {
  onRequestSort: noop,
  order: 'desc',
  orderBy: 'firstName',
};

export default UsersTableHead;