/** @module HeaderSearchForm */

import React from "react";
import { Row, InputGroup, InputGroupAddon } from "reactstrap";
import { Button } from "@material-ui/core";
import { Formik, Form, Field } from "formik";
import _ from "lodash";

import * as types from "../Types/types";

const ScopeOptions = ({ options }) => {
  return options.map(option => {
    return (
      <option key={option.cd} value={option.cd}>
        {option.nm}
      </option>
    );
  });
};

const HeaderSearchForm = props => {
  const { searchObject } = props;

  return (
    <Row data-test="header-search-form" className="ml-1 mt-2 mb-0">
      <Formik
        initialValues={{
          searchTerm: _.get(searchObject, "initialValues.searchTerm", ""),
          searchScope: _.get(searchObject, "initialValues.searchScope", "")
        }}
        onSubmit={(values, { resetForm }) => {
          searchObject.submitSearch(values);
          if (!searchObject.stickyValues) {
            resetForm();
          }
        }}
      >
        {formProps => (
          <Form className="w-75">
            <InputGroup>
              {searchObject.prependScopeEnabled && searchObject.prependOptions && (
                <InputGroupAddon addonType="prepend">
                  <Field
                    name="searchScope"
                    className="form-control"
                    as="select"
                    style={{ height: "36px" }}
                  >
                    <ScopeOptions options={searchObject.prependOptions} />
                  </Field>
                </InputGroupAddon>
              )}
              <Field
                name="searchTerm"
                placeholder={searchObject.placeholder}
                className="form-control"
                style={{ height: "36px" }}
              />
              {searchObject.stickyValues && (
                <InputGroupAddon addonType="append">
                  <Button className="btn btn-white nopadding" type="reset">
                    <span className="far fa-times-circle fa-lg ml-2 mr-2" />
                  </Button>
                </InputGroupAddon>
              )}
              <InputGroupAddon addonType="append">
                <Button
                  className="btn btn-prime nopadding"
                  disabled={
                    !searchObject.enableEmptySearch &&
                    !formProps.values.searchTerm
                  }
                  type="submit"
                >
                  <span className="fas fa-search fa-lg ml-2 mr-2" />
                </Button>
              </InputGroupAddon>
            </InputGroup>
          </Form>
        )}
      </Formik>
    </Row>
  );
};

HeaderSearchForm.propTypes = {
  searchObject: types.searchObject.types
};

HeaderSearchForm.defaultProps = {
  searchObject: types.searchObject.defaults
};

export default HeaderSearchForm;