import React, { useState, useEffect } from 'react';
import { Field } from 'react-final-form';

// Redux part
import { useSelector, useDispatch } from 'react-redux';
import { StoreState } from 'store/rootReducer';

// Import actions here

import classNames from 'classnames/bind';
import Input from 'components/formItems/Input';
import Button from 'components/items/Button';
import ProjectInput from 'components/formItems/ProjectInput';
import ProjectButton from 'components/items/ProjectButton';
import { required } from 'store/utils/validation';
import styleIdentifiers from './messagesForm.scss';

import Send from './assets/send.svg';

const styles = classNames.bind(styleIdentifiers);

export interface StateProps {}

export interface DispatchProps {}

export interface OwnProps {
  onSubmit: Function;
}

export type MessagesFormProps = StateProps & DispatchProps & OwnProps;

const MessagesForm = (props: MessagesFormProps) => {
  const { handleSubmit, valid, customClassName } = props;

  const handleClick = () => {
    if (!valid) return;

    handleSubmit();
  };

  // console.log('initialValues', initialValues, values);

  return (
    <form className={styles('messages-form', customClassName)} onSubmit={handleSubmit}>
      <Field
        component={ProjectInput}
        name="message"
        seed="textarea"
        noError
        noShadow
        autoResize={140}
        validate={required}
        placeholder="pages.messages.typeHere"
        customClassName={styles('custom-textarea')}
        fieldWrapperClassName={styles('no-border')}
      />
      <div className={styles('buttons')}>
        <div className={styles('send-button')} onClick={handleClick}>
          <img src={Send} alt="send" className={styles('icon')} />
        </div>
      </div>
    </form>
  );
};

export default MessagesForm;
