import { Row } from 'components/layout';
import { Text } from 'components/text';
import { AudioWave, DownloadFile, Pencil } from 'icons';
import { FC } from 'react';

const statusMessage: Record<ActiveStatusVariant, string> = {
  typing: 'typing',
  'audio-recording': 'recording audio message',
  'video-recording': 'recording video message',
  'file-uploading': 'uploading file',
};

export const ChatStatus: FC<ChatStatusProps> = ({ name, variant }) => {
  const statusIcon: Record<ActiveStatusVariant, JSX.Element> = {
    typing: <Pencil height={13} width={13} />,
    'audio-recording': <AudioWave height={13} width={13} />,
    'video-recording': <AudioWave height={13} width={13} />,
    'file-uploading': <DownloadFile height={13} width={13} />,
  };
  return (
    <Row>
      {statusIcon[variant]}
      <Text ml="3xs" fontStyle="italic" variant="caption">
        {name} {statusMessage[variant]} ...
      </Text>
    </Row>
  );
};

type ActiveStatusVariant = 'typing' | 'audio-recording' | 'video-recording' | 'file-uploading';
export interface ChatStatusProps {
  variant: ActiveStatusVariant;
  name: string;
}