import * as React from "react";
import IJitzSPContext from "../data/interfaces/IJitzSPContext";
import { Persona, PersonaPresence, PersonaSize } from "@fluentui/react";
import UserInfo from "../services/UserService";
import { IPersonOrGroup } from "../common/IModels";
import UtilityService from "../services/UtilityService";

export interface IPersonInfoProps {
  userId: number;
  email?: string;
  title?: string;
  department?: string;
  location?: string;
  context?: IJitzSPContext;
  siteUrl?: string;
  imageUrl?: string;
  size?: PersonaSize;
  className?: string;
  hidePersonaDetails?: boolean;
}

export interface IPersonInfoState {
  user: {
    email?: string;
    title?: string;
    department?: string;
    location?: string;
  };
}

export class JitzPersonInfo extends React.Component<
  IPersonInfoProps,
  IPersonInfoState
> {
  private _userInfo!: UserInfo;

  constructor(props: IPersonInfoProps, state: IPersonInfoState) {
    super(props);
    this.state = {
      user: {},
    };
  }

  public componentDidMount() {
    if (
      this.props.userId > 0 &&
      this.props.email == undefined &&
      this.props.title == undefined
    ) {
      this.loadUser(this.props.userId);
    }
  }

  public componentWillReceiveProps(nextProps: IPersonInfoProps) {
    if (
      nextProps.userId > 0 &&
      nextProps.email == undefined &&
      nextProps.title == undefined
    ) {
      this.loadUser(nextProps.userId);
    }
  }

  private loadUser = (id: number) => {
    if (this.props.context != undefined) {
      this._userInfo = new UserInfo(this.props.context);
      this._userInfo.getUserById(id).then((userInfo: IPersonOrGroup) => {
        this.setState({
          user: {
            email: userInfo.Email,
            title: userInfo.Title,
            // department: userInfo.Department,
          },
        });
      });
    }
  };

  public render(): React.ReactElement<IPersonInfoProps> {
    // const userDetails = this.state.user;
    const userDetails = {
      imageUrl: UtilityService.getProfilePictureUrl(
        this.props.siteUrl || this.props.context!.siteUrl,
        this.props.email || this.state.user.email || "",
        "1"
      ),
      // this.props.imageUrl ||
      // (this.props.siteUrl || this.props.context!.siteUrl) +
      //   `/_layouts/15/userphoto.aspx?size=${
      //     this.props.size == PersonaSize.size48 ||
      //     this.props.size == PersonaSize.size56 ||
      //     this.props.size == PersonaSize.size72 ||
      //     this.props.size == PersonaSize.size100 ||
      //     this.props.size == PersonaSize.size120
      //       ? "L"
      //       : "M"
      //   }&accountname=${this.props.email || this.state.user.email}`,
      imageInitials: "",
      primaryText: this.props.title || this.state.user.title,
      secondaryText: this.props.department || this.state.user.department,
      tertiaryText: "",
      optionalText: "",
    };
    return (
      <Persona
        title={this.props.hidePersonaDetails ? userDetails.primaryText : ""}
        {...userDetails}
        className={this.props.className}
        size={this.props.size || PersonaSize.size24}
        // presence={PersonaPresence.online} //TODO: Actual presence
        hidePersonaDetails={this.props.hidePersonaDetails || false}
      />
    );
  }
}