import React from "react";
import Select from "react-select";
import { subcategorywrapper } from "utils/subcategorywrapper";
import { hoc } from "utils/helpers";

class DeepCategoryWrapper extends React.Component {
  handleOptionChange = selectedOption => {
    const { depth, onSubCategoryChanged } = this.props;
    onSubCategoryChanged({ selectedOption, depth });
  };

  render() {
    const { options, depth, childrenComponents } = this.props;
    const {
      subcategory: { [depth]: deepSubCategory }
    } = this.props;

    return (
      <div>
        <Select
          value={deepSubCategory || null}
          onChange={this.handleOptionChange}
          options={options}
        />
        {hoc(deepSubCategory && deepSubCategory.value, childrenComponents)}
      </div>
    );
  }
}
export default subcategorywrapper(DeepCategoryWrapper);