import _Input from "@alifd/next/es/input";
import _extends from "@babel/runtime/helpers/extends";
import _Select from "@alifd/next/es/select";
// InputLang.tsx
import React, { useState } from 'react';
import "./index.less";
import { processField, assignValues } from "../../_utils/utils";
var Option = _Select.Option;
var InputLang = function InputLang(_ref) {
  var onChange = _ref.onChange,
    value = _ref.value;
  var langList = [{
    value: 'en',
    label: 'En'
  }, {
    value: 'zh',
    label: '中文'
  }, {
    value: 'zh_tw',
    label: '中文(繁体)'
  }];
  var _useState = useState(processField(value || '')),
    content = _useState[0],
    setContent = _useState[1];
  var _useState2 = useState(localStorage.getItem('lang') || 'en'),
    contentLang = _useState2[0],
    setContentLang = _useState2[1];

  // 更新 content 时，设置对应语言的值
  var handleContentChange = function handleContentChange(value) {
    var updatedContent = content;
    updatedContent[contentLang] = value;
    setContent(updatedContent);
    // 将更新后的内容传递给父组件
    onChange(JSON.stringify(updatedContent));
  };
  var handleBlur = function handleBlur() {
    var updatedContent = _extends({}, content);
    var data = assignValues(updatedContent);
    setContent(data); // Update content after assignValues
    onChange(JSON.stringify(data)); // Notify parent component of the updated value
  };

  // 切换语言时，设置当前语言
  var handleLanguageChange = function handleLanguageChange(value) {
    setContentLang(value);
  };

  // 更新 content 数据
  React.useEffect(function () {
    setContent(processField(value || ''));
  }, [value]);
  var select = /*#__PURE__*/React.createElement(_Select, {
    value: contentLang,
    onChange: function onChange(value) {
      return handleLanguageChange(value);
    },
    popupStyle: {
      width: 150
    }
  }, langList.map(function (item, index) {
    return /*#__PURE__*/React.createElement(Option, {
      key: index,
      value: item.value
    }, item.label);
  }));
  return /*#__PURE__*/React.createElement(_Input, {
    addonBefore: select,
    value: content[contentLang],
    onChange: function onChange(e) {
      return handleContentChange(e);
    },
    onBlur: handleBlur
  });
};
export default InputLang;