import * as React from 'react';
import { Field } from 'redux-form';
import classNames from 'classnames/bind';
import Input from 'components/formItems/Input';
import ModuleButton from 'components/items/ModuleButton';
import { options } from 'config/root';
import { config, viewConfig } from 'config/general';
import { getPageInfo } from 'store/utils/adminHelpers';
import { getContent } from 'store/utils/helper';
import { content as localeContent } from 'config/content';
import styleIdentifiers from './genericFiltersForm.scss';

const styles = classNames.bind(styleIdentifiers);

export interface GenericFiltersFormProps {
  handleSubmit: Function;
  submitting?: boolean;
  forcedOption?: Record<string, any>;
  valid?: boolean;
  type: string;
}

interface GenericFiltersFormState {}

export default class GenericFiltersForm extends React.Component<
  GenericFiltersFormProps,
  GenericFiltersFormState
> {
  render() {
    const { handleSubmit, submitting, valid, forcedOption } = this.props;

    const pageInfo = getPageInfo(this.props, options);

    if (typeof pageInfo === 'string') return false;

    const { modelOptions } = pageInfo;

    const formOption = (modelOptions && modelOptions.filters) || forcedOption;

    if (!formOption) return <span />;

    return (
      <form className={styles('GenericFiltersForm')} onSubmit={handleSubmit}>
        <Field
          className={styles('large')}
          component={Input}
          name="search"
          withBorder
          small
          type="text"
          placeholder="admin.labels.search"
          {...viewConfig.inputProps}
        />
        <Field
          className={styles('input')}
          component={Input}
          withBorder
          name="limit"
          max={config.maxLimit}
          small
          type="number"
          placeholder="admin.labels.limit"
          {...viewConfig.inputProps}
        />
        <ModuleButton
          noMargin
          color={viewConfig.colorFilter || 'primary'}
          relative
          className={styles('button')}
          icon="search"
          disabled={!valid || submitting}
          type="submit"
        />
      </form>
    );
  }
}
