"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

exports.__esModule = true;
exports.simulatorResizeRegistry = exports["default"] = exports.SimulatorPane = void 0;

var _input = _interopRequireDefault(require("@alifd/next/lib/input"));

var _icon = _interopRequireDefault(require("@alifd/next/lib/icon"));

var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));

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

var _lowcodeEngine = require("@alilc/lowcode-engine");

require("./index.scss");

var isNewEngineVersion = !!_lowcodeEngine.material;
var devices = [{
  key: 'desktop'
}, {
  key: 'tablet'
}, {
  key: 'phone'
}];

var SimulatorPane = /*#__PURE__*/function (_React$Component) {
  (0, _inheritsLoose2["default"])(SimulatorPane, _React$Component);

  function SimulatorPane(props) {
    var _this;

    _this = _React$Component.call(this, props) || this;

    _this.change = function (device) {
      var simulator = _lowcodeEngine.project.simulator;
      simulator === null || simulator === void 0 ? void 0 : simulator.set('device', device);
      document.querySelector('.lc-simulator-canvas').style.width = null;
      setTimeout(function () {
        var _document$querySelect;

        var currentWidth = ((_document$querySelect = document.querySelector('.lc-simulator-canvas')) === null || _document$querySelect === void 0 ? void 0 : _document$querySelect.clientWidth) || _this.state.currentWidth || 0;

        _this.setState({
          actived: device,
          currentWidth: currentWidth
        });
      }, 0);
    };

    _this.state = {
      actived: 'desktop',
      currentWidth: null
    };

    if (isNewEngineVersion) {
      _lowcodeEngine.project.onSimulatorRendererReady(function () {
        var _document$querySelect2;

        var currentWidth = ((_document$querySelect2 = document.querySelector('.lc-simulator-canvas')) === null || _document$querySelect2 === void 0 ? void 0 : _document$querySelect2.clientWidth) || _this.state.currentWidth || 0;

        _this.setState({
          currentWidth: currentWidth
        });
      });
    } else {
      _lowcodeEngine.project.onRendererReady(function () {
        var _document$querySelect3;

        var currentWidth = ((_document$querySelect3 = document.querySelector('.lc-simulator-canvas')) === null || _document$querySelect3 === void 0 ? void 0 : _document$querySelect3.clientWidth) || _this.state.currentWidth || 0;

        _this.setState({
          currentWidth: currentWidth
        });
      });
    }

    return _this;
  }

  var _proto = SimulatorPane.prototype;

  _proto.renderItemIcon = function renderItemIcon(device) {
    switch (device) {
      case 'desktop':
        return /*#__PURE__*/_react["default"].createElement(_icon["default"], {
          size: "large",
          type: "ic_PC_Select"
        });

      case 'tablet':
        return /*#__PURE__*/_react["default"].createElement(_icon["default"], {
          size: "large",
          type: "ic_Tablet_Select"
        });

      case 'phone':
        return /*#__PURE__*/_react["default"].createElement(_icon["default"], {
          size: "large",
          type: "ic_smartphone"
        });

      default:
        return /*#__PURE__*/_react["default"].createElement(_icon["default"], {
          size: "large",
          type: "ic_PC_Select"
        });
    }
  };

  _proto.render = function render() {
    var _this2 = this;

    var currentWidth = this.state.currentWidth || 0;
    return /*#__PURE__*/_react["default"].createElement("div", {
      className: "lp-simulator-pane"
    }, devices.map(function (item, index) {
      return /*#__PURE__*/_react["default"].createElement("div", {
        key: item.key,
        className: "lp-simulator-pane-item " + (_this2.state.actived === item.key ? 'actived' : ''),
        onClick: _this2.change.bind(_this2, item.key)
      }, _this2.renderItemIcon(item.key));
    }), /*#__PURE__*/_react["default"].createElement("div", {
      className: "done-page-width-setter"
    }, /*#__PURE__*/_react["default"].createElement(_input["default"], {
      className: "done-page-width-input",
      value: currentWidth,
      onChange: function onChange(value) {
        _this2.setState({
          currentWidth: value
        });
      },
      onPressEnter: function onPressEnter(event) {
        var _event$target;

        var value = event === null || event === void 0 ? void 0 : (_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target.value;
        console.log(value);
        document.querySelector('.lc-simulator-canvas').style.width = value + "px";

        _this2.setState({
          currentWidth: value
        });
      }
    }), /*#__PURE__*/_react["default"].createElement("span", {
      className: "done-page-width-unit"
    }, "px")));
  };

  return SimulatorPane;
}(_react["default"].Component);

exports.SimulatorPane = SimulatorPane;
SimulatorPane.displayName = 'SimulatorPane';

var simulatorResizeRegistry = function simulatorResizeRegistry(ctx) {
  var simulatorResizerRef = /*#__PURE__*/_react["default"].createRef();

  return {
    name: 'SimulatorPane',
    // 插件的初始化函数，在引擎初始化之后会立刻调用
    init: function init() {
      // 往引擎增加工具条
      ctx.skeleton.add({
        area: 'top',
        name: 'SimulatorPane',
        type: 'Widget',
        props: {
          description: '切换画布尺寸',
          align: "center"
        },
        content: /*#__PURE__*/_react["default"].createElement(SimulatorPane, {
          ref: simulatorResizerRef
        })
      });
    }
  };
};

exports.simulatorResizeRegistry = simulatorResizeRegistry;
simulatorResizeRegistry.pluginName = 'simulatorResizeRegistry';
var _default = simulatorResizeRegistry;
exports["default"] = _default;