import * as React from "react";
import styled from "styled-components";
import { Drawer } from "@material-ui/core";
import { Link } from "react-router-dom";
import Menu from "@material-ui/icons/Menu";

import { Logo } from "./Logo";
import theme from "@sc/plugins/misc/v2/blocks/weblayouts/theme";
import { EditorMode } from "@sc/modules/v2/Editor/types";

interface HamburgerProps {
  mode?: EditorMode;
  hamburgerIconStyle: any;
  logo?: string;
  logoHref?: string;
  logoStyle?: any;
  items?: any[];
  linkStyle?: any;
}

export const Hamburger: React.FC<HamburgerProps> = ({
  hamburgerIconStyle,
  linkStyle,
  logoHref,
  logo,
  logoStyle,
  items,
}) => {
  const [menuIsShowing, setMenuIsShowing] = React.useState(false);
  const [menuIsHighlighted, setMenuIsHighlighted] = React.useState(false);

  const hamburgerMenuLinkStyle = {
    ...linkStyle,
    color: "black",
    textAlign: "center",
    display: "block",
    fontSize: "18pt",
    padding: "20px 80px",
  };
  const LI = styled.li`
    &:hover {
      text-decoration: underline;
    }
  `;
  return (
    <>
      <Drawer
        anchor="right"
        open={menuIsShowing}
        onClose={() => setMenuIsShowing(false)}
      >
        <div
          style={{
            padding: 50,
            maxWidth: 350,
            background: theme.backgroundColor,
            textAlign: "center",
          }}
        >
          <Logo logoHref={logoHref} logo={logo} logoStyle={logoStyle} />
        </div>
        <div style={{ marginTop: 80 }}>
          <Link to={logoHref} style={{ textDecoration: "none" }}>
            <LI style={hamburgerMenuLinkStyle}>Home</LI>
          </Link>
          {items.map((itm) => (
            <Link to={itm.href} style={{ textDecoration: "none" }}>
              <LI style={hamburgerMenuLinkStyle}>{itm.caption}</LI>
            </Link>
          ))}
        </div>
      </Drawer>
      <div
        style={{
          backgroundColor: menuIsHighlighted
            ? `rgb(255,255,255, 0.15)`
            : "transparent",
          float: "right",
          cursor: "pointer",
          ...hamburgerIconStyle,
        }}
        onClick={() => setMenuIsShowing(!menuIsShowing)}
        onMouseEnter={() => setMenuIsHighlighted(true)}
        onMouseLeave={() => setMenuIsHighlighted(false)}
      >
        <Menu
          style={{
            // color: "white",
            marginTop: 2,
          }}
        />
      </div>
    </>
  );
};

Hamburger.defaultProps = {
  hamburgerIconStyle: {
    borderRadius: "100%",
    width: 40,
    height: 40,
    border: "1px solid #333",
    padding: 4,
    marginTop: 5,
  },
};