"use strict";

var __assign = void 0 && (void 0).__assign || function () {
  __assign = Object.assign || function (t) {
    for (var s, i = 1, n = arguments.length; i < n; i++) {
      s = arguments[i];
      for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
    }
    return t;
  };
  return __assign.apply(this, arguments);
};
var __spreadArrays = void 0 && (void 0).__spreadArrays || function () {
  for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
  for (var r = Array(s), k = 0, i = 0; i < il; i++) for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++) r[k] = a[j];
  return r;
};
exports.__esModule = true;
var react_1 = require("react");
var react_draggable_1 = require("react-draggable");
var use_pubsub_js_1 = require("use-pubsub-js");
var utils_1 = require("../../../utils");
var index_module_scss_1 = require("../index.module.scss");
var XtGraphicContent = function XtGraphicContent(props, ref) {
  var dialogVisible = props.dialogVisible;
  var container = react_1.useRef(null);
  var _a = react_1.useState(props.schema),
    schema = _a[0],
    setSchema = _a[1];
  var _b = react_1.useState(),
    complete = _b[0],
    setComplete = _b[1];
  var _c = react_1.useState(),
    psdList = _c[0],
    setPsdList = _c[1];
  use_pubsub_js_1.useSubscribe({
    token: 'schema_token',
    handler: function handler(_token, message) {
      return setSchema(message);
    }
  });
  react_1.useImperativeHandle(ref, function () {
    return {
      psdList: psdList,
      dom: __assign(__assign({}, (psdList === null || psdList === void 0 ? void 0 : psdList.layers) ? Object.fromEntries(psdList.layers.map(function (_, index) {
        return ["text" + index, document.getElementById("text" + index)];
      })) : {}), {
        container: document.getElementById("container")
      })
    };
  }, [psdList]);
  react_1.useEffect(function () {
    if (!schema || !dialogVisible) return;
    var data = JSON.parse(schema);
    initChangePsdList(data);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [schema]);
  var initChangePsdList = function initChangePsdList(list) {
    if (!container.current) return;
    setTimeout(function () {
      var _a;
      var clientW = document.body.clientWidth; // 可视区域宽度（浏览器）
      var containerW = (_a = container.current) === null || _a === void 0 ? void 0 : _a.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 = utils_1.getActualWidthOfChars(text, {
            size: height,
            family: style.fontFamily
          }); // 缩放后文案宽度
          return __assign(__assign({}, item), type === 'text' && {
            style: __assign(__assign({}, style), {
              width: width >= containerW ? initWidth : width,
              height: width >= containerW ? initHeight : height,
              fontSize: fontSize + "vw",
              isTextarea: width >= containerW
            })
          });
        } else return item;
      });
      setPsdList(Object.assign({}, list, {
        height: containerH,
        layers: layers
      }));
      setComplete(Object.assign({}, list, {
        layers: layers
      }));
    }, 0);
  };
  var _onChange = function onChange(value, index) {
    console.log('complete.layers[index]', complete.layers[index]);
    console.log('schema', schema);
    var _a = complete.layers[index],
      style = _a.style,
      text = _a.text; // 初始换算后的数据
    var width = document.getElementById("text" + index).getBoundingClientRect().width;
    var dynamicSize = width / value.length / (document.body.clientWidth / 100); // 文字动态大小
    var changePsdList = Object.assign({}, psdList, {
      layers: __spreadArrays(psdList.layers.map(function (item, current) {
        return __assign(__assign(__assign({}, item), current === index && {
          text: value
        }), !(style === null || style === void 0 ? void 0 : style.isTextarea) && {
          style: __assign(__assign({}, item.style), current === index && {
            fontSize: value.length > text.length ? dynamicSize + "vw" : style.fontSize
          })
        });
      }))
    });
    setPsdList(__assign({}, changePsdList));
  };
  return react_1["default"].createElement("div", {
    ref: container,
    id: "container",
    className: index_module_scss_1["default"]['xtGraphic-container'],
    style: {
      overflowY: psdList ? 'scroll' : 'hidden'
    }
  }, psdList ? react_1["default"].createElement("div", {
    className: index_module_scss_1["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: index_module_scss_1["default"]['xtGraphic-content'],
      placeholder: '请输入内容',
      value: text,
      style: __assign(__assign({}, style), {
        zIndex: zIndex,
        overflowY: (style === null || style === void 0 ? void 0 : style.isTextarea) ? 'scroll' : 'hidden'
      }),
      onChange: function onChange(e) {
        return _onChange(e.target.value, index);
      }
    };
    return react_1["default"].createElement(react_1.Fragment, {
      key: index
    }, type === 'image' ? react_1["default"].createElement("img", {
      className: index_module_scss_1["default"]['xtGraphic-image'],
      src: url,
      style: item
    }) : null, type === 'text' ? react_1["default"].createElement(react_draggable_1["default"], {
      bounds: "parent"
    }, (style === null || style === void 0 ? void 0 : style.isTextarea) ? react_1["default"].createElement("textarea", __assign({}, attribute), text) : react_1["default"].createElement("input", __assign({}, attribute, {
      autoComplete: "off"
    }))) : null);
  })) : react_1["default"].createElement("div", {
    className: index_module_scss_1["default"]['xtGraphic-no-data']
  }, react_1["default"].createElement("span", {
    className: "xiatu-rich xt-material"
  }), react_1["default"].createElement("span", null, "\u8BF7\u9009\u62E9\u5934\u56FE\u6A21\u677F")));
};
exports["default"] = react_1.memo(react_1.forwardRef(XtGraphicContent));