import { useTranslation } from 'react-i18next';

import Link from '@design-system/Link';
import TableCell from '@design-system/Table/components/TableCell';
import Tooltip from '@design-system/Tooltip';
import {
  linkClasses,
  Stack,
  type TableCellProps,
  Typography,
  useTheme,
} from '@mui/material';
import { IconUsers } from '@tabler/icons-react';

import useOverflowed from '../../../../../hooks/useOverflowed';
import { typography } from '../../../../../theme/hugo/typography';

type HeatmapHeaderCellProps = {
  title: string;
  subtitle: string | null;
  participantsAmount: number | null;
  onClick?: () => void;
} & TableCellProps;

const HeatmapHeaderCell = ({
  title,
  subtitle,
  participantsAmount,
  onClick,
  ...props
}: HeatmapHeaderCellProps) => {
  const { i18n } = useTranslation();
  const theme = useTheme();

  const { ref: subtitleRef, overflowed: isSubtitleOverflowed } =
    useOverflowed();

  const { ref: titleRef, overflowed: isTitleOverflowed } = useOverflowed();

  return (
    <TableCell {...props}>
      <Stack sx={{ textAlign: 'inherit', '& > *': { textAlign: 'inherit' } }}>
        {!!subtitle && (
          <Tooltip
            disableTooltip={!isSubtitleOverflowed}
            title={subtitle}
          >
            <Typography
              ref={subtitleRef}
              variant="globalXXS"
              sx={{
                color: theme.palette.new.text.neutral.lighter,
                gap: 1,
                overflow: 'hidden',
                whiteSpace: 'nowrap',
                textOverflow: 'ellipsis',
              }}
            >
              {subtitle}
            </Typography>
          </Tooltip>
        )}
        <Tooltip
          disableTooltip={!isTitleOverflowed}
          title={title}
        >
          {onClick && (
            <Link
              ref={titleRef}
              component="button"
              underline="hover"
              onClick={onClick}
              hasIcon={false}
              sx={{
                textAlign: 'inherit',
                [`.${linkClasses.button}`]: {
                  overflow: 'hidden',
                  textOverflow: 'ellipsis',
                  whiteSpace: 'nowrap',
                  fontWeight: 'fontWeightSemiBold',
                  fontSize: (typography as any).globalS!.fontSize,
                },
              }}
            >
              {title}
            </Link>
          )}
          {!onClick && (
            <Typography
              ref={titleRef}
              variant="globalS"
              sx={{
                color: theme.palette.new.text.neutral.default,
                textOverflow: 'ellipsis',
                overflow: 'hidden',
                whiteSpace: 'nowrap',
                width: '100%',
                display: 'block',
              }}
            >
              {title}
            </Typography>
          )}
        </Tooltip>
        {!!participantsAmount && (
          <Stack
            direction="row"
            alignItems="center"
            gap={1}
          >
            <IconUsers
              size={16}
              color={theme.palette.new.text.neutral.lighter}
            />
            <Typography
              variant="globalXS"
              sx={{
                color: theme.palette.new.text.neutral.lighter,
              }}
            >
              {Intl.NumberFormat(i18n.language).format(participantsAmount)}
            </Typography>
          </Stack>
        )}
      </Stack>
    </TableCell>
  );
};

export default HeatmapHeaderCell;
