"use strict";

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

var _classnames = _interopRequireDefault(require("classnames"));

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

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

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

require("./index.less");

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

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? Object(arguments[i]) : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys.push.apply(ownKeys, Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

function ViewArea(_ref) {
  var device = _ref.device,
      renderHeader = _ref.renderHeader,
      pageData = _ref.pageData,
      selected = _ref.selected;
  return /*#__PURE__*/_react["default"].createElement("div", {
    className: "design-area-wrap"
  }, renderHeader(), /*#__PURE__*/_react["default"].createElement("div", {
    className: device === _constants.deviceTypeMap.PC ? 'pc_view_area' : 'phone_view_area'
  }, /*#__PURE__*/_react["default"].createElement("div", {
    className: "device_border"
  }, pageData && pageData.map(function (nodeData) {
    var Clazz = _componentTypes.componentMap[nodeData.type];

    if (!Clazz) {
      console.error("[MagicBox] Can not find type ".concat(nodeData.type));
      return;
    }

    var newInstanceProps = _objectSpread({}, nodeData, {
      nodeData: nodeData,
      mode: 'designer',
      terminalType: device
    });

    return /*#__PURE__*/_react["default"].createElement("div", {
      key: nodeData.id,
      id: "view".concat(nodeData.id),
      className: (0, _classnames["default"])({
        active_node: nodeData.id === selected.id
      })
    }, _react["default"].createElement(Clazz, _objectSpread({}, newInstanceProps), null));
  }))));
}