import { type UseFormReturn } from 'react-hook-form';
import { useTranslation } from 'react-i18next';

import { type TableCellProps, TableSortLabel } from '@mui/material';
import { IconArrowDown } from '@tabler/icons-react';

import TableCell from '../../components/design-system/Table/components/TableCell';
import Tooltip from '../../components/design-system/Tooltip';
import { type FormValues } from '../useHuPagination';

export type HuTableSortingHeaderProps = TableCellProps & {
  id: string;
  disabled?: boolean;
  tooltipTitle?: string;
};

/** Returns a sortable TableSortingHeader component connected to useHuPagination's form state. */
const useHuServerTableSorting = ({
  form,
  handleChangeSort,
}: {
  form: UseFormReturn<FormValues, undefined>;
  handleChangeSort: (newOrderBy: string) => void;
}) => {
  const { watch } = form;
  const params = watch('params');
  const { order, orderBy } = params;
  const { t } = useTranslation('material_hu_only');

  const getTooltipTitle = (property: string) => {
    if (orderBy === property) {
      if (order === 'ASC') {
        return t('table_sorting.sort_by_a_z');
      } else if (order === 'DESC_NULLS_LAST') {
        return t('table_sorting.sort_by_z_a');
      }
    }
    return t('table_sorting.sort_by');
  };

  const TableSortingHeader = ({
    children,
    id,
    disabled,
    tooltipTitle = getTooltipTitle(id),
    ...rest
  }: HuTableSortingHeaderProps) => (
    <TableCell
      {...rest}
      sortDirection={orderBy === id && order === 'ASC' ? 'asc' : 'desc'}
      sx={{ ...rest.sx, pr: 0 }}
      headerCell
    >
      <Tooltip
        description={tooltipTitle}
        disableTooltip={!tooltipTitle}
        direction="bottom"
      >
        <TableSortLabel
          active={orderBy === id && !!order}
          direction={
            (orderBy === id && (order === 'ASC' ? 'asc' : 'desc')) || 'asc'
          }
          disabled={disabled}
          IconComponent={IconArrowDown}
          onClick={() => handleChangeSort(id)}
          sx={{
            '& .MuiTableSortLabel-icon': {
              width: 16,
              height: 16,
            },
            '&:hover': {
              color: theme => theme.palette.textColors?.neutralText,
              '& .MuiTableSortLabel-icon': {
                color: theme => theme.palette.textColors?.neutralTextDisabled,
              },
            },
          }}
        >
          {children}
        </TableSortLabel>
      </Tooltip>
    </TableCell>
  );

  return TableSortingHeader;
};

export default useHuServerTableSorting;