Proyectos de Subversion LeadersLinked - SPA

import React, { useState } from 'react';

import { Box, IconButton } from '@mui/material';

import { AttachFile, EmojiEmotions, SendRounded } from '@mui/icons-material';

import EmojiPicker from 'emoji-picker-react';

import { useModal } from '@shared/hooks';

import { FileModal, Input, Menu } from '@shared/components';

export const ChatForm = ({ onSubmit }) => {

  const [message, setMessage] = useState('');

  const [file, setFile] = useState(null);

  const { showModal, closeModal } = useModal();

  const handleInputChange = ({ target }) => {

    setMessage(target.value);

  };

  const onEmojiClick = (emojiObject) => {

    setMessage((prevInput) => prevInput + emojiObject.emoji);

  };

  const attachFile = () => {

    showModal(

      'Elegir archivo',

      <FileModal

        onSubmit={(data) => {

          setFile(data);

          closeModal();

        }}

      />

    );

  };

  const handleSubmit = () => {

    if (!message.trim()) return;

    onSubmit({ message, file });

    setMessage('');

    setFile(null);

  };

  const handleKeyDown = (e) => {

    if (e.key === 'Enter') {

      handleSubmit();

    }

  };

  return (

    <Box style={{ display: 'flex', alignItems: 'center', gap: 1, width: '100%' }}>

      <Menu icon={<EmojiEmotions />}>

        <Menu.Item>

          <EmojiPicker onEmojiClick={onEmojiClick} />

        </Menu.Item>

      </Menu>

      <IconButton onClick={attachFile}>

        <AttachFile />

      </IconButton>

      <Input

        name='message'

        placeholder='Escribe un mensaje'

        onChange={handleInputChange}

        value={message}

        onKeyDown={handleKeyDown}

        endAdornment={

          <IconButton type='submit' sx={{ padding: 0.4 }} onClick={handleSubmit}>

            <SendRounded />

          </IconButton>

        }

      />

    </Box>

  );

};