"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports["default"] = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _react = _interopRequireWildcard(require("react"));
var _reactDraggable = _interopRequireDefault(require("react-draggable"));
var _utils = require("../../../utils");
var _indexModule = _interopRequireDefault(require("../index.module.scss"));
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 XtGraphicContent = function XtGraphicContent(props, ref) {
  var schema = props.schema,
    dialogVisible = props.dialogVisible;
  var container = (0, _react.useRef)(null);
  var _useState = (0, _react.useState)(),
    complete = _useState[0],
    setComplete = _useState[1];
  var _useState2 = (0, _react.useState)(),
    psdList = _useState2[0],
    setPsdList = _useState2[1];
  (0, _react.useImperativeHandle)(ref, function () {
    return {
      psdList: psdList,
      dom: (0, _extends2["default"])({}, psdList !== null && psdList !== void 0 && psdList.layers ? Object.fromEntries(psdList.layers.map(function (_, index) {
        return ["text" + index, document.getElementById("text" + index)];
      })) : {}, {
        container: document.getElementById("container")
      })
    };
  }, [psdList]);
  (0, _react.useEffect)(function () {
    if (!schema || !dialogVisible) return;
    var data = JSON.parse(schema);
    initChangePsdList(data);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);
  var initChangePsdList = function initChangePsdList(list) {
    if (!container.current) return;
    setTimeout(function () {
      var _container$current;
      var clientW = document.body.clientWidth; // 可视区域宽度（浏览器）
      var containerW = (_container$current = container.current) === null || _container$current === void 0 ? void 0 : _container$current.clientWidth; // 可视区域宽度（容器）
      var containerH = containerW ? Math.floor(list.height * (containerW / list.width)) : 'auto'; // 容器高度等比缩放 2801 * (534 / 1242)
      var layers = list.layers.map(function (item) {
        var type = item.type,
          style = item.style,
          text = item.text,
          initWidth = item.width,
          initHeight = item.height;
        if (type === 'text') {
          var initFontSize = Number(style.fontSize.replace('vw', ''));
          var fontSize = containerW / clientW * initFontSize; // 文字大小等比缩放 (534 / 1920) * 初始字体大小
          var height = clientW / 100 * fontSize; // 缩放后文案高度 19.2 * 缩小后的文字大小
          var width = (0, _utils.getActualWidthOfChars)(text, {
            size: height,
            family: style.fontFamily
          }); // 缩放后文案宽度

          return (0, _extends2["default"])({}, item, type === 'text' && {
            style: (0, _extends2["default"])({}, style, {
              width: width >= containerW ? initWidth : width,
              height: width >= containerW ? initHeight : height,
              fontSize: fontSize + "vw",
              isTextarea: width >= containerW
            })
          });
        } else return item;
      });
      var newData = Object.assign({}, list, {
        height: containerH,
        layers: layers
      });
      setPsdList(newData);
      setComplete(newData);
    }, 0);
  };
  var _onChange = function onChange(value, index) {
    var _complete$layers$inde = complete.layers[index],
      style = _complete$layers$inde.style,
      text = _complete$layers$inde.text; // 初始换算后的数据
    var _document$getElementB = document.getElementById("text" + index).getBoundingClientRect(),
      width = _document$getElementB.width;
    var dynamicSize = width / value.length / (document.body.clientWidth / 100); // 文字动态大小
    var changePsdList = Object.assign({}, psdList, {
      layers: [].concat(psdList.layers.map(function (item, current) {
        return (0, _extends2["default"])({}, item, current === index && {
          text: value
        }, !(style !== null && style !== void 0 && style.isTextarea) && {
          style: (0, _extends2["default"])({}, item.style, current === index && {
            fontSize: value.length > text.length ? dynamicSize + "vw" : style.fontSize
          })
        });
      }))
    });
    setPsdList((0, _extends2["default"])({}, changePsdList));
  };
  return /*#__PURE__*/_react["default"].createElement("div", {
    ref: container,
    id: "container",
    className: _indexModule["default"]['xtGraphic-container'],
    style: {
      overflowY: psdList ? 'scroll' : 'hidden'
    }
  }, psdList ? /*#__PURE__*/_react["default"].createElement("div", {
    className: _indexModule["default"]['xtGraphic-section'],
    style: {
      height: psdList.height
    }
  }, psdList.layers.map(function (item, index) {
    var type = item.type,
      url = item.url,
      text = item.text,
      style = item.style,
      zIndex = item.zIndex;
    var attribute = {
      id: "text" + index,
      className: _indexModule["default"]['xtGraphic-content'],
      placeholder: '请输入内容',
      value: text,
      style: (0, _extends2["default"])({}, style, {
        zIndex: zIndex,
        overflowY: style !== null && style !== void 0 && style.isTextarea ? 'scroll' : 'hidden'
      }),
      onChange: function onChange(e) {
        return _onChange(e.target.value, index);
      }
    };
    return /*#__PURE__*/_react["default"].createElement(_react.Fragment, {
      key: index
    }, type === 'image' ? /*#__PURE__*/_react["default"].createElement("img", {
      className: _indexModule["default"]['xtGraphic-image'],
      src: url,
      style: item
    }) : null, type === 'text' ? /*#__PURE__*/_react["default"].createElement(_reactDraggable["default"], {
      bounds: "parent"
    }, style !== null && style !== void 0 && style.isTextarea ? /*#__PURE__*/_react["default"].createElement("textarea", attribute, text) : /*#__PURE__*/_react["default"].createElement("input", (0, _extends2["default"])({}, attribute, {
      autoComplete: "off"
    }))) : null);
  })) : /*#__PURE__*/_react["default"].createElement("div", {
    className: _indexModule["default"]['xtGraphic-no-data']
  }, /*#__PURE__*/_react["default"].createElement("span", {
    className: "xiatu-rich xt-material"
  }), /*#__PURE__*/_react["default"].createElement("span", null, "\u8BF7\u9009\u62E9\u5934\u56FE\u6A21\u677F")));
};
var _default = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef)(XtGraphicContent));
exports["default"] = _default;