import React, { useState } from "react";
import styled, { keyframes } from "styled-components";
import { Avatar, Grid, Badge } from "../../";
import { mobileWidth, primaryColor, primaryTxtColor } from "../../config";

const Sidebar = ({
  active = "",
  routes = [],
  avatar,
  role,
  name,
  Router,
}: any) => {
  const [collapsed, setCollapsed] = useState(true);
  const location = active;

  const makeStr = (bool: boolean): string => String(bool);
  const activeStyle = {
    borderLeft: ".3em solid " + primaryColor,
    color: primaryColor,
  };

  const events = {
    onMouseEnter: () => setCollapsed(false),
    onMouseLeave: () => setCollapsed(true),
  };

  const collapsedHidden = collapsed ? "hide" : "";
  return (
    <div {...events}>
      <LeftNav background={""} collapsed={collapsed}>
        {avatar && (
          <Grid.Item hideOnMobile>
            <Avatar medium={!collapsed} src={avatar} />
          </Grid.Item>
        )}
        {name && (
          <Grid.Item
            hideOnMobile
            className={"txt-md txt-center grid " + collapsedHidden}
          >
            <div className="capitalize"> {name}</div>
          </Grid.Item>
        )}

        {role && (
          <Grid.Item
            hideOnMobile
            className={"txt-md txt-center grid " + collapsedHidden}
          >
            <Badge
              style={{ fontSize: ".7em", padding: ".1em .4em", borderWidth: 2 }}
              inverted
              className={"shadow capitalize " + collapsedHidden}
            >
              {role}
            </Badge>
          </Grid.Item>
        )}

        {routes.map(({ to, name, icon }: any) => {
          return (
            <Router key={name} to={to[0] || "/"}>
              <NavItem
                collapsed={collapsed}
                active={makeStr(
                  to.reduce((acc: boolean, _: any) => acc || false, false)
                )}
                style={{
                  gridTemplateColumns: collapsed ? "1fr" : "auto 1fr",
                  ...(to.includes(location) ? activeStyle : {}),
                }}
              >
                <i
                  style={{ fontSize: "1.6em", padding: "0 .3em" }}
                  className={icon}
                ></i>
                <div className={"txt-center hide-mobile " + collapsedHidden}>
                  {name}
                </div>
                <div style={{ height: "2px" }}></div>
                <div style={{ width: "100%", height: "2px" }}>
                  <Line />
                </div>
              </NavItem>
            </Router>
          );
        })}
      </LeftNav>
    </div>
  );
};

const Line = styled.hr`
  transform: scaleX(0);
`;
const border = keyframes`from { transform: scaleX(0); } to { transform: scaleX(1);}`;

const NavItem = styled.div<{ active: string; collapsed: boolean }>`
  display: grid;
  text-decoration: none;
  place-items: center;
  color: ${primaryTxtColor};
  font-size: 1.35em;
  cursor: pointer;
  padding: 0.8em 0.4em;

  @media (max-width: ${mobileWidth}) {
    border-left: 0 !important;
    grid-template-columns: 1fr;
    padding-left: 0.3em;
  }

  &:hover ${Line} {
    color: ${primaryColor};
    animation: ${border} 300ms ease-out;
    transform: scaleX(1);
  }
`;

const LeftNav = styled.div<{ background: string; collapsed: boolean }>`
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  font-size: 0.8em;
  display: grid;
  padding: 0.3em;
  position: fixed;
  z-index: 100;
  left: 0;
  bottom: 0;
  top: 0;
  color: ${primaryColor};
  ${({ collapsed }: any) => `width: ${collapsed ? "6em" : "17em"};`}
  grid-template-rows: repeat(16, auto);
  align-items: center;
  justify-items: stretch;
  transition: 100ms ease-out;
  background-color: white;
  background-image: url(${(props) => props.background});
  background-attachment: fixed;
  @media (max-width: ${mobileWidth}) {
    height: 55px;
    width: 100vw;
    top: inherit;
    bottom: 0;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr;
  }
`;

export default Sidebar;