import _regeneratorRuntime from "@babel/runtime/regenerator";
import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import _objectSpread from "@babel/runtime/helpers/objectSpread2";
import _isEmpty from "lodash/isEmpty";
import _isEqual from "lodash/isEqual";
import _set from "lodash/set";
import React, { useCallback, useState } from "react";
import { connect } from "../../../redux";
import styled from "@emotion/styled";
import isNumeric from "isnumeric";
import { Modal } from '@whalecloud/fdx';
import { getElement } from "../../../selectors";
import ResourceGroup from "../../../components/ResourceGroup";
import OlineImage from "../../../components/OlineImage";
import { AssetsTypeGroup } from "../../../../utils/resource";
import img from "../../../assets/banner01.png";
var position = {
  left: "flex-start",
  center: "center",
  right: "flex-end"
};
var AlignImage = /*#__PURE__*/styled("div", {
  target: "e101zeku0",
  label: "AlignImage"
})(function (props) {
  return {
    position: 'relative',
    display: 'inline-block',
    margin: '0 auto',
    img: {
      alignSelf: position[props.align]
    },
    '.ButtonStyle': {
      position: 'absolute',
      left: 0,
      top: 0,
      width: '100%',
      height: '100%',
      display: 'none',
      justifyContent: 'center',
      alignItems: 'center',
      background: 'rgb(0,0,0,0.4)',
      color: '#fff',
      cursor: 'pointer'
    },
    '&:hover': {
      '.ButtonStyle': {
        display: 'flex'
      }
    }
  };
});

var ImageContainer = function ImageContainer(props) {
  var horizontalAlign = props.horizontalAlign,
      updateElement = props.updateElement,
      element = props.element,
      elementStyle = props.elementStyle;

  var image = _objectSpread({}, props.image);

  var imgStyle = {
    width: null,
    height: null
  };

  if (image.width) {
    var width = image.width;
    imgStyle.width = isNumeric(width) ? parseInt(width) : width;
  }

  if (image.height) {
    var height = image.height;
    imgStyle.height = isNumeric(height) ? parseInt(height) : height;
  }

  var style = {
    display: 'inline-block',
    maxWidth: '100%',
    maxHeight: '100%'
  };

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

  var showModal = function showModal() {
    setVisible(true);
  };

  var closeModal = function closeModal() {
    return setVisible(false);
  };

  var ChooseImage = useCallback( /*#__PURE__*/function () {
    var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(data) {
      return _regeneratorRuntime.wrap(function _callee$(_context) {
        while (1) {
          switch (_context.prev = _context.next) {
            case 0:
              updateElement({
                element: _set(element, 'data.image', {
                  file: data
                }),
                merge: true
              });
              closeModal();

            case 2:
            case "end":
              return _context.stop();
          }
        }
      }, _callee);
    }));

    return function (_x) {
      return _ref.apply(this, arguments);
    };
  }(), [element]); // const onChange = useCallback(
  //     async data => {
  //         updateElement({ element: set(element, "data.image.file", data), merge: true });
  //     },
  //     [element]
  // );

  return /*#__PURE__*/React.createElement(AlignImage, {
    align: horizontalAlign
  }, !_isEmpty(image.file) ? /*#__PURE__*/React.createElement(OlineImage, {
    imageInfo: image.file,
    style: _objectSpread(_objectSpread(_objectSpread({}, imgStyle), elementStyle), style)
  }) : /*#__PURE__*/React.createElement("img", {
    src: img,
    alt: "",
    style: _objectSpread(_objectSpread({}, style), elementStyle)
  }), /*#__PURE__*/React.createElement("div", {
    onClick: showModal,
    className: "ButtonStyle"
  }, "Select Image"), /*#__PURE__*/React.createElement(Modal, {
    title: "Basic Modal",
    visible: visible,
    onCancel: closeModal,
    footer: null,
    width: 660
  }, /*#__PURE__*/React.createElement(ResourceGroup, {
    type: AssetsTypeGroup.IMAGE,
    onClick: ChooseImage
  })));
};

var mapDispatchToProps = function mapDispatchToProps(dispatch) {
  return {
    updateElement: function updateElement(payload) {
      dispatch({
        type: 'appBuilder/updateAndFlattenElement',
        payload: payload
      });
    }
  };
};

export default connect(function (state, _ref2) {
  var elementId = _ref2.elementId;
  var element = getElement(state, elementId);
  var _element$data = element.data,
      _element$data$image = _element$data.image,
      image = _element$data$image === void 0 ? {} : _element$data$image,
      _element$data$setting = _element$data.settings,
      settings = _element$data$setting === void 0 ? {} : _element$data$setting;
  return {
    element: {
      id: element.id,
      type: element.type,
      path: element.path
    },
    image: image,
    horizontalAlign: settings.horizontalAlign || "center"
  };
}, mapDispatchToProps, null, {
  areStatePropsEqual: _isEqual
})( /*#__PURE__*/React.memo(ImageContainer));
//# sourceMappingURL=ImageContainer.js.map