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.file[0]);
          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>
  );
};