import _extends from "@babel/runtime/helpers/extends";
import { Button, CircularProgress, createStyles, Dialog, DialogActions, DialogContent, DialogTitle, IconButton, makeStyles, Tooltip } from '@material-ui/core';
import ImageIcon from '@material-ui/icons/Image';
import React, { useRef, useState } from 'react';
import { useLocalization } from "../../hooks/index.js";
const useStyles = makeStyles(() => {
  return createStyles({
    image: {
      maxWidth: '100%',
      height: 'auto'
    },
    fileName: {
      marginTop: '0.5rem',
      textAlign: 'center'
    }
  });
});
export const ImageControl = _ref => {
  let {
    buttonProps,
    editor
  } = _ref;
  const [open, setOpen] = useState(false);
  const [uploadedFile, setUploadedFile] = useState();
  const [isUploadInProgress, setIsUploadInProgress] = useState(false);
  const fileInput = useRef(null);
  const classes = useStyles();
  const localization = useLocalization();

  const handleClickOpen = () => {
    if (isUploadInProgress) {
      return;
    }

    fileInput.current && fileInput.current.click();
  };

  const handleClose = () => {
    setOpen(false);
  };

  const addImage = () => {
    if (uploadedFile !== null && uploadedFile !== void 0 && uploadedFile.src) {
      editor.chain().focus().setImage({
        src: uploadedFile.src
      }).run();
    }
  };

  const imageToBase64 = image => {
    return new Promise((resolve, reject) => {
      const reader = new FileReader();

      reader.onload = e => {
        var _e$target;

        if ((_e$target = e.target) !== null && _e$target !== void 0 && _e$target.result) {
          resolve(e.target.result);
        } else {
          reject(e);
        }
      };

      reader.readAsDataURL(image);
    });
  };

  const upload = async fileToUpload => {
    if (!fileToUpload) {
      return;
    }

    setIsUploadInProgress(true);
    const imageSrc = await imageToBase64(fileToUpload);
    const image = new File([fileToUpload], fileToUpload.name, {
      type: fileToUpload.type
    });
    image.src = imageSrc;
    setIsUploadInProgress(false);
    setUploadedFile(image);
  };

  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Tooltip, {
    title: localization.imageControl.title
  }, /*#__PURE__*/React.createElement(IconButton, _extends({
    onClick: handleClickOpen
  }, buttonProps), /*#__PURE__*/React.createElement(ImageIcon, null))), /*#__PURE__*/React.createElement("input", {
    onChange: ev => {
      setOpen(true);
      ev.target.files && upload(ev.target.files[0]);
    },
    style: {
      display: 'none'
    },
    ref: fileInput,
    type: "file",
    accept: "image/*",
    multiple: false
  }), /*#__PURE__*/React.createElement(Dialog, {
    open: open,
    onClose: handleClose,
    "aria-labelledby": "form-dialog-title",
    onExited: () => {
      setUploadedFile(undefined);

      if (fileInput.current) {
        fileInput.current.value = '';
      }
    }
  }, /*#__PURE__*/React.createElement(DialogTitle, {
    id: "form-dialog-title"
  }, localization.imageControl.title), /*#__PURE__*/React.createElement(DialogContent, null, uploadedFile ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("img", {
    src: uploadedFile.src,
    alt: "",
    className: classes.image
  }), /*#__PURE__*/React.createElement("div", {
    className: classes.fileName
  }, uploadedFile.name)) : /*#__PURE__*/React.createElement("div", {
    style: {
      textAlign: 'center'
    }
  }, /*#__PURE__*/React.createElement(CircularProgress, null))), /*#__PURE__*/React.createElement(DialogActions, null, /*#__PURE__*/React.createElement(Button, {
    onClick: handleClose
  }, localization.common.cancel), /*#__PURE__*/React.createElement(Button, {
    onClick: () => {
      handleClose();
      addImage();
    },
    color: "primary"
  }, localization.imageControl.submit))));
};
//# sourceMappingURL=image-control.js.map