import React, { useState } from "react";
import { CSSTransition } from "react-transition-group";
import classNames from "classnames";
import { Link } from "react-router-dom";
import styled from "styled-components";
import { SidebarData } from "./SidebarData";
import Submenu from "./Submenu";
import SidebarLink from "./Submenu";
import Burger from "./Burger";

export type Props = {
  className?: string;
};

const SideBarNav = styled.div<{ sidebar: boolean }>`
  left: ${({ sidebar }) => (sidebar ? "0" : "100%")};
`;

const Sidebar = ({ className }: Props) => {
  const [sidebar, setSidebar] = useState(false);
  const toggleSidebar = () => setSidebar(!sidebar);

  return (
    <nav className="relative">
      {/* Nav Start */}
      <div
        className="Burger flex items-center justify-start "
        onClick={toggleSidebar}
      >
        <Burger className="w-6 bg-red-400" />
      </div>
      {/* Nav End */}

      {/* Side bar Nav Start Lower one */}
      {sidebar && (
        <div
          className="SideBarNav h-44 w-48 bg-sky-800 absolute -right-8 top-12 
          transition duration-1000 "
        >
          {/* Side bar Wrap Start */}
          <div className="SidebarWrap pl-2 pt-2 h-4/5 flex flex-col items-center justify-around ">
            {/* Burger Start */}
            {/* <div
              className="Burger relative w-6 h-6 flex items-center justify-start "
              onClick={showSidebar}
            >
              <span
                className="w-5 border h-0 border-black rounded   
        
          before:content-[''] before:w-5 before:border before:border-black 
          before:absolute before:rounded before:top-1 before:left-0
          
          after:content-[''] after:w-5 after:border after:border-black 
          after:absolute after:rounded after:bottom-1 after:left-0"
              ></span>
            </div> */}
            {/* Burger End */}
            {SidebarData.map((item, index) => {
              return <Submenu item={item} key={index} />;
            })}
          </div>
          {/* Side bar Wrap End */}
        </div>
      )}
    </nav>
  );
};

export default Sidebar;