import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
import _extends from "@babel/runtime/helpers/extends";
import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/taggedTemplateLiteralLoose";
var _templateObject, _templateObject2;
import _regeneratorRuntime from "@babel/runtime/regenerator";
import React, { useState, useEffect } from "react";
import { CLowCodeService } from "../../utils/CLowCodeService";
import styled, { css } from "styled-components";
import { getStyleByProps } from "../../utils/comfn/styleFn";
import ImageInner from "./imageInner";
import { handleDictionaryData } from "../../utils/comfn/getLangByDictionary";
import { ComponentStyle } from "../../utils/type";
import { isEffectiveEventFlow, subScribeCom } from "../../utils/comfn/util";
import { CPageService } from "../../utils/CPageService";
import { groupSubService } from "../../utils/comfn/groupSubService";
import { OperationType } from "lowcode/_setters/cBehavior-setter/type";
import { CAnimationService } from "../../utils/CAnimationService";
var StyledImage = styled(ImageInner)(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (props) {
  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n    ", "\n  "])), getStyleByProps(props));
});
var ImageBox = function ImageBox(props, ref) {
  var cPageService = new CPageService();
  cPageService.loadWebGid(props.webGid);

  // 用于选择状态时切换 props.selectStyle样式
  var _useState = useState(props.style || {}),
    newStyle = _useState[0],
    setNewStyle = _useState[1];
  var _useState2 = useState(false),
    isSelect = _useState2[0],
    setIsSelect = _useState2[1];
  var cLowCodeService = new CLowCodeService();
  var _useState3 = useState(props.src),
    newSrc = _useState3[0],
    setNewSrc = _useState3[1];
  var _useState4 = useState(""),
    animationClass = _useState4[0],
    setAnimationClass = _useState4[1]; //动画样式

  useEffect(function () {
    if (props.__designMode !== "design" && props.componentKey) {
      if (props.loopData) {
        props.loopData.subScribeComponentCallback(props.componentKey, props.loopData, handleSubScribeOwn);
      } else {
        return subScribeCom({
          code: props.componentKey,
          unsubscribeOwn: false,
          webGid: props.webGid,
          handleSubScribeOwn: handleSubScribeOwn
        });
      }
    } else {
      handleStyleWH();
    }
  }, []);

  //动画订阅
  useEffect(function () {
    // 订阅槽位用于刷新
    var key = cPageService.getAnimationSubscribeKey(props.componentKey);
    groupSubService.subScribeOwn(key, function (config) {
      if (config.type === OperationType.start) {
        handleStartAnimation(config);
      } else if (config.type === OperationType.stop) {
        handleEndAnimation();
      }
    });
    return function () {
      groupSubService.unsubScribeOwn(key);
    };
  }, []);
  useEffect(function () {
    handleStyleWH();
  }, [props.style]);
  useEffect(function () {
    var str = handleDictionaryData(props.src, props.dictionaryKey, props.webGid);
    setNewSrc(str);
  }, [props.src, props.dictionaryKey]);
  var handleSubScribeOwn = function handleSubScribeOwn(data) {
    var _data$params;
    if ((_data$params = data.params) !== null && _data$params !== void 0 && _data$params.styleType) {
      // 默认样式特殊处理
      var style = props.style;
      var newIsSelect = false;
      if (data.params.styleType === ComponentStyle.selectStyle) {
        newIsSelect = true;
      }
      // 其他样式会优先继承默认样式
      if (data.params.styleType !== ComponentStyle.defaultStyle) {
        var otherStyle = props[data.params.styleType];
        style = _extends({}, style, otherStyle);
      }
      setIsSelect(newIsSelect);
      setNewStyle(style || {});
    }
  };
  var handleOnClick = /*#__PURE__*/function () {
    var _ref = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(e) {
      var _props$loopData, _props$loopData2;
      return _regeneratorRuntime.wrap(function _callee$(_context) {
        while (1) switch (_context.prev = _context.next) {
          case 0:
            if (!(props.__designMode !== "design")) {
              _context.next = 6;
              break;
            }
            // 优先处理循环选中
            if ((_props$loopData = props.loopData) !== null && _props$loopData !== void 0 && _props$loopData.publishComponentCallback) {
              (_props$loopData2 = props.loopData) === null || _props$loopData2 === void 0 ? void 0 : _props$loopData2.publishComponentCallback({
                selected: !isSelect,
                loopData: props.loopData
              });
            }
            // 在处理自身的事件流
            if (!isEffectiveEventFlow(props.flowEventConfig)) {
              _context.next = 6;
              break;
            }
            cLowCodeService.loadPageProps(props);
            _context.next = 6;
            return cLowCodeService.handleFlowEvent();
          case 6:
          case "end":
            return _context.stop();
        }
      }, _callee);
    }));
    return function handleOnClick(_x) {
      return _ref.apply(this, arguments);
    };
  }();
  var handleStyleWH = function handleStyleWH() {
    if (props.__designMode === "design") {
      var newNewStyle = _extends({}, props.style);
      setNewStyle(newNewStyle);
    }
  };

  //开启动画
  var handleStartAnimation = function handleStartAnimation(config) {
    var cAnimationService = new CAnimationService();
    var animationData = cAnimationService.getAnimationClassName(config);
    setAnimationClass(animationData);
  };
  //结束动画
  var handleEndAnimation = function handleEndAnimation() {
    setAnimationClass("");
  };
  return /*#__PURE__*/React.createElement(StyledImage, _extends({}, props, {
    style: newStyle,
    isSelect: isSelect,
    onClick: handleOnClick,
    src: newSrc,
    ref: ref,
    className: animationClass
  }));
};
var _default = /*#__PURE__*/function (_React$PureComponent) {
  function _default() {
    return _React$PureComponent.apply(this, arguments) || this;
  }
  _inheritsLoose(_default, _React$PureComponent);
  var _proto = _default.prototype;
  _proto.render = function render() {
    return /*#__PURE__*/React.createElement(ImageBox, _extends({
      className: "ImageBox"
    }, this.props));
  };
  return _default;
}(React.PureComponent);
export { _default as default };