import React from "react";
import { withRouter } from "react-router-dom";
import { Form, FormGroup, FormControl, FormLabel } from "react-bootstrap";

class ExplorerOptions extends React.PureComponent {
  constructor(props) {
    super(props);
    this.handleSourceChange = this.handleSourceChange.bind(this);
    this.handleCategoryChange = this.handleCategoryChange.bind(this);
  }
  handleSourceChange(event) {
    let source = event.target.value;
    let category = this.props.options.get(event.target.value).first();
    this.props.history.push(
      `/${this.props.type}/explore/${source}/${category}`
    );
  }
  handleCategoryChange(event) {
    let source = this.props.params.source;
    let category = event.target.value;
    this.props.history.push(
      `/${this.props.type}/explore/${source}/${category}`
    );
  }
  propsValid(props) {
    if (
      !props.params ||
      !props.params.source ||
      !props.params.category ||
      props.params.source === "" ||
      props.params.category === ""
    ) {
      return false;
    }
    return true;
  }
  prettyName(name) {
    return name
      .replace("_", " ")
      .split(" ")
      .map(w => w[0].toUpperCase() + w.substr(1))
      .join(" ");
  }
  render() {
    // Should this componennt be displayed
    if (!this.props.display) {
      return null;
    }

    // Options are not yet fetched
    if (this.props.options.size === 0) {
      return null;
    }

    // Invalid props
    if (!this.propsValid(this.props)) {
      return;
    }

    let source = this.props.params.source;
    let category = this.props.params.category;
    let categories = this.props.options.get(this.props.params.source);

    return (
      <div className="row">
        <div className="col-xs-12 col-md-12">
          <Form>
            <div className="row">
              <div className="col-xs-12 col-md-6">
                <FormGroup>
                  <FormLabel>Source</FormLabel>
                  <FormControl
                    bsPrefix="form-control input-sm"
                    as="select"
                    onChange={this.handleSourceChange}
                    value={source}
                  >
                    {this.props.options.keySeq().map(function(source) {
                      return (
                        <option key={source} value={source}>
                          {this.prettyName(source)}
                        </option>
                      );
                    }, this)}
                  </FormControl>
                </FormGroup>
              </div>
              <div className="col-xs-12 col-md-6">
                <FormGroup>
                  <FormLabel>Category</FormLabel>
                  <FormControl
                    bsPrefix="form-control input-sm"
                    as="select"
                    onChange={this.handleCategoryChange}
                    value={category}
                  >
                    {categories.map(function(category) {
                      return (
                        <option key={category} value={category}>
                          {this.prettyName(category)}
                        </option>
                      );
                    }, this)}
                  </FormControl>
                </FormGroup>
              </div>
            </div>
          </Form>
        </div>
      </div>
    );
  }
}

export default withRouter(ExplorerOptions);