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

const ExplorerOptions = ({ display, params, options, type, history }) => {
  // Should this componennt be displayed
  if (!display) {
    return null;
  }

  if (
    !params ||
    !params.source ||
    !params.category ||
    params.source === "" ||
    params.category === ""
  ) {
    return null;
  }

  const handleSourceChange = (event) => {
    let source = event.target.value;
    let category = options.get(event.target.value).first();
    history.push(`/${type}/explore/${source}/${category}`);
  };

  const handleCategoryChange = (event) => {
    let source = params.source;
    let category = event.target.value;
    history.push(`/${type}/explore/${source}/${category}`);
  };

  const prettyName = (name) => {
    return name
      .replace("_", " ")
      .split(" ")
      .map((w) => w[0].toUpperCase() + w.substr(1))
      .join(" ");
  };

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

  let source = params.source;
  let category = params.category;
  let categories = options.get(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={handleSourceChange}
                  value={source}
                >
                  {options.keySeq().map(function (source) {
                    return (
                      <option key={source} value={source}>
                        {prettyName(source)}
                      </option>
                    );
                  })}
                </FormControl>
              </FormGroup>
            </div>
            <div className="col-xs-12 col-md-6">
              <FormGroup>
                <FormLabel>Category</FormLabel>
                <FormControl
                  bsPrefix="form-control input-sm"
                  as="select"
                  onChange={handleCategoryChange}
                  value={category}
                >
                  {categories.map(function (category) {
                    return (
                      <option key={category} value={category}>
                        {prettyName(category)}
                      </option>
                    );
                  })}
                </FormControl>
              </FormGroup>
            </div>
          </div>
        </Form>
      </div>
    </div>
  );
};
ExplorerOptions.propTypes = {
  params: PropTypes.object,
  history: PropTypes.object,
  type: PropTypes.string,
  options: PropTypes.object,
  display: PropTypes.bool,
};

export default withRouter(ExplorerOptions);