import * as _ from "lodash";
import * as React from "react";
import { FilePond as FP } from 'react-filepond';

import { getImageSrc } from "../../utilities/image";

export interface IFilePondProps {
  onUpload?: (files: File[]) => void;
  imagePrefix?: string;
}

export class FilePond extends React.PureComponent<IFilePondProps, {}> {
  public ref: React.RefObject<any>;

  constructor(props) {
    super(props);

    this.ref = React.createRef();
  }

  public componentDidMount() {
    // TODO: Find a better way to add icon element to <FP>
    const node = this.ref.current as HTMLElement;
    const labelParentNode = node.querySelector(".filepond--drop-label");
    const imageNode = new Image();
    imageNode.className = "image image--portrait file-pond__add-photo-icon";
    imageNode.src = getImageSrc(this.props.imagePrefix, "gray-add-photo.png");
    labelParentNode.prepend(imageNode);
  }

  public render() {
    return (
      <div
        ref={this.ref}
        className="file-pond"
      >
        <FP
          labelIdle={"Add a photo"}
          allowMultiple={true}
          onupdatefiles={fileItems => {
            if (this.props.onUpload) {
              this.props.onUpload(fileItems.map(fileItem => fileItem.file))
            }
          }}
        />
      </div>
    );
  }
}