import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import _get from "lodash/get";
import React, { useState, useCallback, useEffect } from "react";
import { connect } from "react-redux";
import { set } from 'dot-prop-immutable';
import styled from "styled-components";
import { Row, Col, Icon } from "@whalecloud/fdx";
import { useHandlers } from "../../../../hooks/useHandlers";
import { getActiveElementWithChildren } from "../../../selectors";
import ImageDialog from "../../../components/ImageDialog";
import OlineImage from "../../../components/OlineImage";
import { buildCSSToString } from "../../../utils";
import { getContent } from "../../../selectors";
import isEqual from 'lodash/isEqual';
var Container = /*#__PURE__*/styled(Row, {
  target: "e6c6q4f0",
  label: "Container"
})({
  lineHeight: '29px',
  marginTop: 8,
  marginBottom: 8,
  textAlign: 'right',
  overflow: 'initial',
  '> div:first-child': {
    paddingRight: 8
  }
});
var root = 'data.settings.background';

var ImagePicker = function ImagePicker(props) {
  var label = props.label,
      element = props.element,
      updateElement = props.updateElement,
      customStyle = props.customStyle,
      temporaryStyle = props.temporaryStyle,
      pageStyle = props.pageStyle,
      document = props.document;

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

  var bg = _get(element, 'data.settings.background');

  var imageSrc = _get(bg, 'image.file.src');

  var _useHandlers = useHandlers(props, {
    setImage: function setImage(_ref) {
      var element = _ref.element,
          updateElement = _ref.updateElement,
          saveCustomStyle = _ref.saveCustomStyle;
      return function (image) {
        setVisible(false);

        if (!image) {
          updateElement({
            element: set(element, "".concat(root, ".image.file"), null),
            history: true
          });
        } else {
          var _ref2 = element.data || {},
              _ref2$className = _ref2.className,
              className = _ref2$className === void 0 ? '' : _ref2$className;

          var newClassName = className;
          var changeFlag = false;

          if (className.indexOf('backgroundImage') === -1) {
            changeFlag = true;

            if (!newClassName) {
              newClassName = 'backgroundImage';
            } else {
              newClassName += ' backgroundImage';
            }
          }

          var _customStyle = _defineProperty({}, '.backgroundImage', {
            'background-size': 'cover',
            'background-repeat': 'no-repeat',
            'background-position': 'center',
            'background-image': "url(http://172.16.24.105:8555/dxp/dam/query/render".concat(image.path, ")")
          });

          var newElement = set(element, "".concat(root, ".image.file"), {
            src: image
          });

          if (changeFlag) {
            newElement = set(newElement, 'data.className', newClassName);
          }

          updateElement({
            element: newElement,
            history: true
          });
          saveCustomStyle(_customStyle);
        }
      };
    }
  }),
      setImage = _useHandlers.setImage;

  useEffect(function () {
    var buldCSSCode = buildCSSToString(customStyle, temporaryStyle, pageStyle);

    if (buldCSSCode) {
      if (!document.css) {
        document.css = "";
      }

      if (!isEqual(buldCSSCode, document.css)) {
        var newElement = set(document, 'css', buldCSSCode);
        updateElement({
          element: newElement
        });
      }
    }
  }, [customStyle]);
  var onImageChange = useCallback(function (value) {
    return setImage(value, false);
  }, [setImage]);
  return /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(Col, {
    span: 6
  }, label), /*#__PURE__*/React.createElement(Col, {
    span: 18
  }, imageSrc && /*#__PURE__*/React.createElement(OlineImage, {
    imageInfo: imageSrc,
    style: {
      width: '150px'
    }
  }), /*#__PURE__*/React.createElement(Icon, {
    type: "plus",
    onClick: function onClick() {
      return setVisible(true);
    }
  })), /*#__PURE__*/React.createElement(ImageDialog, {
    visible: visible,
    imageClick: onImageChange
  }));
};

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

export default connect(function (state) {
  var document = getContent(state);
  return {
    document: document,
    element: getActiveElementWithChildren(state),
    themeStyle: state.style.themeStyle,
    customStyle: state.style.customStyle,
    temporaryStyle: state.style.temporaryStyle
  };
}, mapDispatchToProps)( /*#__PURE__*/React.memo(ImagePicker));
//# sourceMappingURL=ImagePicker.js.map