import type { FC } from 'react';

import Box, { BoxProps } from '@material-hu/mui/Box';
import Chip from '@material-hu/mui/Chip';
import Typography from '@material-hu/mui/Typography';

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

import {
  default as RegularChatName,
  RegularChatNameProps,
} from './RegularChatName';

export type TicketChatNameProps = BoxProps &
  RegularChatNameProps & {
    topic: Topic;
    ticketId: number;
    isChatToolbar?: boolean;
  };

const TicketChatName: FC<TicketChatNameProps> = props => {
  const {
    topic,
    ticketId,
    otherUser,
    withLink = true,
    isChatToolbar = false,
    sx = {},
    ...boxProps
  } = props;

  return (
    <>
      <Box
        {...boxProps}
        sx={{
          display: 'flex',
          flexDirection: 'column',
          alignItems: 'flex-start',
          mb: isChatToolbar && otherUser ? 1 : 0,
          mr: otherUser ? 3 : 2,
          ml: otherUser && isChatToolbar ? '16px' : '0px !important',
          ...sx,
        }}
      >
        <RegularChatName
          otherUser={otherUser}
          withLink={withLink}
        />
        {isChatToolbar && (
          <Typography
            color="primary"
            sx={{
              fontSize: '14px',
              mr: otherUser ? 2 : 0,
              fontWeight: 600,
            }}
          >
            ID {ticketId}
          </Typography>
        )}
      </Box>
      <Chip
        color={topic?.deleted ? 'secondary' : 'primary'}
        label={topic?.name}
        size="small"
        sx={{
          maxWidth: 'max-content',
          mb: !isChatToolbar ? 1 : 0,
        }}
      />
    </>
  );
};

export default TicketChatName;