import _Button from "@alifd/next/es/button";
import _Icon from "@alifd/next/es/icon";
import _Search from "@alifd/next/es/search";
import _Input from "@alifd/next/es/input";
import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
import React, { Component } from 'react';
import { project } from '@alilc/lowcode-engine';
import './index.less';
import lang from './lang.json';
var I18nSetter = /*#__PURE__*/function (_Component) {
  function I18nSetter() {
    var _this;
    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }
    _this = _Component.call.apply(_Component, [this].concat(args)) || this;
    _this.state = {
      isShowSearchPopUp: false,
      isShowBindDataPopUp: false,
      i18nValue: {}
    };
    _this.transfromI18nData = function (i18nSchema) {
      var i18nPageDataList = [];
      var _loop = function _loop(langKey) {
        var i18nMap = i18nSchema[langKey];
        var _loop2 = function _loop2(key2) {
          var matchFlag = false;
          i18nPageDataList.length > 0 && i18nPageDataList.map(function (i18nItem) {
            if (i18nItem.i18nkey == key2) {
              matchFlag = true;
              i18nItem.i18nDataList.push({
                langKey: langKey,
                i18nData: i18nMap[key2]
              });
            }
          });
          if (!matchFlag) {
            var i18nItem = {
              i18nkey: key2,
              i18nDataList: []
            };
            i18nItem.i18nDataList.push({
              langKey: langKey,
              i18nData: i18nMap[key2]
            });

            //i18nItem.i18nData[langKey] = i18nMap[key2]
            i18nPageDataList.push(i18nItem);
          }
        };
        for (var key2 in i18nMap) {
          _loop2(key2);
        }
      };
      for (var langKey in i18nSchema) {
        _loop(langKey);
      }
      return i18nPageDataList;
    };
    _this.showSearchPopUp = function () {
      _this.setState({
        isShowSearchPopUp: true
      });
    };
    _this.showBindDataPopUp = function () {
      _this.setState({
        isShowBindDataPopUp: !_this.state.isShowBindDataPopUp
      });
    };
    _this.showBindData = function () {
      _this.setState({
        isShowBindDataPopUp: true
      });
    };
    _this.clearI18n = function () {
      var onChange = _this.props.onChange;
      _this.setState({
        i18nValue: {},
        isShowBindDataPopUp: false
      });
      onChange({});
    };
    _this.setI18nValue = function (i18nkey, i18nPageDataList) {
      i18nPageDataList = i18nPageDataList || _this.state.i18nPageDataList;
      var i18nDataList;
      i18nPageDataList.map(function (item) {
        if (item.i18nkey == i18nkey) {
          i18nDataList = item.i18nDataList;
        }
      });
      var inputValue;
      // 中文用于input展示
      i18nDataList.map(function (item) {
        if (item.langKey == 'zh-CN') {
          inputValue = item.i18nData;
        }
      });
      return {
        type: 'i18n',
        key: i18nkey,
        i18nDataList: i18nDataList,
        inputValue: inputValue
      };
    };
    _this.createNewI18nItemData = function () {
      var onChange = _this.props.onChange;
      var editor = _this.props.field.editor;
      var schema = project.exportSchema();
      var i18nSchema = schema.i18n;
      var newI18nKey = _this.uniqueId('i18n');
      // 将新的key添加到i18nSchema中
      for (var langKey in i18nSchema) {
        i18nSchema[langKey][newI18nKey] = '';
      }
      if (JSON.stringify(i18nSchema) == '{}') {
        // i18n结构为空的话，默认建中文和英文
        i18nSchema['zh-CN'] = {};
        i18nSchema['zh-CN'][newI18nKey] = '你好';
        i18nSchema['en-US'] = {};
        i18nSchema['en-US'][newI18nKey] = 'Hello';
      }
      var i18nPageDataList = _this.transfromI18nData(i18nSchema);
      var i18nValue = _this.setI18nValue(newI18nKey, i18nPageDataList);
      onChange(_this.parseI18nValue2PropsValue(i18nValue));
      _this.updateI18nSchema(i18nValue);
      _this.setState({
        i18nValue: i18nValue,
        isShowBindDataPopUp: true,
        isShowSearchPopUp: false
      });
    };
    _this.uniqueId = function (prefix) {
      if (prefix === void 0) {
        prefix = '';
      }
      var guid = Date.now();
      return prefix + "-" + (guid++).toString(36).toLowerCase();
    };
    _this.onClickI18nItem = function (i18nItem) {
      var onChange = _this.props.onChange;
      var i18nValue = _this.setI18nValue(i18nItem.i18nkey);
      _this.setState({
        i18nValue: i18nValue,
        isShowSearchPopUp: false,
        isShowBindDataPopUp: true
      });
      onChange(_this.parseI18nValue2PropsValue(i18nValue));
    };
    _this.parseI18nValue2PropsValue = function (i18nValue) {
      var propsValue = {
        type: 'i18n',
        key: i18nValue.key
      };
      var i18nDataList = i18nValue.i18nDataList;
      i18nDataList.map(function (item) {
        propsValue[item.langKey] = item.i18nData;
      });
      return propsValue;
    };
    _this.renderI18nList = function () {
      var i18nSearchDataList = _this.state.i18nSearchDataList;
      return /*#__PURE__*/React.createElement("div", {
        className: "lowcode-setter-i18n-list"
      }, i18nSearchDataList && i18nSearchDataList.map(function (item) {
        return /*#__PURE__*/React.createElement("div", {
          className: "lowcode-setter-i18n-search-box-container",
          onClick: function onClick() {
            return _this.onClickI18nItem(item);
          }
        }, item.i18nDataList && item.i18nDataList.map(function (i18nItem) {
          return /*#__PURE__*/React.createElement("div", {
            className: "i18n-lang-item"
          }, /*#__PURE__*/React.createElement("div", {
            className: "i18n-item-lang-type"
          }, lang[i18nItem.langKey].i18nLangCN), /*#__PURE__*/React.createElement("div", {
            className: "item-lang-content"
          }, i18nItem.i18nData));
        }));
      }));
    };
    _this.i18nItemOnChange = function (value, langKey) {
      var i18nValue = _this.state.i18nValue;
      var onChange = _this.props.onChange;
      i18nValue.i18nDataList.map(function (item) {
        if (item.langKey == langKey) {
          item.i18nData = value;
          if (langKey == 'zh-CN') {
            i18nValue.inputValue = value;
          }
        }
      });
      _this.setState({
        i18nValue: i18nValue
      });
      onChange(_this.parseI18nValue2PropsValue(i18nValue));
      _this.updateI18nSchema(i18nValue);
    };
    _this.updateI18nSchema = function (i18nValue) {
      var editor = _this.props.field.editor;
      var schema = project.exportSchema();
      var i18nSchema = schema.i18n;
      var _loop3 = function _loop3(schemaLangKey) {
        var schemaLangData = i18nSchema[schemaLangKey];
        var _loop4 = function _loop4(schemaI18nKey) {
          if (i18nValue.key == schemaI18nKey) {
            var i18nDataList = i18nValue.i18nDataList;
            i18nDataList.map(function (i18nDataItem) {
              if (i18nDataItem.langKey == schemaLangKey) {
                schemaLangData[schemaI18nKey] = i18nDataItem.i18nData;
              }
            });
          }
        };
        for (var schemaI18nKey in schemaLangData) {
          _loop4(schemaI18nKey);
        }
      };
      for (var schemaLangKey in i18nSchema) {
        _loop3(schemaLangKey);
      }
      editor.get('designer').project.set('i18n', i18nSchema);
    };
    return _this;
  }
  _inheritsLoose(I18nSetter, _Component);
  var _proto = I18nSetter.prototype;
  _proto.componentDidMount = function componentDidMount() {
    // 获取schema
    var value = this.props.value;
    var schema = project.exportSchema();
    var i18nSchema = schema.i18n;
    var i18nPageDataList = this.transfromI18nData(i18nSchema);
    var i18nValue = {};
    if (value && value.key) {
      i18nValue = this.setI18nValue(value.key, i18nPageDataList);
    }
    // 对原始的i18n数据结构进行转化，方便页面输出
    this.setState({
      i18nPageDataList: i18nPageDataList,
      i18nValue: i18nValue,
      i18nSchema: i18nSchema
    });
  };
  _proto.onSearch = function onSearch(value, filterValue) {
    // console.log('onSearch', value, filterValue);
  };
  _proto.onChange = function onChange(value, type, e) {
    //console.log('onChange', value, type, e);
    // 联想的数据

    var i18nPageDataList = this.state.i18nPageDataList;
    var i18nSearchDataList = [];
    i18nPageDataList.map(function (item) {
      var i18nDataList = item.i18nDataList;
      i18nDataList.map(function (itemData) {
        if (value != '' && itemData.i18nData.indexOf(value) >= 0) {
          i18nSearchDataList.push(item);
        }
      });
    });
    this.setState({
      value: value,
      i18nSearchDataList: i18nSearchDataList
    });
  };
  _proto.render = function render() {
    var _this2 = this;
    var _this$state = this.state,
      isShowSearchPopUp = _this$state.isShowSearchPopUp,
      i18nValue = _this$state.i18nValue,
      isShowBindDataPopUp = _this$state.isShowBindDataPopUp;
    return /*#__PURE__*/React.createElement("div", {
      className: "lowcode-setter-i18n"
    }, /*#__PURE__*/React.createElement(_Input, {
      size: "small",
      value: i18nValue.inputValue
    }), !i18nValue.key ? /*#__PURE__*/React.createElement("div", {
      className: "i18n-icon",
      onClick: this.showSearchPopUp
    }, /*#__PURE__*/React.createElement("img", {
      src: "https://gw.alicdn.com/imgextra/i2/O1CN01kvqrSB22B9CKB4yVl_!!6000000007081-2-tps-200-200.png"
    })) : /*#__PURE__*/React.createElement("div", {
      className: "i18n-icon i18n-icon-selected",
      onClick: this.showBindDataPopUp
    }, /*#__PURE__*/React.createElement("img", {
      src: "https://gw.alicdn.com/imgextra/i3/O1CN01VpNCcg1wfTjbdHK8I_!!6000000006335-2-tps-200-200.png"
    })), isShowSearchPopUp && /*#__PURE__*/React.createElement("div", {
      className: "popup-container"
    }, /*#__PURE__*/React.createElement(_Search, {
      onChange: this.onChange.bind(this),
      popupContent: this.renderI18nList(),
      onSearch: this.onSearch.bind(this),
      type: "normal",
      shape: "simple",
      style: {
        width: '195px'
      },
      placeholder: "\u641C\u7D22\u5DF2\u5B9A\u4E49\u7684\u6587\u6848"
    }), /*#__PURE__*/React.createElement(_Button, {
      type: "primary",
      className: "new-i18n-button",
      onClick: this.createNewI18nItemData
    }, /*#__PURE__*/React.createElement(_Icon, {
      type: "add"
    }), "\u521B\u5EFA\u65B0\u7684\u591A\u8BED\u8A00\u6587\u6848")), isShowBindDataPopUp && /*#__PURE__*/React.createElement("div", {
      className: "binddata-popup-container"
    }, /*#__PURE__*/React.createElement("div", {
      className: "clear-i18n",
      onClick: this.clearI18n
    }, "\u89E3\u9664\u6587\u6848\u5173\u8054"), i18nValue.i18nDataList && i18nValue.i18nDataList.map(function (i18nItem) {
      return /*#__PURE__*/React.createElement("div", {
        className: "bind-item"
      }, /*#__PURE__*/React.createElement("p", null, lang[i18nItem.langKey].i18nLangCN), /*#__PURE__*/React.createElement(_Input, {
        size: "small",
        value: i18nItem.i18nData,
        onChange: function onChange(value, type, e) {
          return _this2.i18nItemOnChange(value, i18nItem.langKey, i18nValue.key);
        }
      }));
    })));
  };
  return I18nSetter;
}(Component);
export default I18nSetter;