Proyectos de Subversion LeadersLinked - SPA

import React, { useState } from 'react';
import { IconButton } from '@mui/material';
import { AttachFile, SendRounded } from '@mui/icons-material';

import { FileModal, Form, FormInput } from '@shared/components';
import { useModal } from '@shared/hooks';

export const ChatForm = ({ onSubmit }) => {
  const [files, setFiles] = useState([]);
  const { showModal, closeModal } = useModal();

  const handleSubmit = (data) => {
    onSubmit({ ...data, file: files[0] });
  };

  const attachFile = () => {
    showModal(
      'Elegir archivo',
      <FileModal
        onSubmit={(data) => {
          setFiles(data);
          closeModal();
        }}
      />
    );
  };
  return (
    <Form
      defaultValues={{ message: '' }}
      reset
      onSubmit={handleSubmit}
      style={{ display: 'flex', alignItems: 'center', gap: 1, width: '100%' }}
    >
      <IconButton onClick={attachFile}>
        <AttachFile />
      </IconButton>
      <FormInput
        name='message'
        placeholder='Escribe un mensaje'
        autoComplete='off'
        rules={{ required: 'No puede enviar un mensaje vacío' }}
        endAdornment={
          <IconButton type='submit' sx={{ padding: 0.4 }}>
            <SendRounded />
          </IconButton>
        }
      />
    </Form>
  );
};