import React 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 FieldAdapter from 'components/formItems/FieldAdapter';

import { required, email, composeValidators } from 'store/utils/validation';
import ProjectButton from 'components/items/ProjectButton/ProjectButton';
import ProjectInput from 'components/formItems/ProjectInput/ProjectInput';
import styleIdentifiers from './ContactForm.module.scss';

const styles = classNames.bind(styleIdentifiers);

export interface StateProps {}

export interface DispatchProps {}

export interface OwnProps {
  onSubmit: Function;
}

export type ContactFormProps = StateProps & DispatchProps & OwnProps;

const ContactForm = (props: ContactFormProps) => {
  const { handleSubmit, submitting, valid } = props;

  // mapStateToProps
  const content = useSelector((state: StoreState) => state.content.raw);

  return (
    <form className={styles('contact-form')} onSubmit={handleSubmit}>
      <FieldAdapter
        component={ProjectInput}
        customClassName="squared"
        name="name"
        placeholder="pages.contact.right.name"
        isRequired
        validate={composeValidators(required)}
      />
      <FieldAdapter
        component={ProjectInput}
        customClassName="squared"
        name="phone"
        placeholder="pages.contact.right.phone"
        isRequired
        validate={required}
      />
      <FieldAdapter
        component={ProjectInput}
        customClassName="squared"
        name="email"
        type="email"
        placeholder="pages.contact.right.email"
        isRequired
        validate={composeValidators(required, email)}
      />
      <FieldAdapter
        component={ProjectInput}
        customClassName="squared"
        name="subject"
        placeholder="pages.contact.right.subject"
        isRequired
        validate={required}
      />
      <FieldAdapter
        component={ProjectInput}
        customClassName="squared"
        name="message"
        placeholder="pages.contact.right.message"
        isRequired
        seed="textarea"
        validate={required}
        autoResize
      />
      <div className={styles('button')}>
        <ProjectButton
          color="primary"
          relative
          disabled={submitting || !valid}
          label="pages.contact.right.button"
          type="submit"
        />
      </div>
    </form>
  );
};

export default ContactForm;
