text: import React from "react";
  // used for making the prop types of this component
  import PropTypes from "prop-types";
  
  import { Button } from "reactstrap";
  
  import defaultImage from "assets/img/image_placeholder.jpg";
  import defaultAvatar from "assets/img/placeholder.jpg";
  
  const ImageUpload = ({
    avatar,
    addBtnColor,
    addBtnClasses,
    changeBtnColor,
    changeBtnClasses,
    removeBtnColor,
    removeBtnClasses,
    onUpload,
  }) => {
    const [file, setFile] = React.useState(null);
    const [imagePreviewUrl, setImagePreviewUrl] = React.useState(
      avatar ? defaultAvatar : defaultImage
    );
    const fileInput = React.useRef(null);
    const handleImageChange = (e) => {
      e.preventDefault();
      let reader = new FileReader();
      let file = e.target.files[0];
      // console.log(file);
      reader.onloadend = () => {
        setFile(e.target.files[0]);
        setImagePreviewUrl(reader.result);
      };
      reader.readAsDataURL(file);
    };
    
    const handleSubmit = () => {
      file.text().then((d) => {
        onUpload(file);
      });
      setFile(null);
    };
  
    const handleClick = () => {
      fileInput.current.click();
    };
    const handleRemove = () => {
      setFile(null);
      setImagePreviewUrl(avatar ? defaultAvatar : defaultImage);
      fileInput.current.value = null;
    };
    return (
      <div className="fileinput text-center">
        <input
          type="file"
          accept="image/png, image/jpeg"
          onChange={handleImageChange}
          ref={fileInput}
        />
        <div className={"thumbnail" + (avatar ? " img-circle" : "")}>
          <img src={imagePreviewUrl} alt="..." />
        </div>
        <div>
          {file === null ? (
            <Button
              color={addBtnColor}
              className={addBtnClasses}
              onClick={() => handleClick()}
            >
              {avatar ? "Add Photo" : "Select image"}
            </Button>
          ) : (
            <span>
              <Button
                color={changeBtnColor}
                className={changeBtnClasses}
                onClick={() => handleClick()}
              >
                Change
              </Button>
              {avatar ? <br /> : null}
              <Button
                color={removeBtnColor}
                className={removeBtnClasses}
                onClick={() => handleRemove()}
              >
                <i className="fa fa-times" /> Remove
              </Button>
              <Button
                color={addBtnColor}
                className={addBtnClasses}
                onClick={() => handleSubmit()}
              >
                <i className="fa fa-save" /> Save
              </Button>
            </span>
          )}
        </div>
      </div>
    );
  };
  
  ImageUpload.defaultProps = {
    avatar: false,
    removeBtnClasses: "btn-round",
    removeBtnColor: "danger",
    addBtnClasses: "btn-round",
    addBtnColor: "primary",
    changeBtnClasses: "btn-round",
    changeBtnColor: "primary",
  };
  
  ImageUpload.propTypes = {
    avatar: PropTypes.bool,
    removeBtnClasses: PropTypes.string,
    removeBtnColor: PropTypes.oneOf([
      "default",
      "primary",
      "secondary",
      "success",
      "info",
      "warning",
      "danger",
      "link",
    ]),
    addBtnClasses: PropTypes.string,
    addBtnColor: PropTypes.oneOf([
      "default",
      "primary",
      "secondary",
      "success",
      "info",
      "warning",
      "danger",
      "link",
    ]),
    changeBtnClasses: PropTypes.string,
    changeBtnColor: PropTypes.oneOf([
      "default",
      "primary",
      "secondary",
      "success",
      "info",
      "warning",
      "danger",
      "link",
    ]),
  };
  
  export default ImageUpload;
  