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 ModuleButton from 'components/items/ModuleButton';
import { required, email, composeValidators } from 'store/utils/validation';
import GenericFields from 'components/formHelpers/GenericFields';
import TextItem from 'components/items/TextItem';
import styleIdentifiers from './createRoomForm.scss';

const styles = classNames.bind(styleIdentifiers);

export interface StateProps {}

export interface DispatchProps {}

export interface OwnProps {
  onSubmit: Function;
}

export type CreateRoomFormProps = StateProps & DispatchProps & OwnProps;

const CreateRoomForm = (props: CreateRoomFormProps) => {
  const { handleSubmit, submitting, valid } = props;

  return (
    <form className={styles('create-room-form')} onSubmit={handleSubmit}>
      <div className={styles('title')}>
        <TextItem path="Create Room" />
      </div>
      <GenericFields
        propsInput={{
          small: true,
          apollo: true,
        }}
        finalForm
        fields={[
          {
            name: 'accountIds',
            label: 'Users',
            type: 'select',
            noMargin: true,
            multiple: true,
            apollo: true,
            api: {
              resource: 'accountsGetMany',
            },
            modelValues: {
              value: '_id',
              text: 'email',
            },
          },
        ]}
      />
      <ModuleButton disabled={submitting || !valid} label="Create" type="submit" />
    </form>
  );
};

export default CreateRoomForm;
