import React from 'react';
import { Field } from 'react-final-form';
import classNames from 'classnames/bind';
import ModuleButton from 'components/items/ModuleButton';
import { required, email, composeValidators } from 'store/utils/validation';
import CustomSelect from 'components/formItems/CustomSelect';
import styleIdentifiers from './permissionForm.scss';

const styles = classNames.bind(styleIdentifiers);

export interface StateProps {}

export interface DispatchProps {}

export interface OwnProps {
  onSubmit: Function;
}

export type PermissionFormProps = StateProps & DispatchProps & OwnProps;

const PermissionForm = (props: PermissionFormProps) => {
  const { handleSubmit, submitting, valid, permissionType } = props;
  return (
    <form className={styles('PermissionForm')} onSubmit={handleSubmit}>
      <Field
        component={CustomSelect}
        name="permission"
        withBorder
        items={permissionType}
        validate={composeValidators(required)}
        noMargin
        className={styles('field')}
        contentWrapperClassName={styles('content-wrapper')}
      />
      <ModuleButton
        className={styles('button')}
        disabled={submitting || !valid}
        icon="plus"
        type="submit"
        noMargin
      />
    </form>
  );
};

export default PermissionForm;
