import * as React from "react";

import { Button, IButtonProps } from "../Button";
import { Link, ILinkProps } from "../Link";

export interface IUploadEvent {
  image?: any;
  file?: File;
  files?: FileList;
}

export interface IUploadProps {
  button?: IButtonProps;
  link?: ILinkProps;
  onUpload?: (upload: IUploadEvent) => void;
  capture?: string;
  multiple?: boolean;
}

export const Upload = ({ button, link, onUpload, capture, multiple }: IUploadProps) => ( 
  <div className="upload__container">
    {button && (
      <Button {...button} />
    )}
    {link && (
      <Link {...link} />
    )}
    <input
      className="upload"
      type="file" 
      accept="image/*"
      {...capture && { capture }}
      {...multiple && { multiple }}
      onChange={(e) => {
        onUpload({
          file: e.target.files.item(0),
          files: e.target.files,
          image: ((file: File) => {
            if (file) {
              const img = new Image();
              img.src = URL.createObjectURL(file);
              return img;
            }

            return null;
          })(e.target.files.item(0)),
        });
      }}
    />
  </div>
)