import _extends from "@babel/runtime/helpers/extends";
import React, { useEffect, useState, useRef, useImperativeHandle, forwardRef } from 'react';
import Draggable from 'react-draggable';
import Style from "../index.module.scss";
var XtBannerContent = function XtBannerContent(props, ref) {
  var _useState = useState(),
    complete = _useState[0],
    setComplete = _useState[1]; // 完整数据（由于数据结构嵌套过深，故不做TS类型定义）
  var _useState2 = useState(),
    psdList = _useState2[0],
    setPsdList = _useState2[1];
  var container = useRef(null);
  useImperativeHandle(ref, function () {
    return {
      psdList: psdList,
      dom: _extends({}, 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]);
  useEffect(function () {
    if (!props.schema) return;
    var schema = JSON.parse(props.schema);
    getPsdList(schema[0]);
    setComplete(schema[0]);
  }, [props]);
  var getPsdList = function getPsdList(list) {
    var bodyWidth = document.body.clientWidth;
    setTimeout(function () {
      var _container$current;
      var refWidth = (_container$current = container.current) === null || _container$current === void 0 ? void 0 : _container$current.clientWidth;
      var layers = list.layers.map(function (item) {
        var fontSize = Number(item.style.fontSize.replace('vw', ''));
        var value = refWidth / bodyWidth * fontSize;
        var pixels = bodyWidth / 100 * value;
        return _extends({}, item, {
          style: _extends({}, item.style, {
            width: pixels * item.text.length,
            height: pixels,
            fontSize: value + "vw"
          })
        });
      });
      setPsdList(Object.assign(list, {
        layers: layers
      }));
    }, 0);
  };
  var _onChange = function onChange(value, index) {
    var initLayers = complete.layers;
    var _initLayers$index = initLayers[index],
      style = _initLayers$index.style,
      text = _initLayers$index.text;
    var dynamicSize = style.width / value.length / (document.body.clientWidth / 100); // 文字动态大小
    var changePsdList = Object.assign({}, psdList, {
      layers: [].concat(psdList.layers.map(function (item, current) {
        return _extends({}, item, current === index && {
          text: value
        }, {
          style: _extends({}, item.style, current === index && {
            fontSize: value.length > text.length ? dynamicSize + "vw" : style.fontSize
          })
        });
      }))
    });
    setPsdList(_extends({}, changePsdList));
  };
  return /*#__PURE__*/React.createElement("div", {
    id: "container",
    className: Style['xtBanner-container'],
    style: {
      height: psdList ? 'initial' : '100%'
    },
    ref: container
  }, psdList ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("img", {
    src: psdList.bgImg
  }), psdList.layers.map(function (item, index) {
    return /*#__PURE__*/React.createElement(Draggable, {
      key: index,
      bounds: "parent"
    }, /*#__PURE__*/React.createElement("input", {
      id: "text" + index,
      className: Style['xtBanner-input'],
      placeholder: "\u8BF7\u8F93\u5165\u5185\u5BB9",
      autoComplete: "off",
      value: item.text,
      style: _extends({}, item.style, {
        maxWidth: item.style.width,
        maxHeight: item.style.height
      }),
      onChange: function onChange(e) {
        _onChange(e.target.value, index);
      }
    }));
  })) : /*#__PURE__*/React.createElement("div", {
    className: Style['xtBanner-no-data']
  }, /*#__PURE__*/React.createElement("span", {
    className: "xiatu-rich xt-material"
  }), /*#__PURE__*/React.createElement("span", null, "\u8BF7\u9009\u62E9\u5934\u56FE\u6A21\u677F")));
};
export default /*#__PURE__*/forwardRef(XtBannerContent);