import * as React from "react"
import styled, { withTheme } from "styled-components"
import { Icon, Theme } from "../../.."
import { UserProfilePicture } from "../../ProfilePicture"
import FixScroll from "../../FixScroll"
import gql from "graphql-tag"

import { UserData } from "./UserCard"
import UserCard from "./UserCard"
import withLink from "../withLink"

const hoistStatics = require("hoist-non-react-statics")

const ProfileImage = styled(UserProfilePicture)`
  display: block;
  width: 50%;
  height: 50%;
` as any

const UserInfoContainer = styled.div`
  display: flex;
  justify-content: center;
  align-items: center;
  * {
    text-decoration: none;
  }

  .outside.visible {
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.3);
    position: fixed;
  }

  .pop-over {
    position: absolute;
    bottom: -5px;
    right: -7px;
    min-width: 150px;
    background: white;
    background-clip: padding-box;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 5px;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08);
    z-index: 5;
    transition: all 0.222s linear;
    opacity: 0;
    pointer-events: none;
    transform: translateY(calc(100% + 10px)) translateX(0%);
  }

  .pop-over.visible {
    opacity: 1;
    pointer-events: all;
    transform: translateY(calc(100% + 0px)) translateX(0%);
  }

  .pop-arrow {
    top: 0px;
    right: 10px;
    transform: translate(-50%, -100%);
    clip: rect(0 18px 14px -4px);
    position: absolute;
    &:after {
      content: "";
      display: block;
      width: 14px;
      height: 14px;
      background: #fff;
      transform: rotate(45deg) translate(6px, 6px);
      box-shadow: -1px -1px 1px -1px rgba(0, 0, 0, 0.44);
    }
  }
`

type UserInfoPropTypes = {
  user?: UserData
  loading: boolean
  theme: Theme
  Link: any
}

class UserInfo extends React.Component<UserInfoPropTypes> {
  public static fragments = {
    user: gql`
      fragment UserInfo on User {
        ...UserCard
      }
      ${UserCard.fragments.user}
    `
  }
  public state = {
    showUserCard: false,
    isMount: false
  }

  public toggleUserCard = () => {
    this.setState({
      showUserCard: !this.state.showUserCard
    })
  }
  public showUserCard = () => this.setState({ showUserCard: true })
  public hideUserCard = () => this.setState({ showUserCard: false })

  public componentDidMount() {
    this.setState({
      isMount: true
    })
  }

  public render() {
    const iconColor = this.props.theme.nav.item["icon-color"]
    const Guest = (
      <UserInfoContainer>
        <this.props.Link
          href={`/login?asPath=${
            this.state.isMount ? window.location.href : ""
          }`}
        >
          <div style={{ fontSize: 25 }}>
            <Icon
              name="profile"
              id="guest-menu-popover"
              style={{ color: iconColor }}
            />
          </div>
        </this.props.Link>
      </UserInfoContainer>
    )
    const LoggedIn = this.props.user ? (
      <UserInfoContainer>
        <div style={{ position: "relative", zIndex: 5 }}>
          <div
            className={"outside" + (this.state.showUserCard ? " visible" : "")}
            onTouchMove={this.handlePreventDefault}
            onClick={this.hideUserCard}
          />
          <ProfileImage
            id="profile-menu-toggle-button"
            src={
              this.props.user.profilePicture
                ? this.props.user.profilePicture
                : null
            }
            style={{ width: 30, height: 30, cursor: "pointer" }}
            onClick={this.showUserCard}
          />
          <div
            className={"pop-over" + (this.state.showUserCard ? " visible" : "")}
          >
            <UserCard
              user={this.props.user}
              loading={this.props.loading}
              onClose={this.hideUserCard}
            />
            <div className="pop-arrow" />
          </div>
          {this.state.showUserCard ? <FixScroll /> : null}
        </div>
      </UserInfoContainer>
    ) : null
    return this.props.user ? LoggedIn : Guest
  }

  private handlePreventDefault(e) {
    e.preventDefault()
  }
}

export { UserData }

export default hoistStatics(withTheme(withLink(UserInfo)), UserInfo)