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

import { Avatar, AvatarSize } from "../../components/Avatar";
import { Modal, IModalProps } from "../../components/Modal";
import { Upload, IUploadEvent } from "../../components/Upload";
import { Reveal, RevealType } from "../../components/Reveal";
import { SpriteType } from "../../components/Sprite";

interface IEditNameProps {
  /** Required */
  uploadPhoto: (upload: IUploadEvent) => Promise<any>;

  /** Optional */
  referencePhotoSrc?: string;
  modal?: IModalProps;
  onClose?: () => void;
}

export class EditName extends React.PureComponent<IEditNameProps, {}> {
  public render() {
    return (
      <Modal {...this.props.modal} className="edit-name__modal" renderSections={[
        () => (
          <div className="edit-name">
            <Reveal id="edit-name-upload" className="edit-name__upload" type={RevealType.SlideRightToLeft} mount={true} immediate={{ reveal: true }}>
              <div className="edit-name__avatar">
                <Avatar
                  sprite={{
                    type: SpriteType.FramedProfile,
                  }}
                  size={AvatarSize.Large}
                />
              </div>

              <h2 className="edit-name__title">
                Upload a name picture
              </h2>
              
              <p className="edit-name__subtitle">
                Take a selfie so that friends nearby know that it's you!
              </p>

              <div className="edit-name__btn">
                <Upload
                  button={{
                    text: "Open Camera",
                    icon: {
                      icon: "camera",
                      width: 14,
                      height: 14,
                      vwidth: 20,
                      vheight: 18,
                    },
                  }}
                  capture="user"
                  onUpload={(upload) => {
                    this.props.uploadPhoto(upload);
                  }}
                /> 
              </div>
            </Reveal>
          </div>
        )
      ]}>
      </Modal>
    );
  }
}