import React, { Component } from "react";
import "../assets/iconsmind/iconsmind.css";
import { navigations } from "./navigations";
import efeLogo from "../assets/images/efe.png";

import { NavLink } from "react-bootstrap";
import { classList } from "../utilities/classList";

class LayoutSidenav extends Component {
  windowListener = null;

  state = {
    selectedItem: null,
    navOpen: true,
    secondaryNavOpen: false,
  };

  onMainItemMouseEnter = (item: { type: string }) => {
    if (item.type === "dropDown") {
      this.setSelected(item);
    } else {
      this.setSelected(item);
      // this.closeSecSidenav();
    }
  };

  closeSecSidenav() {
    this.setState({ selectedItem: null });
  }

  setSelected = (selectedItem: any) => {
    this.setState({ selectedItem });
  };

  render() {
    const { selectedItem } = this.state;
    return (
      <div className="side-content-wrap">
        <div className="navigation-left">
          <ul>
            {navigations.map((item, i) => (
              <li
                className={classList({
                  "nav-item": true,
                  active: this.state.selectedItem === item,
                })}
                onMouseEnter={() => {
                  this.onMainItemMouseEnter(item);
                }}
                key={i}
              >
                <i className={`nav-icon ${item.icon}`}></i>
                <div className="menu-text">{item.name}</div>
                <div className="triangle"></div>
              </li>
            ))}
          </ul>
        </div>
        <div className="sub-side-menu">
          <img src={efeLogo}></img>
          <h6>EFE REACT</h6>
          <h6>{selectedItem && selectedItem.name}</h6>
          <ul>
            {selectedItem &&
              selectedItem.sub &&
              selectedItem.sub.map((item: any) => (
                <li>
                  <a href={item.path}> {item.name}</a>
                </li>
              ))}
          </ul>
        </div>
      </div>
    );
  }
}

export default LayoutSidenav;
