import { memo } from 'react';
import clsx from 'clsx';

import Grid from '@mui/material/Grid';
import { styled } from '@mui/material/styles';
import type { ClassNameMap } from '@mui/styles/withStyles';

import { CustomIcon } from '../custom-icon';
import type { Theme } from '../@styles/theme-provider';
import { TextWithTooltip } from '../text-with-tooltip';

const StyledIcon = styled(CustomIcon)(({ theme }: { theme: Theme }) => ({
  marginRight: theme.spacing(1),
  color: theme.palette.primary[400],
  display: 'flex'
}));

const StyledText = styled('div')(({ theme }: { theme: Theme }) => ({
  color: theme.palette.primary[500],
  display: 'flex',
  alignItems: 'center'
}));

export interface TextWithIconProps {
  /**
   * The src of the icon.
   */
  src: string;
  /**
   * Text to display.
   */
  text: string;
  /**
   * Width of the Box.
   */
  width?: number;
  /**
   * Flag for truncating the text.
   */
  truncateText?: boolean;
  /**
   * Custom class name in case you need to add custom styles to the component.
   */
  className?: string;
  /**
   * Override classes.
   */
  classes?: Partial<ClassNameMap<'container' | 'icon' | 'text'>>;
}

const TextWithIcon = (props: TextWithIconProps) => {
  const { src, text, width = 0, truncateText, className, classes } = props;
  return (
    <Grid
      data-testid="TextWithIcon"
      container
      alignItems="center"
      wrap="nowrap"
      style={{
        maxWidth: width ? width - 32 : 'auto'
      }}
      className={clsx(className, classes?.container)}
    >
      <StyledIcon color="inherit" src={src} className={classes?.icon} />
      {truncateText ? (
        <TextWithTooltip disableInteractive={false} text={text} numOfLines={1} />
      ) : (
        <StyledText className={classes?.text}>{text}</StyledText>
      )}
    </Grid>
  );
};

const m = memo(TextWithIcon);
export { m as TextWithIcon };