import React, { Component, PropTypes } from 'react';
import { findDOMNode } from 'react-dom';
import { FormControl, FormGroup } from 'react-bootstrap';

import 'stylesheets/components/shared/books/table-filter.scss';

export default class extends Component {
    static propTypes = {
        updateFilterText: PropTypes.func.isRequired,
        filterText: PropTypes.string.isRequired
    };

    constructor(props, context) {
        super(props, context);

        this.updateFilterText = this.updateFilterText.bind(this);
        this.getFilterType = this.getFilterType.bind(this);
    }

    getFilterType() {
        const filterType = findDOMNode(this.refs.filterOnSelection);
        return filterType.value;
    }

    updateFilterText(e) {
        const text = e.target.value;
        const filterType = this.getFilterType();

        this.props.updateFilterText(text, filterType);
    }

    render() {
        return (
            <div className="pull-right">
                <form className="table-filter">
                    <FormGroup bsClass="pull-right filter-option">
                        <FormControl
                            type="text"
                            placeholder="Filter..."
                            value={this.props.filterText}
                            onChange={this.updateFilterText}
                        />
                    </FormGroup>
                    <FormGroup bsClass="pull-right filter-option">
                        <FormControl
                            componentClass="select"
                            defaultValue="title"
                            ref="filterOnSelection"
                        >
                            <option value="author">Author</option>
                            <option value="title">Title</option>
                            <option value="series">Series</option>
                        </FormControl>
                    </FormGroup>
                </form>
            </div>
        );
    }
}
