import React from 'react'
import { Form, FormGroup, FormControl, ControlLabel } from 'react-bootstrap'

export default class ExplorerOptions extends React.Component {
  constructor(props) {
    super(props);
    let source = null;
    let category = null;
    let categories = [];

    // Check if the options are present
    if (Object.keys(this.props.options).length === 0) {
      // Fetch options
      this.props.fetchOptions();
      // Explore
      this.props.explore(this.props.params.source, this.props.params.category);
    } else {
      source = this.props.params.source;
      category = this.props.params.category;
      categories = this.props.options[this.props.params.source];
    }

    this.state = {
      selectedSource: source,
      selectedCategory: category,
      categories: categories,
    };
    this.handleSourceChange = this.handleSourceChange.bind(this);
    this.handleCategoryChange = this.handleCategoryChange.bind(this);
  }
  handleSourceChange(event) {
    let source = event.target.value;
    let category = this.props.options[event.target.value][0];
    this.setState({
      selectedSource: source,
      selectedCategory: category,
      categories: this.props.options[source],
    });
    this.props.router.push(`/${this.props.type}/explore/${source}/${category}`);
  }
  handleCategoryChange(event) {
    this.setState({ selectedCategory: event.target.value });
    this.props.router.push(`/${this.props.type}/explore/${this.state.selectedSource}/${event.target.value}`);
  }
  componentWillUpdate(nextProps, nextState) {
    // Check props
    if (!nextProps.params.source
      || !nextProps.params.category
      || (nextProps.params.source === "")
      || (nextProps.params.category === "")) {
      return
    }

    // Explore params changed
    if ((this.props.params.source !== nextProps.params.source)
      || (this.props.params.category !== nextProps.params.category)) {
      this.props.explore(nextProps.params.source, nextProps.params.category);
    }

    // State must be updated
    if ((this.state.selectedSource !== nextProps.params.source)
      || (this.state.selectedCategory !== nextProps.params.category)) {
      this.setState({
        selectedSource: nextProps.params.source,
        selectedCategory: nextProps.params.category,
        categories: nextProps.options[nextProps.params.source],
      });
    }
  }
  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 (Object.keys(this.props.options).length === 0) {
      return null;
    }

    // State is not yet set
    if (!this.state.selectedSource && !this.state.selectedCategory) {
      return null;
    }

    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>
                  <ControlLabel>Source</ControlLabel>
                  <FormControl
                    bsClass="form-control input-sm"
                    componentClass="select"
                    onChange={this.handleSourceChange}
                    value={this.state.selectedSource}
                  >
                    {Object.keys(this.props.options).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>
                  <ControlLabel>Category</ControlLabel>
                  <FormControl
                    bsClass="form-control input-sm"
                    componentClass="select"
                    onChange={this.handleCategoryChange}
                    value={this.state.selectedCategory}
                  >
                    {this.state.categories.map(function(category) {
                      return (<option key={category} value={category}>{this.prettyName(category)}</option>)
                    }, this)}
                  </FormControl>
                </FormGroup>
              </div>
            </div>
          </Form>
        </div>
      </div>
    );
  }
}