/**
 * @deprecated — no Hugo equivalent.
 * Table cell with up/down position controls. Hard dependency on `useWidgetsPermissions`.
 * Move with its consumers (`Forms`, `Widgets`) once a Hugo design is defined.
 */
import KeyboardArrowDownIcon from '@material-hu/icons/material/KeyboardArrowDown';
import KeyboardArrowUpIcon from '@material-hu/icons/material/KeyboardArrowUp';
import IconButton from '@material-hu/mui/IconButton';
import TableCell from '@material-hu/mui/TableCell';

import useWidgetsPermissions from 'src/pages/dashboard/Widgets/hooks/useWidgetsPermissions';
import { useLokaliseTranslation } from 'src/utils/i18n';

type Props = {
  onMove: (newPosition: number) => void;
  position: number;
  total: number;
  isLoading: boolean;
  checkPermissions?: boolean;
};

const TablePositionCell = ({
  onMove,
  position,
  total,
  isLoading,
  checkPermissions = true,
}: Props) => {
  const { t } = useLokaliseTranslation('backoffice_only');
  const { canEditWidgets } = useWidgetsPermissions();

  const isFirst = position === 1;
  const isLast = position === total;
  const showControls = checkPermissions ? canEditWidgets : true;

  return (
    <TableCell
      align="center"
      sx={{ whiteSpace: 'nowrap', py: 1 }}
    >
      {showControls && (
        <IconButton
          title={t('backoffice_only:table_position.move_up')}
          onClick={e => {
            e.stopPropagation();
            onMove(position - 1);
          }}
          disabled={isFirst || isLoading}
        >
          <KeyboardArrowUpIcon fontSize="small" />
        </IconButton>
      )}
      {position}
      {showControls && (
        <IconButton
          title={t('backoffice_only:table_position.move_down')}
          onClick={e => {
            e.stopPropagation();
            onMove(position + 1);
          }}
          disabled={isLast || isLoading}
        >
          <KeyboardArrowDownIcon fontSize="small" />
        </IconButton>
      )}
    </TableCell>
  );
};

export default TablePositionCell;