import React from 'react';

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

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

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

type EnhancedTableHeadProps = {
  sortBy: string;
  sortOrder: typeof SORT_ASC | typeof SORT_DESC;
  onRequestSort: (event: React.MouseEvent<HTMLButtonElement>, property: string) => void;
};

export default function EnhancedTableHead({ sortBy, sortOrder, onRequestSort }: EnhancedTableHeadProps) {
  const headCells = [
    {
      id: 'id',
      label: 'Id',
      sortable: true,
    },
    {
      id: 'platform',
      label: 'Platform',
      sortable: false,
    },
    {
      id: 'name',
      label: 'Publish Destination Name',
      sortable: true,
    },
    {
      id: 'publisher',
      label: 'Hub',
      sortable: false,
    },
    {
      id: 'status',
      label: 'Status',
      sortable: false,
    },
    {
      id: 'visibility',
      label: 'Visibility',
      sortable: false,
    },
  ];

  const createSortHandler = (property: string) => (event: React.MouseEvent<HTMLButtonElement>) => {
    onRequestSort(event, property);
  };

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