import Tooltip from '@design-system/Tooltip';
import useOverflowed from '@hooks/useOverflowed';
import { Stack, Typography, useTheme } from '@mui/material';
import { IconInfoCircle } from '@tabler/icons-react';

import { adjustedCopetin, tooltipSize } from '../constants';
import { type CopetinTextProps } from '../types';

const CopetinText = ({
  id,
  copetin = '',
  copetinTooltip = '',
  variant = 'M',
  withEllipsis,
  overflow = 'hidden',
  sx = {},
}: CopetinTextProps) => {
  const theme = useTheme();
  const { ref: copetinRef, overflowed: copetinOverflowed } = useOverflowed();

  if (!copetin) return null;

  return (
    <Stack sx={sx}>
      <Tooltip
        disableTooltip={overflow !== 'tooltip' || !copetinOverflowed}
        title={copetin}
      >
        <Typography
          id={id}
          ref={copetinRef}
          variant={adjustedCopetin[variant]}
          sx={{
            color: theme.palette.new.text.neutral.lighter,
            gap: 1,
            ...(withEllipsis && {
              overflow: 'hidden',
              textOverflow: 'ellipsis',
              whiteSpace: 'nowrap',
            }),
          }}
        >
          {copetin}
        </Typography>
      </Tooltip>
      {copetinTooltip && (
        <Tooltip
          direction="top"
          description={copetinTooltip}
        >
          <IconInfoCircle
            size={tooltipSize[variant].copetin}
            style={{
              minWidth: tooltipSize[variant].copetin,
              color: theme.palette.new.text.neutral.lighter,
            }}
          />
        </Tooltip>
      )}
    </Stack>
  );
};

export default CopetinText;
