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

import { Avatar, IAvatarProps } from "../../components/Avatar";
import { Button, ButtonSize, ButtonType } from "../../components/Button";
import { Sheet, ISheetProps } from "../../components/Sheet";
import { Image } from "../../components/Image";
import { Input } from "../../components/Input";
import { Reveal, RevealType } from "../../components/Reveal";
import { getImageSrc } from "../../utilities/image";
import { Upload, IUploadProps } from "../../components/Upload";

interface IProfileSheetProps {
  /** Required */
  onEditName: (name: string) => void;
  onEditProfile: (file: File) => void;
  onClose: () => void;
  name: string;

  /** Optional */
  avatar?: IAvatarProps;
  sheet?: ISheetProps;
  imagePrefix?: string;
  upload?: IUploadProps;
}

interface IProfileSheetState {
  navigation: "profile" | "edit-name";
}

const defaultState: IProfileSheetState = {
  navigation: "profile",
}

export class ProfileSheet extends React.Component<IProfileSheetProps, IProfileSheetState> {
  public editNameRef: React.RefObject<HTMLInputElement>;
  public state: IProfileSheetState = defaultState;

  constructor(props) {
    super(props);

    this.editNameRef = React.createRef();
  }

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

        <div className="profile-sheet">
          {this.renderProfile(this.state.navigation === "profile")}
          {this.renderEditName(this.state.navigation === "edit-name")}
        </div>

      </Sheet>
    );
  }

  private renderProfile(render: boolean) {
    return (
      <Reveal
        id="profile-sheet-success"
        type={RevealType.SlideRightToLeft}
        mount={render}
        className="profile-sheet"
        immediate={{
          reveal: true,
          hide: false,
        }}
      >
        {this.props.avatar && (
          <div className="profile-sheet__avatar sheet--resizable">
            <Avatar {...this.props.avatar} />
          </div>
        )}

        <h2 className="profile-sheet__name sheet--resizable">
          {this.props.name}
        </h2>

        <div className="profile-sheet__profile-sheetables sheet--resizable">
          <div
            id="profile-sheet-edit-profile"
            className="profile-sheet__profile-sheetable sheet--not-resizable"
          >
            <div className="profile-sheet__profile-sheetable-image">
              <Image src={getImageSrc(this.props.imagePrefix, "square-profile.png")} />
            </div>

            <div className="profile-sheet__profile-sheetable-text">
              Edit Profile Picture
            </div>

            <Upload
              {...this.props.upload}
              onUpload={({ file }) => {
                this.props.onEditProfile(file);
              }}
            />
          </div>

          <div
            className="profile-sheet__profile-sheetable sheet--not-resizable"
            onClick={() => this.setState({
              navigation: "edit-name",
            })}
          >
            <div className="profile-sheet__profile-sheetable-image">
              <Image src={getImageSrc(this.props.imagePrefix, "pencil.png")} />
            </div>

            <div className="profile-sheet__profile-sheetable-text">
              Edit Name
            </div>
          </div>
        </div>

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

  private renderEditName(render: boolean) {
    return (
      <Reveal
        id="profile-sheet-edit-name"
        type={RevealType.SlideRightToLeft}
        mount={render}
        className="profile-sheet"
      >
        <h2 className="profile-sheet__name sheet--resizable">
          Edit Name
        </h2>

        <Input
          type="text"
          id="profile-sheet-edit-name-input"
          placeholder={this.props.name}
          supertext="Full Name"
          innerRef={this.editNameRef}
        />

        <div className="profile-sheet__action">
          <Button
            type={ButtonType.Primary}
            size={ButtonSize.Large}
            text="Save"
            onClick={() => {
              this.props.onEditName(this.editNameRef.current.value)

              this.setState({
                navigation: "profile",
              });
            }}
          />
          <Button
            type={ButtonType.Light}
            size={ButtonSize.Large}
            text="Cancel"
            onClick={() => this.setState({
              navigation: "profile",
            })}
          />
        </div>
      </Reveal>
    );
  }
}