import { HiMenu, HiX } from "react-icons/hi";
import { icons } from "./icons";
import Menu from "react-burger-menu/lib/menus/slide";
import styles from "styles/sidePanel.module.css";
import { links } from "./navItems";
import { render } from "react-dom";
import React from "react";

export default class extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      menuOpen: false,
    };
  }

  // This keeps your state in sync with the opening/closing of the menu
  // via the default means, e.g. clicking the X, pressing the ESC key etc.
  handleStateChange(state) {
    this.setState({ menuOpen: state.isOpen });
  }

  // This can be used to close the menu, e.g. when a user clicks a menu item
  closeMenu() {
    this.setState({ menuOpen: false });
  }

  // This can be used to toggle the menu, e.g. when using a custom icon
  // Tip: You probably want to hide either/both default icons if using a custom icon
  // See https://github.com/negomi/react-burger-menu#custom-icons
  toggleMenu() {
    this.setState((state) => ({ menuOpen: !state.menuOpen }));
  }
  // This can be used to toggle the menu, e.g. when using a custom icon
  // Tip: You probably want to hide either/both default icons if using a custom icon
  // See https://github.com/negomi/react-burger-menu#custom-icons

  render() {
    return (
      <>
        <div>
          {this.menuOpen ? (
            <>
              <Menu
                customBurgerIcon={
                  <HiMenu
                    className={
                      styles.bmBurgerButton +
                      styles.bmBurgerBars +
                      styles.bmBurgerBarsHover
                    }
                    onClick={() => toggleMenu()}
                  />
                }
              />
            </>
          ) : (
            <>
              <Menu
                customCrossIcon={
                  <HiX style={styles.bmCrossButton + styles.bmCross} />
                }
                onClick={() => toggleMenu()}
              />
            </>
          )}
        </div>
        <Menu
          left
          styles={styles.bmMenu + styles.bmOverlay}
          width={"50%"}
          isOpen={this.state.menuOpen}
          onStateChange={(state) => this.handleStateChange(state)}
          disableOverlayClick
        >
          <div styles={styles.bmMenuWrap} className="overflow-auto">
            <ul styles={styles.bmItemList} key={links.id}>
              <li styles={styles.bmListTitle}>{"Hot News"}</li>
              {links.map(({ title }) => (
                <li
                  styles={styles.bmItem}
                  key={links.title}
                  onClick={() => this.closeMenu()}
                >
                  {title}
                </li>
              ))}
            </ul>
          </div>
        </Menu>
      </>
    );
  }
}