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

import { upperCaseFirst } from "../../utils";

const ExplorerOptions = ({
  display,
  params,
  options,
  type,
  history,
  fetch,
}) => {
  useEffect(() => {
    fetch();
  }, [fetch]);

  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[event.target.value][0];
    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) => upperCaseFirst(w))
      .join(" ");
  };

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

  let source = params.source;
  let category = params.category;
  let categories = options[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}
                >
                  {Object.keys(options).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,
  fetch: PropTypes.func,
};

export default withRouter(ExplorerOptions);