import * as _ from "lodash";
import * as React from "react";

import { Button, ButtonSize, ButtonType } from "../../components/Button";
import { Sheet, ISheetProps } from "../../components/Sheet";
import { Image } from "../../components/Image";
import { getImageSrc } from "../../utilities/image";


interface IEditProfileProps {
  /** Required */
  onEditName: () => void;
  onEditProfile: () => void;
  onClose: () => void;

  /** Optional */
  sheet?: ISheetProps;
  imagePrefix?: string;
}

export class EditProfile extends React.Component<IEditProfileProps, {}> {
  public componentDidMount() {}

  public render() {
    return (
      <Sheet {...this.props.sheet}>
        <div className="edit-profile__pill-container sheet--resizable">
          <div className="edit-profile__pill" />
        </div>

        <div className="edit-profile__edit-profileables sheet--resizable">
          <div
            className="edit-profile__edit-profileable sheet--not-resizable"
            onClick={this.props.onEditProfile}
          >
            <div className="edit-profile__edit-profileable-image">
              <Image src={getImageSrc(this.props.imagePrefix, "square-profile.png")} />
            </div>

            <div className="edit-profile__edit-profileable-text">
              Edit Profile Picture
            </div>
          </div>

          <div
            className="edit-profile__edit-profileable sheet--not-resizable"
            onClick={this.props.onEditName}
          >
            <div className="edit-profile__edit-profileable-image">
              <Image src={getImageSrc(this.props.imagePrefix, "pencil.png")} />
            </div>

            <div className="edit-profile__edit-profileable-text">
              Edit Name
            </div>
          </div>
        </div>

        <div className="edit-profile__action">
          <Button type={ButtonType.Light} size={ButtonSize.Large} text="Close" onClick={this.props.onClose} />
        </div>
      </Sheet>
    );
  }
}