import styled from "@emotion/styled";
import React, { useContext, useEffect, useState } from "react";
import { FiInbox, FiSettings } from "react-icons/fi";
import { Link, RouteComponentProps, withRouter } from "react-router-dom";
import { DARK_TERTIARY_THREE } from "../../../../shared/colors";
import {
  PlatformProps,
  TAB,
  UserWithProfilePicture,
} from "../../../../shared/types";
import PlatformContext from "../../../platform/PlatformContext";
import withPlatform from "../../../platform/withPlatform";
import Logo from "../../icons/Logo";

type Props = {
  activeTab: TAB;
  user: UserWithProfilePicture;
} & PlatformProps &
  RouteComponentProps;

type State = {
  showFeedbackModal: boolean;
};

function SideBar(props: Props) {
  const [showFeedbackModal, setShowFeedbackModal] = useState<boolean>(false);
  const { showSidebar, setShowSidebar } = useContext(PlatformContext);

  useEffect(() => {
    props.manager.bind(
      "g i",
      () => {
        props.history.push("/");
      },
      "SideBar",
      "Go to inbox",
      1
    );
    props.manager.bind(
      "g f",
      () => {
        props.history.push("/insights");
      },
      "SideBar",
      "Go to insights",
      1
    );
    props.manager.bind(
      "g p",
      () => {
        props.history.push("/people");
      },
      "SideBar",
      "Go to people",
      1
    );
    props.manager.bind(
      "g s",
      () => {
        props.history.push("/settings");
      },
      "SideBar",
      "Go to settings",
      1
    );
    return () => {
      props.manager.unbind("g i", "SideBar");
      props.manager.unbind("g f", "SideBar");
      props.manager.unbind("g s", "SideBar");
      props.manager.unbind("g p", "SideBar");
    };
  }, []);

  return (
    <Background
      isOpen={showSidebar}
      onClick={() => {
        setShowSidebar(false);
      }}
    >
      <Container
        isOpen={showSidebar}
        onClick={(e) => {
          e.stopPropagation();
        }}
      >
        <LogoContainer>
          <Logo width="30px" height="30px" />
          <Version>v1.0.0</Version>
          <ProfilePicture
            onClick={() => {
              props.history.push("/settings");
            }}
          >
            {props.user.profilePictureUrl ? (
              <Image src={props.user.profilePictureUrl} />
            ) : null}
          </ProfilePicture>
        </LogoContainer>
        <Link to="/">
          <Tab active={props.activeTab === TAB.HOME}>
            <FiInbox />
            <div style={{ paddingLeft: 12 }}>Inbox</div>
          </Tab>
        </Link>
        <Link to="/settings">
          <Tab active={props.activeTab === TAB.SETTINGS}>
            <FiSettings />
            <div style={{ paddingLeft: 12 }}>Settings</div>
          </Tab>
        </Link>
        <ContactUsContainer onClick={() => {}}>
          {/* <Help />z */}
          {/* &nbsp; Help */}
        </ContactUsContainer>
      </Container>
    </Background>
  );
}

export default withPlatform(withRouter(SideBar));

const Background = styled.div<{ isOpen: boolean }>`
  display: ${(props) => (props.isOpen ? "flex" : "none")};
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: ${(props) =>
    props.isOpen ? "rgba(0, 0, 0, 0.3)" : "none"};
  transition: 0.16s ease-in-out;
  z-index: 100;
  color: black;
`;

const ContactUsContainer = styled.div`
  display: flex;
  align-items: center;
  margin-top: auto;
  height: 40px;
  padding-left: 20px;
  padding-right: 20px;
  margin-bottom: 20px;
  cursor: pointer;
  :hover {
    background-color: #f4f6fb;
  }
  transition: background-color 0.16s ease-in-out;
`;

const Image = styled.img`
  display: block;
  max-width: 30px;
  max-height: 30px;
  object-fit: cover;
`;

const Version = styled.div`
  margin-left: 10px;
  font-size: 12px;
  color: black;
`;

const ProfilePicture = styled.div`
  cursor: pointer;
  margin-left: auto;
  margin-right: 20px;
  height: 30px;
  width: 30px;
  border-radius: 15px;
  background-color: ${DARK_TERTIARY_THREE};
  overflow: hidden;
  display: flex;
`;

const LogoContainer = styled.div`
  display: flex;
  width: 219px;
  align-items: center;
  height: 60px;
  margin-left: 20px;
`;

const Container = styled.div<{ isOpen: boolean }>`
  display: flex;
  flex-direction: column;
  background-color: white;
  padding-top: 60px;
  width: 240px;
  justify-content: space-between;
  transform: ${(props) =>
    props.isOpen ? "translateX(0)" : "translateX(-100%)"};
  transition: 0.3s ease-in-out;
`;

const Tab = styled.div<{ active: boolean }>`
  display: flex;
  align-items: center;
  padding-left: 20px;
  padding-right: 60px;
  padding-top: 8px;
  padding-bottom: 8px;
  font-size: 1em;
  :focus {
    outline: none;
  }
  :hover {
    background-color: #f4f6fb;
  }
  transition: 0.16s ease-in-out;
`;