"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.ImageControl = void 0;

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _core = require("@material-ui/core");

var _Image = _interopRequireDefault(require("@material-ui/icons/Image"));

var _react = _interopRequireWildcard(require("react"));

var _hooks = require("../../hooks");

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

const useStyles = (0, _core.makeStyles)(() => {
  return (0, _core.createStyles)({
    image: {
      maxWidth: '100%',
      height: 'auto'
    },
    fileName: {
      marginTop: '0.5rem',
      textAlign: 'center'
    }
  });
});

const ImageControl = ({
  buttonProps,
  editor
}) => {
  const [open, setOpen] = (0, _react.useState)(false);
  const [uploadedFile, setUploadedFile] = (0, _react.useState)();
  const [isUploadInProgress, setIsUploadInProgress] = (0, _react.useState)(false);
  const fileInput = (0, _react.useRef)(null);
  const classes = useStyles();
  const localization = (0, _hooks.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.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_core.Tooltip, {
    title: localization.imageControl.title
  }, /*#__PURE__*/_react.default.createElement(_core.IconButton, (0, _extends2.default)({
    onClick: handleClickOpen
  }, buttonProps), /*#__PURE__*/_react.default.createElement(_Image.default, null))), /*#__PURE__*/_react.default.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.default.createElement(_core.Dialog, {
    open: open,
    onClose: handleClose,
    "aria-labelledby": "form-dialog-title",
    onExited: () => {
      setUploadedFile(undefined);

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

exports.ImageControl = ImageControl;
//# sourceMappingURL=image-control.js.map