import React from 'react';
import PropTypes from 'prop-types';

import { SORT_ASC, SORT_DESC } from '@/modules/@common/constants/sort';

import { Checkbox, TableCell, TableHead, TableRow, TableSortLabel } from '@/mui/components';

import styles from './styles.module.scss';

export default function EnhancedTableHead(props) {
  const createSortHandler = (property) => (event) => {
    props.onRequestSort(event, property);
  };

  const headCells = [
    {
      id: 'id',
      label: 'Id',
      sortable: true,
    },
    {
      id: 'name',
      label: 'Name',
      sortable: true,
    },
    {
      id: 'publisher',
      label: 'Hub',
      sortable: false,
    },
    {
      id: 'description',
      label: 'Description',
      sortable: true,
    },
    {
      id: 'startTime',
      label: 'Start Time',
      sortable: true,
    },
    {
      id: 'endTime',
      label: 'End Time',
      sortable: true,
    },
    {
      id: 'updatedBy',
      label: 'Updated By',
      sortable: true,
    },
    {
      id: 'status',
      label: 'Status',
      sortable: true,
    },
    {
      id: 'updatedAt',
      label: 'Last Update',
      sortable: true,
    },
    {
      id: 'actions',
      label: '',
      sortable: false,
      autoWidth: true,
      padding: 'none',
    },
  ];

  return (
    <TableHead>
      <TableRow>
        <TableCell padding="checkbox" align="center">
          <Checkbox
            indeterminate={props.numSelected && props.numSelected < props.rowCount}
            checked={props.rowCount && props.numSelected === props.rowCount}
            onChange={props.onSelectAllClick}
            inputProps={{ 'aria-label': 'select all' }}
          />
        </TableCell>
        {headCells.map((headCell) => {
          let { padding } = headCell;

          if (!padding && !headCell.label) {
            padding = 'checkbox';
          }

          return (
            <TableCell
              data-id={`header-${headCell.id}`}
              key={headCell.id}
              padding={padding}
              sortDirection={props.sortBy === headCell.id ? props.sortOrder.toLowerCase() : false}
            >
              {headCell.sortable && (
                <TableSortLabel
                  active={props.sortBy === headCell.id}
                  direction={props.sortBy === headCell.id ? props.sortOrder.toLowerCase() : SORT_ASC}
                  onClick={createSortHandler(headCell.id)}
                >
                  {headCell.label}
                  {props.sortBy === headCell.id ? (
                    <span className={styles.VisuallyHidden}>
                      {props.sortOrder === SORT_DESC ? 'sorted descending' : 'sorted ascending'}
                    </span>
                  ) : null}
                </TableSortLabel>
              )}
              {!headCell.sortable && headCell.label}
            </TableCell>
          );
        })}
      </TableRow>
    </TableHead>
  );
}

EnhancedTableHead.propTypes = {
  numSelected: PropTypes.number.isRequired,
  onRequestSort: PropTypes.func.isRequired,
  onSelectAllClick: PropTypes.func.isRequired,
  sortOrder: PropTypes.oneOf([SORT_ASC, SORT_DESC]).isRequired,
  sortBy: PropTypes.string.isRequired,
  rowCount: PropTypes.number.isRequired,
};
