import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
import _Select from "@alifd/next/es/select";
import * as React from 'react';
import { PureComponent } from 'react';
import { readPsd } from 'ag-psd';
import "./index.module.scss";
var Option = _Select.Option;
var GroupParamSetter = /*#__PURE__*/function (_PureComponent) {
  _inheritsLoose(GroupParamSetter, _PureComponent);
  function GroupParamSetter() {
    return _PureComponent.apply(this, arguments) || this;
  }
  var _proto = GroupParamSetter.prototype;
  // state = {
  //     tplPsdValue: ''
  // }
  _proto.componentDidMount = function componentDidMount() {
    // this.setState({
    //     tplPsdValue: 'https://img.maimairen.com/low-code/ali/tpl-thumb/tmp-tpl1.psd'
    // })
  };
  _proto.render = function render() {
    var onChange = this.props.onChange;
    var tplPsds = {
      value: '',
      list: [{
        title: 'tmp-tpl1',
        uri: 'https://img.maimairen.com/low-code/ali/tpl-thumb/tmp-tpl1.psd'
      }, {
        title: 'tmp-tpl2',
        uri: 'https://img.maimairen.com/low-code/ali/tpl-thumb/tmp-tpl2.psd'
      }, {
        title: 'tmp-tpl3',
        uri: 'https://img.maimairen.com/low-code/ali/tpl-thumb/tmp-tpl3.psd'
      }]
    };

    // this.setState({
    //     tplPsdValue: 'https://img.maimairen.com/low-code/ali/tpl-thumb/tmp-tpl1.psd'
    // })
    var SelectChange = function SelectChange(e) {
      var xhr = new XMLHttpRequest();
      xhr.open('GET', e, true);
      xhr.responseType = 'arraybuffer';
      xhr.addEventListener('load', function () {
        var buffer = xhr.response;
        var rPsd = readPsd(buffer);
        var val = {
          bgImg: '',
          // text,
          // _name,
          // style: _style
          layers: []
        };
        rPsd.children.forEach(function (res, idx) {
          var _ref = res || {
              text: {}
            },
            _canvas = _ref.canvas,
            _text = _ref.text,
            _name = _ref.name;
          if (idx === 0) {
            // 背景将 canvas 转为 base64
            val.bgImg = _canvas.toDataURL('image/png');
          } else {
            var text = _text.text,
              _text$style = _text.style,
              fontSize = _text$style.fontSize,
              fillColor = _text$style.fillColor,
              font = _text$style.font,
              fauxBold = _text$style.fauxBold,
              fauxItalic = _text$style.fauxItalic,
              transform = _text.transform;
            // debugger
            var _style = {
              fontSize: fontSize * 100 / rPsd.width + "vw",
              // 实际字体大小 * 100 / 画布宽
              color: "rgba(" + Object.values(fillColor).join(',') + ")",
              // 颜色
              fontFamily: font.name,
              fontWeight: fauxBold ? 'bolder' : 'normal',
              fontStyle: fauxItalic ? 'italic' : 'normal',
              // left: 100*transform[4]*transform[0]/rPsd.width+'%',
              left: transform[4] * 100 / rPsd.width + "%",
              // top: 100*transform[5]*transform[3]/rPsd.height+'%',
              top: transform[5] * 100 / rPsd.height + "%"
              // transform: `matrix(${Object.assign(
              //     transform,
              //     // transform[4]=100*transform[4]/rPsd.width,
              //     // transform[5]=100*transform[5]/rPsd.height,
              //
              // )})`
            };

            val.layers.push({
              text: text,
              _name: _name,
              style: _style
            });
          }
        });
        tplPsds.value = e;
        onChange(val);
      }, false);
      xhr.send();
    };
    return /*#__PURE__*/React.createElement("div", {
      className: "psd-parse"
    }, /*#__PURE__*/React.createElement("div", {
      className: "psd-parse-li"
    }, /*#__PURE__*/React.createElement(_Select, {
      hasClear: true,
      style: {
        marginRight: 8
      },
      onChange: SelectChange
    }, tplPsds.list.map(function (res) {
      return /*#__PURE__*/React.createElement(Option, {
        value: res.uri,
        key: res.uri
      }, res.title);
    }))));
  };
  return GroupParamSetter;
}(PureComponent);
GroupParamSetter.displayName = 'PsdParse';
export { GroupParamSetter as default };