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

import withStyles from "@material-ui/core/styles/withStyles";
import sidebarStyle from "assets/sidebarStyle.js";
import List from "@material-ui/core/List";
import ListItem from "@material-ui/core/ListItem";
import ListItemIcon from "@material-ui/core/ListItemIcon";
import ListItemText from "@material-ui/core/ListItemText";
import StarBorder from "@material-ui/icons/StarBorder";

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

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

    return (
      <div>
        <List disablePadding>
          {options.map(({ label, value }, index) => (
            <ListItem
              onClick={() => this.handleOptionChange({ label, value })}
              className={
                classes.nested +
                " " +
                classes.collapsedItemStyle +
                " " +
                (deepSubCategory && deepSubCategory.value === value
                  ? classes.checkedItem
                  : "")
              }
              key={index}
            >
              <ListItemIcon className={classes.whiteText}>
                <StarBorder />
              </ListItemIcon>
              <ListItemText
                className={classes.whiteText}
                primary={label}
                disableTypography={true}
              />
            </ListItem>
          ))}
        </List>

        {hoc(deepSubCategory && deepSubCategory.value, childrenComponents)}
      </div>
    );
  }
}
export default withStyles(sidebarStyle)(
  subcategorywrapper(DeepCategoryWrapper)
);