import { FC } from 'react';

import Stack from '@material-hu/mui/Stack';
import TableCell from '@material-hu/mui/TableCell';
import TableSortLabel from '@material-hu/mui/TableSortLabel';

import HuTextInfoTooltip from '../HuTextInfoTooltip';

/** @deprecated — Use HuTableSortingHeader from @material-hu/hooks/TableSorting/useHuServerTableSorting instead */
type TableSortingHeaderProps = {
  id: string;
  order: string;
  orderBy: string;
  text: string;
  onChangeOrder: Function;
  enabled?: boolean;
  align?: 'left' | 'center' | 'right';
  tooltipText?: string;
  sx?: object;
};

/** @deprecated — Use HuTableSortingHeader from @material-hu/hooks/TableSorting/useHuServerTableSorting instead */
const TableSortingHeader: FC<TableSortingHeaderProps> = props => {
  const {
    id,
    order,
    orderBy,
    text,
    onChangeOrder,
    enabled = true,
    align = 'left',
    tooltipText,
    sx = { width: '200px' },
  } = props;

  return (
    <TableCell
      sortDirection={orderBy === id && order === 'ASC' ? 'asc' : 'desc'}
      sx={{ ...sx }}
      align={align}
    >
      <Stack
        sx={{
          flexDirection: 'row',
          alignItems: 'center',
          textWrap: 'balance',
        }}
      >
        {enabled && (
          <TableSortLabel
            active={orderBy === id}
            direction={orderBy === id && order === 'ASC' ? 'asc' : 'desc'}
            onClick={() => onChangeOrder(id)}
          >
            {text}
          </TableSortLabel>
        )}
        {!enabled && text}
        {tooltipText && <HuTextInfoTooltip tooltipText={tooltipText} />}
      </Stack>
    </TableCell>
  );
};

export default TableSortingHeader;