import type { FC } from 'react';

import TagIcon from '@material-hu/icons/material/Tag';
import Avatar from '@material-hu/mui/Avatar';
import Box from '@material-hu/mui/Box';
import { SxProps } from '@material-hu/mui/styles';
import Typography from '@material-hu/mui/Typography';

import { Topic } from 'src/types/tickets';

export type TicketChatAvatarProps = {
  ticketId?: number;
  topic: Topic;
  sx?: SxProps;
  isChatToolbar?: boolean;
  className?: string;
};

const TicketChatAvatar: FC<TicketChatAvatarProps> = props => {
  const {
    ticketId = null,
    topic,
    isChatToolbar = false,
    sx = {},
    className,
  } = props;

  if (!topic) return null;

  return (
    <Box
      sx={{
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
      }}
    >
      <Avatar
        className={className}
        sx={{
          backgroundColor: 'transparent',
          ...sx,
        }}
      >
        <TagIcon
          aria-label={topic.name}
          color={topic.deleted ? 'secondary' : 'primary'}
        />
      </Avatar>
      {!isChatToolbar && ticketId && (
        <Typography
          color="primary"
          sx={{
            fontSize: '14px',
            mr: 2,
            fontWeight: 600,
          }}
        >
          ID {ticketId}
        </Typography>
      )}
    </Box>
  );
};

export default TicketChatAvatar;