import { keyframes } from "@emotion/core";
import styled from "@emotion/styled";
import { inject, observer } from "mobx-react";
import React, { useState } from "react";
import { FiChevronDown } from "react-icons/fi";
import { RouteComponentProps, withRouter } from "react-router-dom";
import {
  LIGHT_SECONDARY_FIVE,
  LIGHT_SECONDARY_FOUR,
  LIGHT_SECONDARY_THREE,
  LIGHT_SECONDARY_TWO,
} from "../../shared/colors";
import { CurrentUser_me } from "../graphql/generated/types";
import { StoreProps } from "../platform/SlideshowStore";
import withPlatform, { PlatformProps } from "../platform/withPlatform";
import { setItem } from "../storage";
import { ProfilePicture } from "./ProfilePicture";
import ClickOutside from "./shared/ClickOutside";

type Props = {
  user: CurrentUser_me;
} & PlatformProps &
  StoreProps &
  RouteComponentProps;

function ProfileTab(props: Props) {
  const [showSettings, setShowSettings] = useState<boolean>(false);
  return (
    <Container
      onMouseDown={(e) => e.stopPropagation()}
      onClick={(e) => {
        setShowSettings(!showSettings);
        e.stopPropagation();
      }}
    >
      <Content>
        <VisibleTab>
          <ProfilePicture user={props.user} store={props.store} />
          <FiChevronDown
            style={{ marginLeft: 8, color: LIGHT_SECONDARY_THREE }}
          />
        </VisibleTab>
        <TemporaryDropdown visible={showSettings}>
          <ClickOutside onClickOutside={() => setShowSettings(false)}>
            <SettingsItems>
              <SettingItem
                onClick={(e) => {
                  props.history.push("/");
                }}
              >
                Change workspaces
              </SettingItem>
              <SettingItem
                onClick={(e) => {
                  props.store.showSettingsModal.set(true);
                }}
              >
                Settings
              </SettingItem>
              <SettingItem
                onClick={(e) => {
                  props.store.showChangelogModal.set(true);
                }}
              >
                Changelog
              </SettingItem>
              <SettingItem
                onClick={async (e) => {
                  await setItem("authToken", null);
                  window.location.reload();
                }}
              >
                Log out &nbsp;
                <div
                  style={{
                    display: "inline-block",
                    color: LIGHT_SECONDARY_FOUR,
                  }}
                >
                  ({props.user.email})
                </div>
              </SettingItem>
            </SettingsItems>
          </ClickOutside>
        </TemporaryDropdown>
      </Content>
    </Container>
  );
}

export default withPlatform(withRouter(inject("store")(observer(ProfileTab))));

const Background = styled.div`
  position: absolute;
  width: 100%;
  height: 100%;
`;

const SettingItem = styled.div`
  display: flex;
  height: 28px;
  font-size: 14px;
  color: ${LIGHT_SECONDARY_TWO};
  align-items: center;
  padding: 4px 14px;
  :hover {
    background-color: ${LIGHT_SECONDARY_FIVE};
  }
  :first-of-type {
    margin-top: 8px;
  }
  :last-of-type {
    margin-top: 8px;
    margin-bottom: 8px;
  }
  transition: 0.12s ease-in-out;
`;

const SettingsItems = styled.div`
  border-radius: 8px;
  width: 270px;
`;

const Content = styled.div`
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
`;

const VisibleTab = styled.div`
  display: flex;
  align-items: center;
  border-radius: 8px;
  padding: 4px;
  :hover {
    background-color: rgba(0, 0, 0, 0.05);
  }
  transition: 0.12s ease-in-out;
`;

const Container = styled.div`
  position: absolute;
  top: 8px;
  right: 16px;
`;

const getDropdownRootKeyFrame = (visible: boolean) => {
  return keyframes`
    from {
      transform: ${!visible ? "rotateX(0)" : "rotateX(-15deg)"}; 
      opacity: ${!visible ? 1 : 0};
    }
    to {
      transform: ${!visible ? "rotateX(-15deg)" : "rotateX(0)"};
      opacity: ${!visible ? 0 : 1};
    }
`;
};

const TemporaryDropdown = styled.div<{ visible: boolean }>((props) => {
  return {
    transformOrigin: "0 0",
    animationName: `${getDropdownRootKeyFrame(props.visible)}`,
    animationDuration: "160ms",
    /* use 'forwards' to prevent flicker on leave animation */
    animationFillMode: "forwards",
    display: "flex",
    flexDirection: "column",
    justifyContent: "flex-start",
    alignItems: "flex-start",
    position: "absolute",
    top: "36px",
    right: "-4px",
    borderRadius: "8px",
    zIndex: 20,
    boxShadow:
      "0 50px 100px -20px rgba(50, 50, 93, 0), 0 30px 60px -30px rgba(0, 0, 0, 0.3), 0 -18px 60px -10px rgba(0, 0, 0, 0.05)",
    backgroundColor: "#ffffff",
    ...(!props.visible && { display: "none" }),
  };
});

const Participant = styled.div<{ color: string }>`
  display: flex;
  height: 24px;
  width: 24px;
  border-radius: 12px;
  background-color: ${(props) => props.color};
  margin-right: 8px;
  :last-of-type {
    margin-right: 0px;
  }
`;