import React, { useEffect, useState } from 'react';
import { Balloon } from '@alifd/next';
import { getLangType } from 'lowcode/_utils/utils';
var LangRender = function LangRender(props) {
  var langOptions = props.langOptions,
    isDesign = props.isDesign,
    navigatorServer = props.navigatorServer,
    langAttribute = props.langAttribute;
  var _useState = useState(),
    langOptionsNew = _useState[0],
    setLangOptionsNew = _useState[1];
  var _useState2 = useState(),
    langData = _useState2[0],
    setLangData = _useState2[1];
  useEffect(function () {
    setLangData(getLangType());
  }, []);
  useEffect(function () {
    setLangOptionsNew(langOptions);
  }, [langOptions]);
  var changeLangFn = function changeLangFn(lang) {
    // 编辑态禁止切换语言
    if (isDesign) return;
    setLangData(lang);
    var langOption = navigatorServer.changeLang(lang, langAttribute);
    if (langOption) {
      setLangOptionsNew(langOption);
    }
  };
  var onVisibleChangeFn = function onVisibleChangeFn(visible) {
    if (visible) {
      setLangData(getLangType());
    }
  };
  if (props.isShowLang) {
    return /*#__PURE__*/React.createElement("div", null, langOptionsNew && langOptionsNew.length > 0 && /*#__PURE__*/React.createElement(Balloon, {
      className: "langBox",
      v2: true,
      type: "primary",
      autoFocus: true,
      trigger: /*#__PURE__*/React.createElement("div", {
        className: "langSelect"
      }),
      closable: false,
      onVisibleChange: onVisibleChangeFn,
      triggerType: "hover"
    }, /*#__PURE__*/React.createElement("ul", {
      className: "lang-ul-box"
    }, langOptionsNew.map(function (item) {
      return /*#__PURE__*/React.createElement("li", {
        onClick: function onClick() {
          changeLangFn(item.value);
        },
        className: ['lang-li-item', item.value === langData ? 'lang-li-active' : ''].join(' '),
        key: item.value
      }, item.label);
    }))));
  }
  return null;
};
LangRender.displayName = 'LangRender';
export default LangRender;