import React from 'react';
import msgHandler from './../../utils/iframe/messageHandler';

interface Props {
  style?: React.CSSProperties;
  fileRef: any;
  photoParams: any;
  type: string;
}

const FileUpload: React.FC<Props> = (props) => {
  const uploadFile = async (e: React.ChangeEvent<HTMLInputElement>) => {
    let file = e.target.files ? e.target.files[0] : new Blob();
    let reader = new FileReader();
    await reader.readAsDataURL(file);
    reader.onload = () => {
      let data = {
        data: reader.result,
        path: URL.createObjectURL(file),
      };
      if (data) {
        msgHandler(
          props.photoParams.originId,
          props.photoParams.successCB,
          data
        );
      } else {
        msgHandler(props.photoParams.originId, props.photoParams.failCB);
      }
      msgHandler(props.photoParams.originId, props.photoParams.completeCB);
    };
  };
  const styles = {
    ...props.style,
  };
  return (
    <input
      type={props.type}
      onChange={uploadFile}
      ref={props.fileRef}
      style={styles}
    />
  );
};

export default FileUpload;