import React, { Component } from 'react';

import AbstractForm from './AbstractForm.js';
import ActivityIndicator from './ActivityIndicator.js';

//import form from 'lib/form';
//TODO API from FilterForm


require("./FilterForm.scss");



class FilterForm extends AbstractForm {


    constructor(props) {
        super(props);

        this.renderButton = this.renderButton.bind(this);
        this.renderFields = this.renderFields.bind(this);
        this.getButtonLabel = this.getButtonLabel.bind(this);
    }


    renderFields(disabled) {
        return null;
    }


    getButtonLabel() {
        return "Filter";
    }


    renderButton(disabled) {
        return <button disabled={ disabled }>{ this.getButtonLabel() }</button>
    }


	render() {
        let { pending, disabled, onSubmit } = this.props;

		return (
            <form onSubmit={ this.handleSubmit(onSubmit) }>
    			<div className={ "filter-form row" + (disabled ? " disabled" : "") }>
                    <div className="col-xl-11 col-lg-11 col-md-10 filter-form-input-container">
                        { this.renderFields(pending || disabled) || null }
                    </div>
                    <div className="col-xl-1 col-lg-1 col-md-2 filter-form-btn-container">
                        { this.renderButton(pending || disabled) || null }
                        <ActivityIndicator show={ !!pending } type="overlay" size="normal"/>
                    </div>
    			</div>
            </form>
		);
	}

}


export default FilterForm;