import {
  type FC,
  useCallback,
  useEffect,
  useMemo,
  useRef,
  useState,
} from 'react';
import { FormProvider, useForm } from 'react-hook-form';
import { useTranslation as useAttachmentsTranslation } from 'react-i18next';
import { useLocation, useNavigate } from 'react-router-dom';

import AttachFileIcon from '@material-hu/icons/material/AttachFile';
import CloseIcon from '@material-hu/icons/material/Close';
import InsertEmoticonIcon from '@material-hu/icons/material/InsertEmoticon';
import MicIcon from '@material-hu/icons/material/Mic';
import SendIcon from '@material-hu/icons/material/Send';
import Box, { type BoxProps } from '@material-hu/mui/Box';
import Collapse from '@material-hu/mui/Collapse';
import Grow from '@material-hu/mui/Grow';
import IconButton from '@material-hu/mui/IconButton';
import Menu from '@material-hu/mui/Menu';
import { styled, useTheme } from '@material-hu/mui/styles';
import Tooltip from '@material-hu/mui/Tooltip';
import Typography from '@material-hu/mui/Typography';

import type { IGif } from '@giphy/js-types';

import documentIcon from 'src/assets/svg/documentIcon.svg';
import multimediaIcon from 'src/assets/svg/multimediaIcon.svg';
import { logEvent } from 'src/config/logging';
import { CHAT_CONSTANTS } from 'src/constants/chats';
import { EVENTS_SOCKETS } from 'src/constants/sockets';
import { useRequiredAuth } from 'src/contexts/JWTContext';
import { useReplyMessage } from 'src/contexts/ReplyMessageContext';
import { useSocket } from 'src/contexts/SocketContext';
import useGeneralError from 'src/hooks/useGeneralError';
import useInterval from 'src/hooks/useInterval';
import useSendChatMessage from 'src/hooks/useSendChatMessage';
import {
  fileToBase64,
  uploadAllAttachments,
  uploadAudio,
} from 'src/services/attachments';
import { sendMessage } from 'src/services/chats';
import { EventName } from 'src/types/amplitude';
import {
  type Attachment,
  FileTypes,
  type FormFile as FormFileType,
} from 'src/types/attachments';
import {
  type AudioFile,
  type ChatType,
  type Message,
  MessageType,
} from 'src/types/chats';
import { fileSizeToMB, getFileToPaste } from 'src/utils/attachments';
import { allowAttachments, createMultimediaBody } from 'src/utils/chats';
import { createGifBody, extractTextFromHTML } from 'src/utils/feed';
import { getAttachment } from 'src/utils/files';
import {
  buildAudioRecord,
  getExtension,
  getPermissionInitializeRecorder,
} from 'src/utils/record';
import { cn } from 'src/utils/styles';
import { getUuid } from 'src/utils/text';

import AcceptCancelDialog from 'src/components/AcceptCancelDialog';
import AttachmentConfirmDialog from 'src/components/attachment/AttachmentConfirmDialog';
import CommentRichTextInput, {
  type CommentRichTextInputRef,
} from 'src/components/comments/CommentRichTextInput';
import { MessageReplied } from 'src/components/dashboard/chat/ChatThread';
import ChatRecordMessage from 'src/components/dashboard/chat/ChatThread/ChatRecordMessage';
import { useTranslation } from 'src/components/dashboard/chat/i18n';
import Picker from 'src/components/dashboard/reactions/Picker';
import File from 'src/components/FormInputs/FormFile';
import Gif from 'src/components/FormInputs/FormGif';

const MAX_SIZE_FILES = 100;
const noop = () => {};

type InitializedRecorder = Awaited<
  ReturnType<typeof getPermissionInitializeRecorder>
>;

type RecorderState = {
  stream: InitializedRecorder['stream'] | null;
  recorder: InitializedRecorder['recorder'] | null;
};

type Values = {
  body: string;
  gif: {
    type: string;
    externalReference: {
      id: string;
      origin: string;
    };
  };
  images: any[];
  videos: any[];
  files: any[];
  audio: AudioFile;
  messageToReply: Message;
};

type LocationState = {
  state: {
    isCelebrationChat?: boolean;
    message?: string;
  };
};

const initialState: RecorderState = {
  stream: null,
  recorder: null,
};

const sendMessageWrap = async (id: number, values: Values) => {
  const { body, gif, images, videos, files, messageToReply, audio } = values;

  const [uploadFiles, uploadImages, uploadVideos] = await uploadAllAttachments(
    files,
    images,
    videos,
  );
  const replyMessageId = messageToReply?.id;

  let formData: Object = {
    uuid: getUuid(),
    replyMessageId,
  };

  if (gif || images?.length > 0 || videos?.length > 0 || files?.length > 0) {
    formData = {
      ...formData,
      type: MessageType.FILE,
      attachments: [
        gif,
        ...uploadImages,
        ...uploadFiles,
        ...uploadVideos,
      ].filter(attachment => attachment),
    };
  } else if (audio) {
    const audioUploaded = await uploadAudio(audio);

    formData = {
      ...formData,
      type: FileTypes.AUDIO,
      attachments: [audioUploaded].filter(attachment => attachment),
    };
  } else {
    formData = {
      ...formData,
      type: MessageType.TEXT,
      text: body,
    };
  }

  return sendMessage(id, formData);
};

const Form = styled('form')({
  display: 'flex',
  alignItems: 'flex-end',
  flex: 1,
  flexDirection: 'column',
});

export type ChatMessageAddProps = Omit<BoxProps, 'id'> & {
  id: number;
  disabled?: boolean;
  chatType?: ChatType;
  otherUserId?: number;
  enableTrackAmplitude?: boolean;
  uploadLargerFiles?: any;
};

export const ChatMessageAdd: FC<ChatMessageAddProps> = props => {
  const {
    id,
    disabled = false,
    chatType,
    otherUserId,
    enableTrackAmplitude = false,
    uploadLargerFiles,
    ...boxProps
  } = props;

  const [videos, setVideos] = useState<FormFileType[]>([]);
  const [images, setImages] = useState<FormFileType[]>([]);
  const [files, setFiles] = useState<FormFileType[]>([]);
  const [pickerOpen, setPickerOpen] = useState<boolean>(false);
  const [recordAudioOpen, setRecordAudioOpen] = useState<boolean>(false);
  const [openDialogPermissionRecord, setOpenDialogPermissionRecord] =
    useState<boolean>(false);
  const anchorRef = useRef(null);
  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
  const [recorderState, setRecorderState] = useState(initialState);
  const open = Boolean(anchorEl);
  const theme = useTheme();
  const { user, instance } = useRequiredAuth();
  const socket = useSocket();
  const { t } = useTranslation();
  const { t: attachT } = useAttachmentsTranslation();

  const navigate = useNavigate();
  const location = useLocation();
  const { state: locationState } = location as LocationState;

  const editorRef = useRef<CommentRichTextInputRef>(null);

  const showGeneralError = useGeneralError();
  const { clearReply, messageToReply, isReplying } = useReplyMessage();

  const onMutateSendMessage = (resetBody: boolean) => {
    resetForm(resetBody);
    clearReply();
    setPickerOpen(false);
  };

  const onSuccessSendMessage = () => {
    if (enableTrackAmplitude) {
      if (otherUserId) {
        logEvent(EventName.CHAT_SINGLE_MESSAGE_SENT, {
          userid: otherUserId,
          chatId: id,
        });
      } else {
        logEvent(EventName.CHAT_GROUP_MESSAGE_SENT, { chatId: id });
      }
    }
  };

  const { sendMessageMutate, isLoading } = useSendChatMessage(
    id,
    chatType!,
    sendMessageWrap,
    onMutateSendMessage,
    onSuccessSendMessage,
    messageToReply,
  );

  useEffect(() => {
    if (isReplying) {
      editorRef.current?.editor?.commands.focus();
    }
  }, [messageToReply, isReplying]);

  useInterval(() => {
    const editorText = editorRef.current?.editor?.getText()?.trim();
    if (editorText) {
      socket.emitNotifyEvent(EVENTS_SOCKETS.TYPING, {
        instanceId: instance.id,
        params: {
          typingUser: {
            id: user.id,
            firstName: user.firstName,
            lastName: user.lastName,
            profilePicture: user.profilePicture,
          },
          chatId: id,
        },
      });
    }
  }, 1000);

  useEffect(() => {
    if (locationState?.isCelebrationChat) {
      editorRef.current?.editor?.commands.focus('end');
    }
  }, [locationState]);

  const form = useForm({
    defaultValues: {
      bodyHtml: '',
    },
  });

  const { handleSubmit, watch, reset } = form;

  useEffect(() => {
    clearReply();
    editorRef.current?.editor?.commands.focus();
  }, [id]);

  watch('bodyHtml');

  const getEditorPlainText = () =>
    editorRef.current?.editor?.getText()?.trim() ?? '';

  const isValidBody = (text: string) => text.trim().length > 0;

  const openMenu = (event: React.MouseEvent<HTMLElement>) => {
    setPickerOpen(false);
    setAnchorEl(event.currentTarget);
  };

  const closeMenu = () => setAnchorEl(null);

  const resetAttachments = () => {
    closeMenu();
    setImages([]);
    setVideos([]);
    setFiles([]);
  };

  const resetForm = (resetBody = false) => {
    if (locationState?.isCelebrationChat)
      navigate(location.pathname, { replace: true });
    if (resetBody) {
      reset({ bodyHtml: '' });
      editorRef.current?.editor?.commands.clearContent();
    }
    resetAttachments();
  };

  const submit = (formValues: { bodyHtml: string }) => {
    const { plainText } = extractTextFromHTML(formValues.bodyHtml);
    const values = { body: plainText };

    const multimedia = [...images, ...videos, ...files];
    if (multimedia.length) {
      multimedia.forEach(elem => {
        const multimediaBody = createMultimediaBody(elem);
        sendMessageMutate({ ...values, ...multimediaBody, messageToReply });
      });
    } else {
      if (!isValidBody(plainText)) return;
      sendMessageMutate({
        ...values,
        videos: [],
        images: [],
        files,
        messageToReply,
        resetBody: true,
      });
    }
  };

  const handleAddGif = (gif: IGif) => {
    const gifBody = createGifBody(gif);

    sendMessageMutate({
      body: '',
      gif: gifBody,
      videos: [],
      images: [],
      files,
      messageToReply,
    });
  };

  const handleEscapeKey = useCallback(() => {
    if (pickerOpen) {
      setPickerOpen(false);
    } else if (isReplying) {
      clearReply();
    }
  }, [pickerOpen, isReplying, clearReply]);

  const handleAddImage = (image: FormFileType) => {
    setImages([...images, image]);
  };

  const handleDelete = (attachment: Attachment, index: number) => {
    let list: FormFileType[] | undefined;
    let set: React.Dispatch<React.SetStateAction<FormFileType[]>> | undefined;
    if (files.length > 0) {
      list = files;
      set = setFiles;
    } else {
      if (attachment.type === FileTypes.IMAGE) {
        list = images;
        set = setImages;
      } else if (attachment.type === FileTypes.VIDEO) {
        list = videos;
        set = setVideos;
      }
    }

    if (!list || !set) return;

    const newList = [...list];
    newList.splice(index, 1);

    set(newList);
    closeMenu();
  };

  const imagesAttach = useMemo(() => images.map(getAttachment), [images]);
  const videosAttach = useMemo(() => videos.map(getAttachment), [videos]);
  const filesAttach = useMemo(() => files.map(getAttachment), [files]);

  const onPasteImage = async (event: React.ClipboardEvent<HTMLFormElement>) => {
    if (event.clipboardData && event.clipboardData.items) {
      const items = Array.from(event.clipboardData.items);
      if (items.some((item: DataTransferItem) => item.kind === 'file')) {
        event.preventDefault();
        const clipboardEvent =
          event as unknown as React.ClipboardEvent<HTMLInputElement>;
        const newFile = await getFileToPaste(clipboardEvent);
        if (newFile) {
          handleAddImage(newFile);
        }
      }
    }
  };

  const handleSelectEmoji = (emojiObject: { emoji: string }) => {
    const editor = editorRef.current?.editor;
    if (editor) {
      editor.chain().focus().insertContent(emojiObject.emoji).run();
    }
  };

  const togglePicker = () => {
    setPickerOpen(!pickerOpen);
  };

  const handleSendRecordMessage = async (duration: number) => {
    try {
      const { recorder } = recorderState;
      if (!recorder) return;
      await recorder.stopRecording();

      const blobToAnalyze = await recorder.getBlob();

      const uri = (await fileToBase64(blobToAnalyze)) as string;

      const extension = getExtension(uri);

      const audio = buildAudioRecord(
        uri,
        duration,
        blobToAnalyze.size,
        extension,
      );

      handleCloseRecordMessage();
      const bodyText = editorRef.current?.editor?.getText()?.trim() ?? '';
      sendMessageMutate({
        body: bodyText,
        audio,
        videos: [],
        images: [],
        files: [],
        messageToReply,
        resetBody: true,
      });
    } catch (err) {
      handleCloseRecordMessage();
      showGeneralError(err, t('SEND_MESSAGE_ERROR'));
    }
  };

  const handleCloseRecordMessage = () => {
    const { recorder, stream } = recorderState;
    recorder?.reset();
    recorder?.destroy();
    stream?.getAudioTracks().forEach((track: MediaStreamTrack) => track.stop());
    setRecordAudioOpen(false);
  };

  const handleRecordAudio = async () => {
    try {
      const { recorder, stream } =
        await getPermissionInitializeRecorder('audio');
      recorder.startRecording();
      setRecorderState({
        stream,
        recorder,
      });
      setRecordAudioOpen(true);
    } catch (e) {
      setOpenDialogPermissionRecord(true);
    }
  };

  const handleAddMultimedia = (multimedia: any) => {
    const image: FormFileType[] = [];
    const video: FormFileType[] = [];
    let counter = 0;
    multimedia.forEach((elem: FormFileType) => {
      const fileSizeInMB = fileSizeToMB(elem.size ?? 0);
      if (elem.type === FileTypes.IMAGE && fileSizeInMB <= MAX_SIZE_FILES)
        image.push(elem);
      else if (elem.type === FileTypes.VIDEO && fileSizeInMB <= MAX_SIZE_FILES)
        video.push(elem);
      else if (fileSizeInMB > MAX_SIZE_FILES) counter++;
    });
    if (counter > 0) {
      uploadLargerFiles(counter);
    }
    setImages([...images, ...image]);
    setVideos([...videos, ...video]);
  };

  const handleAddFiles = (newFiles: any) => {
    const image: FormFileType[] = [];
    const video: FormFileType[] = [];
    const file: FormFileType[] = [];
    let counter = 0;
    newFiles.forEach((elem: FormFileType) => {
      const fileSizeInMB = fileSizeToMB(elem.size ?? 0);
      if (fileSizeInMB > MAX_SIZE_FILES) counter++;
      else if (elem.type === FileTypes.IMAGE && fileSizeInMB <= MAX_SIZE_FILES)
        image.push(elem);
      else if (elem.type === FileTypes.VIDEO && fileSizeInMB <= MAX_SIZE_FILES)
        video.push(elem);
      else file.push(elem);
    });
    if (counter > 0) {
      uploadLargerFiles(counter);
    }
    setImages([...images, ...image]);
    setVideos([...videos, ...video]);
    setFiles([...files, ...file]);
  };

  const handleAddMultipleFile = (newFiles: any) => {
    const file: FormFileType[] = [];
    let counter = 0;
    newFiles.forEach((newFile: FormFileType) => {
      const fileSizeInMB = fileSizeToMB(newFile.size ?? 0);
      if (fileSizeInMB <= MAX_SIZE_FILES) file.push(newFile);
      else counter++;
    });
    if (counter > 0) {
      uploadLargerFiles(counter);
    }
    setFiles([...files, ...file]);
  };

  const handleReplaceImage = (
    oldImage: FormFileType,
    newImage: FormFileType,
  ) => {
    const oldImageIndex = images.findIndex(
      image =>
        image.name === oldImage.name &&
        image.fileObject?.lastModified === oldImage.fileObject?.lastModified,
    );
    if (oldImageIndex !== -1) {
      const newImageSizeInMB = fileSizeToMB(newImage.size ?? 0);
      if (newImageSizeInMB <= MAX_SIZE_FILES) {
        images[oldImageIndex] = newImage;
      } else {
        uploadLargerFiles(newImage);
      }
    }
    setImages([...images]);
  };

  const editorPlainText = getEditorPlainText();

  const getPaddingY = () =>
    isValidBody(editorPlainText) || !allowAttachments(instance, chatType!)
      ? '12px'
      : '4px';

  const showSendButton =
    !allowAttachments(instance, chatType!) || isValidBody(editorPlainText);

  return (
    <>
      <Box
        className={cn([
          'send-message',
          recordAudioOpen ? 'hide-send-message' : undefined,
        ])}
      >
        <Collapse
          id="emoji-picker-menu"
          in={pickerOpen}
          orientation="vertical"
          aria-labelledby="emoji-picker-button"
        >
          <Picker onEmojiClick={handleSelectEmoji} />
        </Collapse>
        <Box
          className="messageAdd"
          {...boxProps}
        >
          <FormProvider {...form}>
            <Form
              noValidate
              onSubmit={handleSubmit(submit)}
              onPaste={
                allowAttachments(instance, chatType!) ? onPasteImage : undefined
              }
            >
              {isReplying && (
                <Box className="reply">
                  <MessageReplied
                    className="messageToReply"
                    message={messageToReply}
                  />
                  <Tooltip
                    title={t('CANCEL_REPLY')}
                    placement="top"
                    className="cancelReply"
                  >
                    <span>
                      <IconButton
                        aria-label={t('CANCEL_REPLY')}
                        onClick={clearReply}
                      >
                        <CloseIcon fontSize="small" />
                      </IconButton>
                    </span>
                  </Tooltip>
                </Box>
              )}
              <Box className="form">
                {pickerOpen && (
                  <Tooltip title={t('CLOSE_EMOJI_PICKER')}>
                    <span>
                      <IconButton
                        sx={{ p: '12px' }}
                        size="small"
                        id="close-emoji-picker-button"
                        aria-controls="emoji-picker-menu"
                        aria-label={t('CLOSE_EMOJI_PICKER')}
                        aria-expanded={pickerOpen ? 'true' : undefined}
                        onClick={togglePicker}
                      >
                        <CloseIcon fontSize="small" />
                      </IconButton>
                    </span>
                  </Tooltip>
                )}
                <Box sx={{ display: 'flex', alignItems: 'flex-end' }}>
                  <Tooltip title={t('PICK_EMOJI')}>
                    <span>
                      <IconButton
                        sx={{
                          p: '12px',
                          mr: allowAttachments(instance, chatType!)
                            ? '-10px'
                            : 0,
                        }}
                        size="small"
                        color={pickerOpen ? 'primary' : undefined}
                        id="emoji-picker-button"
                        aria-controls="emoji-picker-menu"
                        aria-label={t('PICK_EMOJI')}
                        aria-expanded={pickerOpen ? 'true' : undefined}
                        onClick={togglePicker}
                      >
                        <InsertEmoticonIcon fontSize="small" />
                      </IconButton>
                    </span>
                  </Tooltip>
                  {allowAttachments(instance, chatType!) && (
                    <>
                      <Gif
                        onGifSelection={handleAddGif}
                        title={attachT('attach_gif')}
                        iconColor={theme.palette.text.secondary}
                      />
                      <IconButton
                        sx={{ p: '12px' }}
                        size="small"
                        id="message-actions-button"
                        aria-controls="message-actions-menu"
                        aria-haspopup="true"
                        aria-label={t('MAKE_ACTION_ON_MESSAGE')}
                        aria-expanded={open ? 'true' : undefined}
                        ref={anchorRef}
                        onClick={openMenu}
                      >
                        <AttachFileIcon fontSize="small" />
                      </IconButton>
                    </>
                  )}
                </Box>
                <Menu
                  id="message-actions-menu"
                  MenuListProps={{
                    'aria-labelledby': 'message-actions-button',
                  }}
                  anchorEl={anchorRef.current}
                  open={open}
                  onClose={closeMenu}
                  anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}
                  PaperProps={{
                    style: {
                      backgroundColor: 'transparent',
                      boxShadow: 'none',
                    },
                  }}
                  TransitionComponent={Grow}
                  style={{ marginTop: '-50px' }}
                >
                  <div
                    style={{
                      backgroundColor: '#ffffff',
                      borderRadius: '22px',
                      boxShadow: 'grey 0px 8px 6px -5px',
                    }}
                  >
                    <File
                      iconSx={{
                        padding: '12px',
                        margin: '0',
                      }}
                      name="multimedia"
                      inputProps={{
                        multiple: true,
                        accept: 'video/*, .jpg, .png',
                      }}
                      title={attachT('attach_image_file')}
                      type={FileTypes.VIDEO || FileTypes.IMAGE}
                      icon={
                        <img
                          src={multimediaIcon}
                          width="24px"
                          alt=""
                        />
                      }
                      onChange={handleAddMultimedia}
                      multimediaSize={images.length + videos.length}
                      multiple
                    />
                  </div>
                  <div style={{ height: '14px' }} />
                  <div
                    style={{
                      backgroundColor: '#ffffff',
                      borderRadius: '22px',
                      boxShadow: 'grey 0px 8px 6px -5px',
                    }}
                  >
                    <File
                      iconSx={{
                        padding: '12px',
                        margin: '0',
                      }}
                      name="files"
                      inputProps={{
                        accept: '*',
                        multiple: true,
                      }}
                      disabled={files?.length > CHAT_CONSTANTS.MAX_FILES}
                      title={attachT('attach_file')}
                      type={FileTypes.FILE}
                      icon={
                        <img
                          src={documentIcon}
                          alt=""
                          height="22px"
                          width="24px"
                        />
                      }
                      onChange={handleAddMultipleFile}
                      multiple
                      isFileMultiple
                    />
                  </div>
                </Menu>
                <CommentRichTextInput
                  ref={editorRef}
                  name="bodyHtml"
                  placeholder={t('WRITE_MESSAGE')}
                  disabled={disabled}
                  initialContent={locationState?.message || ''}
                  onEnterSubmit={noop}
                  onEscapeKey={handleEscapeKey}
                  autoFocus
                  sx={{
                    '& .tiptap': { maxHeight: '300px' },
                  }}
                />
                <Box
                  sx={{
                    display: 'flex',
                    justifyContent: 'space-between',
                    alignItems: 'flex-end',
                    py: getPaddingY(),
                    px: '12px',
                  }}
                >
                  {showSendButton && (
                    <Tooltip title={t('SEND')}>
                      <span>
                        <IconButton
                          aria-label={t('SEND')}
                          color="primary"
                          disabled={!isValidBody(editorPlainText)}
                          type="submit"
                          sx={{ py: 0 }}
                        >
                          <SendIcon fontSize="small" />
                        </IconButton>
                      </span>
                    </Tooltip>
                  )}

                  {allowAttachments(instance, chatType!) &&
                    !isValidBody(editorPlainText) && (
                      <Tooltip title={t('RECORD')}>
                        <span>
                          <IconButton
                            aria-label={t('RECORD')}
                            color="primary"
                            onClick={handleRecordAudio}
                          >
                            <MicIcon fontSize="small" />
                          </IconButton>
                        </span>
                      </Tooltip>
                    )}
                </Box>
                <AttachmentConfirmDialog
                  images={imagesAttach}
                  videos={videosAttach}
                  files={filesAttach}
                  onDelete={handleDelete}
                  isLoading={isLoading}
                  onAccept={handleSubmit(submit)}
                  onAddMore={handleAddFiles}
                  handleReplaceImage={handleReplaceImage}
                  addMoreDisabled={
                    images?.length + videos?.length + files?.length >=
                    CHAT_CONSTANTS.MAX_FILES
                  }
                  onCancel={resetAttachments}
                  open={
                    images?.length > 0 ||
                    videos?.length > 0 ||
                    files?.length > 0
                  }
                />
              </Box>
            </Form>
          </FormProvider>
        </Box>
        <AcceptCancelDialog
          open={openDialogPermissionRecord}
          title={t('PEMISSION_MICROPHONE_TITLE')}
          onAccept={() => setOpenDialogPermissionRecord(false)}
        >
          <Typography>
            {t('PEMISSION_MICROPHONE_CONTENT', { url: window.location.origin })}
          </Typography>
        </AcceptCancelDialog>
      </Box>
      <Box
        className={cn([
          'send-record-audio',
          recordAudioOpen ? 'show-send-record-audio' : undefined,
        ])}
      >
        {recordAudioOpen && (
          <ChatRecordMessage
            recorder={recorderState.recorder}
            onCloseRecordMessage={handleCloseRecordMessage}
            onSendRecordMessage={handleSendRecordMessage}
          />
        )}
      </Box>
    </>
  );
};

export default ChatMessageAdd;