import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import React, { useState, useCallback, useEffect } from "react";
import { Typography } from "@webiny/ui/Typography";
import { Icon } from '@whalecloud/fdx';
import ImageDialog from "../../../../../components/ImageDialog";
import OlineImage from "../../../../../components/OlineImage";

var BackgroundImg = function BackgroundImg(props) {
  var dependentVar = props.dependentVar,
      onChange = props.onChange,
      _props$defaultValue = props.defaultValue,
      defaultValue = _props$defaultValue === void 0 ? '' : _props$defaultValue;

  var _useState = useState(false),
      _useState2 = _slicedToArray(_useState, 2),
      imgVisible = _useState2[0],
      setImgVisible = _useState2[1];

  var _useState3 = useState(defaultValue),
      _useState4 = _slicedToArray(_useState3, 2),
      imageSrc = _useState4[0],
      setImageSrc = _useState4[1];

  var onImageChange = useCallback(function (value) {
    setImgVisible(false);
    setImageSrc(value);
    onChange(value);
  }, [dependentVar]);
  useEffect(function () {
    setImageSrc(defaultValue);
  }, [defaultValue]);
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Typography, {
    use: "overline"
  }, "\u80CC\u666F\u56FE\u7247"), /*#__PURE__*/React.createElement(Icon, {
    type: "plus",
    onClick: function onClick() {
      return setImgVisible(true);
    }
  }), /*#__PURE__*/React.createElement(ImageDialog, {
    visible: imgVisible,
    imageClick: onImageChange
  }), /*#__PURE__*/React.createElement("div", null, imageSrc && /*#__PURE__*/React.createElement(OlineImage, {
    imageInfo: imageSrc,
    style: {
      width: '150px'
    }
  })));
};

export default BackgroundImg;
//# sourceMappingURL=index.js.map