"use strict";

function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }

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

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

var _coreUtil = require("../../../utils/coreUtil");

var _commonUtil = require("../../../utils/commonUtil");

var _Button = _interopRequireDefault(require("../../../common/Button"));

var _constants = require("../../../constants");

var _componentTypes = require("../../../constants/component-types");

require("./index.less");

var _mobx = require("../../../mobx");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(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; }

var __extends = void 0 && (void 0).__extends || function () {
  var _extendStatics = function extendStatics(d, b) {
    _extendStatics = Object.setPrototypeOf || {
      __proto__: []
    } instanceof Array && function (d, b) {
      d.__proto__ = b;
    } || function (d, b) {
      for (var p in b) {
        if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p];
      }
    };

    return _extendStatics(d, b);
  };

  return function (d, b) {
    if (typeof b !== "function" && b !== null) throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");

    _extendStatics(d, b);

    function __() {
      this.constructor = d;
    }

    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
  };
}();

// @inject('store')
// @observer
var ConfigPanel =
/** @class */
function (_super) {
  __extends(ConfigPanel, _super);

  function ConfigPanel() {
    var _this = _super !== null && _super.apply(this, arguments) || this;

    _this.state = {
      clickedGroup: ''
    };

    _this.animation = function (type) {
      document.getElementsByClassName('config_wrap')[0].setAttribute('style', "animation-name:".concat(type, ";animation-duration: 0.3s;animation-fill-mode:both"));
    };

    _this.openPcConfig = function () {
      _this.animation('openPcConfig');
    };

    _this.closePcConfig = function () {
      _this.animation('closePcConfig');
    };

    _this.openMobileConfig = function () {
      _this.animation('openMobileConfig');
    };

    _this.closeMobileConfig = function () {
      _this.animation('closeMobileConfig');
    };

    _this.openSecConfig = function () {
      document.getElementsByClassName('sec_config_wrap')[0].setAttribute('style', 'animation-name:openSecConfig;animation-duration: 0.3s;animation-fill-mode:both');
    };

    _this.closeSecConfig = function () {
      var _a = _this.props,
          store = _a.store,
          selectedNode = _a.selectedNode;
      document.getElementsByClassName('sec_config_wrap')[0].setAttribute('style', 'animation-name:closeSecConfig;animation-duration: 0.3s;animation-fill-mode:both');
      /** 关闭时 清楚选中状态 */

      selectedNode.groupSource.forEach(function (item) {
        Reflect.deleteProperty(item, '_selected');
      }); // renderPreview();

      store.setState({
        clickedGroup: null
      });
    };

    _this.onDoneClick = function () {
      var _a = _this.props,
          device = _a.device,
          onClose = _a.onClose;

      if (device === _constants.deviceTypeMap.PC) {
        _this.closePcConfig();
      }

      onClose();
    };

    _this.getConfigPanelInstance = function () {
      var _a = _this.props,
          selectedNode = _a.selectedNode,
          device = _a.device;
      console.log('this.props', _this.props);
      var Clazz = _componentTypes.configPanelMap[selectedNode.type];
      var panelProps = {
        data: selectedNode,
        device: device
      };
      var instance = Clazz ? /*#__PURE__*/_react["default"].createElement(Clazz, panelProps) : null;
      return instance;
    };

    _this.getSecondConfigInstance = function () {
      var selectedNode = _this.props.selectedNode;
      var Clazz = _componentTypes.secondConfigPanelMap[selectedNode.type];
      var panelProps = (0, _commonUtil.ensure)(function () {
        return selectedNode.groupSource.find(function (src) {
          return src.id === _this.state.clickedGroup;
        });
      }, null);

      if (panelProps) {
        /** 给group中的元素添加 选中状态 */
        selectedNode.groupSource.forEach(function (item) {
          Reflect.deleteProperty(item, '_selected');
        });
        panelProps._selected = true; // renderPreview();

        var instance = Clazz ? /*#__PURE__*/_react["default"].createElement(Clazz, {
          panelProps: panelProps
        }) : null;
        return instance;
      }

      return null;
    };

    _this.getSecondConfigName = function () {
      var _a, _b, _c, _d;

      var selectedNode = _this.props.selectedNode;
      var panelProps = selectedNode.groupSource ? selectedNode.groupSource.find(function (src) {
        return src.id === _this.state.clickedGroup;
      }) : {};
      return ((0, _coreUtil.isPc)() ? (_b = (_a = panelProps === null || panelProps === void 0 ? void 0 : panelProps.image) === null || _a === void 0 ? void 0 : _a.content) === null || _b === void 0 ? void 0 : _b.pcName : (_d = (_c = panelProps === null || panelProps === void 0 ? void 0 : panelProps.image) === null || _c === void 0 ? void 0 : _c.content) === null || _d === void 0 ? void 0 : _d.h5Name) || 'Group Name';
    };

    _this.onSecConfigBack = function () {
      _this.closeSecConfig();
    };

    return _this;
  }

  ConfigPanel.prototype.componentDidMount = function () {
    var _this = this;

    this.distroy = (0, _mobx.autorun)(function () {
      _this.setState({
        clickedGroup: _mobx.store.clickedGroup
      });
    });
  };

  ConfigPanel.prototype.componentWillUnmount = function () {
    this.distroy();
  };

  ConfigPanel.prototype.render = function () {
    var _a, _b;

    var _c = this.props,
        device = _c.device,
        selectedNode = _c.selectedNode;

    if (this.state.clickedGroup) {
      this.openSecConfig();
    }

    return /*#__PURE__*/_react["default"].createElement("div", {
      className: "config_wrap"
    }, /*#__PURE__*/_react["default"].createElement("div", {
      className: "first_config_wrap"
    }, /*#__PURE__*/_react["default"].createElement("div", {
      className: "config_header"
    }, /*#__PURE__*/_react["default"].createElement("span", {
      className: "title",
      title: (_a = _constants.compInfoMap[selectedNode.type]) === null || _a === void 0 ? void 0 : _a.name
    }, (_b = _constants.compInfoMap[selectedNode.type]) === null || _b === void 0 ? void 0 : _b.name), device === _constants.deviceTypeMap.PC && /*#__PURE__*/_react["default"].createElement(_Button["default"], {
      onClick: this.onDoneClick,
      type: "light"
    }, "Done")), this.getConfigPanelInstance()), /*#__PURE__*/_react["default"].createElement("div", {
      className: "sec_config_wrap"
    }, /*#__PURE__*/_react["default"].createElement("div", {
      className: "config_header"
    }, /*#__PURE__*/_react["default"].createElement("div", {
      className: "button_wrap"
    }, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
      icon: "icon-left",
      onClick: this.onSecConfigBack,
      type: "icon"
    })), /*#__PURE__*/_react["default"].createElement("div", {
      className: "title"
    }, this.getSecondConfigName())), this.getSecondConfigInstance()));
  };

  return ConfigPanel;
}(_react.Component);

var _default = ConfigPanel;
exports["default"] = _default;