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 { adjustedDescription, tooltipSize } from '../constants';
import { type DescriptionTextProps } from '../types';

const DescriptionText = ({
  id,
  description = '',
  descriptionTooltip = '',
  variant = 'M',
  withEllipsis,
  overflow = 'hidden',
  date = '',
  sx = {},
}: DescriptionTextProps) => {
  const theme = useTheme();
  const { ref: descriptionRef, overflowed: descriptionOverflowed } =
    useOverflowed();

  if (!description && !date) return null;

  return (
    <Stack sx={sx}>
      {date && (
        <Typography
          variant={adjustedDescription[variant]}
          sx={{ color: theme.palette.new.text.neutral.lighter }}
        >
          {date} <span style={{ color: 'inherit' }}>•</span>
        </Typography>
      )}
      {description && (
        <>
          <Tooltip
            disableTooltip={overflow !== 'tooltip' || !descriptionOverflowed}
            description={description}
          >
            <Typography
              id={id}
              ref={descriptionRef}
              variant={adjustedDescription[variant]}
              sx={{
                color: theme.palette.new.text.neutral.lighter,
                ...(withEllipsis && {
                  display: '-webkit-box',
                  WebkitBoxOrient: 'vertical',
                  WebkitLineClamp: 2,
                  overflow: 'hidden',
                }),
              }}
            >
              {description}
            </Typography>
          </Tooltip>
          {descriptionTooltip && (
            <Tooltip
              direction="bottom"
              description={descriptionTooltip}
            >
              <IconInfoCircle
                size={tooltipSize[variant].description}
                style={{
                  minWidth: tooltipSize[variant].description,
                  color: theme.palette.new.text.neutral.lighter,
                }}
              />
            </Tooltip>
          )}
        </>
      )}
    </Stack>
  );
};

export default DescriptionText;
