import React, { useEffect, useRef, useState, useCallback } from 'react';
import { Field } from 'react-final-form';
import classNames from 'classnames/bind';
import { required, email, composeValidators } from 'store/utils/validation';
import Textarea from 'components/formItems/Textarea';
import { useDropzone } from 'react-dropzone';
import ChatInput from 'components/formItems/ChatInput';

const styles = classNames.bind();

export interface StateProps {}

export interface DispatchProps {}

export interface OwnProps {
  onSubmit: Function;
}

export type MessageFormProps = StateProps & DispatchProps & OwnProps;

const MessageForm = (props: MessageFormProps) => {
  const { handleSubmit, values, className, forwardRef, form } = props;

  function onKeyPress(e) {
    if (e.keyCode === 13 && !e.shiftKey) {
      e.preventDefault();
      handleSubmit(values, form);
    }
  }

  return (
    <form className={styles('MessageForm', className)} ref={forwardRef} onSubmit={handleSubmit}>
      <Field
        component={ChatInput}
        onKeyPress={e => onKeyPress(e)}
        name="message"
        placeholder="Write your message here"
        validate={composeValidators(required)}
      />
    </form>
  );
};

export default MessageForm;
