import _extends from "@babel/runtime/helpers/extends";
import React, { useEffect, useState, useRef, useImperativeHandle, forwardRef, Fragment, memo } from 'react';
import Draggable from 'react-draggable';
import { getActualWidthOfChars } from "../../../utils";
import Style from "../index.module.scss";
var XtGraphicContent = function XtGraphicContent(props, ref) {
  var schema = props.schema,
    dialogVisible = props.dialogVisible;
  var container = useRef(null);
  var _useState = useState(),
    complete = _useState[0],
    setComplete = _useState[1];
  var _useState2 = useState(),
    psdList = _useState2[0],
    setPsdList = _useState2[1];
  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 (!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 = getActualWidthOfChars(text, {
            size: height,
            family: style.fontFamily
          }); // 缩放后文案宽度

          return _extends({}, item, type === 'text' && {
            style: _extends({}, 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 _extends({}, item, current === index && {
          text: value
        }, !(style !== null && style !== void 0 && style.isTextarea) && {
          style: _extends({}, item.style, current === index && {
            fontSize: value.length > text.length ? dynamicSize + "vw" : style.fontSize
          })
        });
      }))
    });
    setPsdList(_extends({}, changePsdList));
  };
  return /*#__PURE__*/React.createElement("div", {
    ref: container,
    id: "container",
    className: Style['xtGraphic-container'],
    style: {
      overflowY: psdList ? 'scroll' : 'hidden'
    }
  }, psdList ? /*#__PURE__*/React.createElement("div", {
    className: Style['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: Style['xtGraphic-content'],
      placeholder: '请输入内容',
      value: text,
      style: _extends({}, 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.createElement(Fragment, {
      key: index
    }, type === 'image' ? /*#__PURE__*/React.createElement("img", {
      className: Style['xtGraphic-image'],
      src: url,
      style: item
    }) : null, type === 'text' ? /*#__PURE__*/React.createElement(Draggable, {
      bounds: "parent"
    }, style !== null && style !== void 0 && style.isTextarea ? /*#__PURE__*/React.createElement("textarea", attribute, text) : /*#__PURE__*/React.createElement("input", _extends({}, attribute, {
      autoComplete: "off"
    }))) : null);
  })) : /*#__PURE__*/React.createElement("div", {
    className: Style['xtGraphic-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__*/memo( /*#__PURE__*/forwardRef(XtGraphicContent));