import React from "react";
import SkeletonThemeWrapper from "../../customization-cornor/skeletonCustomization";

import uploadButtonPropTypes, {
  defaultProps,
  propsDescription
} from "./UploadButton.propTypes";

export default function UploadButtonBehaviour(props) {
  let hiddenFileInput = React.createRef();

  function handleClick() {
    hiddenFileInput.current.click();
  }
  function handleChange(event) {
    event.persist();
    let { onHandleFile } = props;
    let fileUploaded = event.target.files;
    let fileUploadedList = Object.values(fileUploaded);
    onHandleFile && onHandleFile(fileUploadedList, event);
  }

  let renderProps = {
    eleRef: hiddenFileInput,
    onClick: handleClick,
    onChange: handleChange
  };

  let { renderComponent, ...basicProps} = props;
  return <SkeletonThemeWrapper basicProps={basicProps} renderProps={renderProps} component={renderComponent} />;
}
UploadButtonBehaviour.propTypes = uploadButtonPropTypes;
UploadButtonBehaviour.defaultProps = defaultProps;
UploadButtonBehaviour.propsDescription = propsDescription;
