import React from "react";
import PropTypes from "prop-types";

import withStyles from "@material-ui/core/styles/withStyles";
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 Dashboard from "@material-ui/icons/Dashboard";
import ExpandLess from "@material-ui/icons/ExpandLess";
import ExpandMore from "@material-ui/icons/ExpandMore";
import Collapse from "@material-ui/core/Collapse";
import StarBorder from "@material-ui/icons/StarBorder";

import sidebarStyle from "assets/sidebarStyle.js";
import CollapseWrapperStyled from "components/widgets/CollapseWrapperStyled";
import DeepCategoryWrapper from "./widgets/DeepCategoryWrapper";
import { hoc } from "utils/helpers";

import * as Vozila from "./categories/Vozila";
import * as Nekretnine from "./categories/Nekretnine";

import { connect } from "react-redux";
import { CATEGORY_SELECT } from "constants/actionTypes";

const options = [
  { value: "Nekretnine", label: "Nekretnine" }
];

const mapStateToProps = state => {
  return {
    category: state.category
  };
};

const mapDispatchToProps = dispatch => ({
  onCategoryChanged: option => dispatch({ type: CATEGORY_SELECT, option })
});

class Sidebar extends React.Component {
  handleCategoryChange = selectedOption => {
    this.props.onCategoryChanged(selectedOption);
  };
  render() {
    const { classes, logo, image, logoText, category } = this.props;

    return (
      <div className={classes.drawerPaper}>
        <div className={classes.logo}>
          <a href="https://www.creative-tim.com" className={classes.logoLink}>
            <div className={classes.logoImage}>
              <img src={logo} alt="logo" className={classes.img} />
            </div>
            {logoText}
          </a>
        </div>
        <div className={classes.sidebarWrapper}>
          <List role="menu">
            <Collapse in={true} timeout="auto" unmountOnExit>
              <List disablePadding>
                {options.map(({ label, value }, index) => (
                  <ListItem
                    onClick={() => this.handleCategoryChange({ label, value })}
                    className={
                      classes.nested +
                      " " +
                      classes.collapsedItemStyle +
                      " " +
                      (category && category.value === value
                        ? classes.checkedItem
                        : "")
                    }
                    key={index}
                  >
                    <ListItemIcon className={classes.whiteText}>
                      <StarBorder />
                    </ListItemIcon>
                    <ListItemText
                      className={classes.whiteText}
                      primary={label}
                      disableTypography={true}
                    />
                  </ListItem>
                ))}
              </List>
            </Collapse>

            {hoc(category && category.value, {
              Nekretnine: (
                <CollapseWrapperStyled componentName="Podkategorija">
                  <DeepCategoryWrapper {...Nekretnine.properties} />
                </CollapseWrapperStyled>
              )
            })}
          </List>
        </div>
        {image !== undefined ? (
          <div
            className={classes.background}
            style={{ backgroundImage: "url(" + image + ")" }}
          />
        ) : null}
      </div>
    );
  }
}

Sidebar.propTypes = {
  classes: PropTypes.object.isRequired
};

export default withStyles(sidebarStyle)(
  connect(
    mapStateToProps,
    mapDispatchToProps
  )(Sidebar)
);