import React, { useEffect, useState } from "react";
import VueConnector from "../index.vue";
import { applyVueInReact } from "veaury";
import { WalletLangEvent } from "./types/connectorType";
import { goToMainPage } from "../comFn";
import { ConnectorServer } from "./connectorServer";
import "./index.less";
import LangRender from "../comFn/langRender";
var ReactConnectButton = applyVueInReact(VueConnector);
var Connector = function Connector(props) {
  var entrySchema = props.entrySchema;
  var connectorServer = new ConnectorServer();
  var _useState = useState(),
    renderStyle = _useState[0],
    setRenderStyle = _useState[1];
  var _useState2 = useState(),
    langOptions = _useState2[0],
    setLangOptions = _useState2[1];
  var _useState3 = useState(),
    langAttribute = _useState3[0],
    setLangAttribute = _useState3[1];
  connectorServer.load(props);
  useEffect(function () {
    window.addEventListener(WalletLangEvent.type, setWalletConnectLanguage);
    handlePageDataByEntrySchema();
  }, []);
  var setWalletConnectLanguage = function setWalletConnectLanguage(event) {
    if (event.key === WalletLangEvent.key) {
      handleLangChange();
    }
  };
  useEffect(function () {
    handlePageDataByEntrySchema();
  }, [entrySchema]);
  var handlePageDataByEntrySchema = function handlePageDataByEntrySchema() {
    if (entrySchema) {
      // 编辑态
      if (props.__designMode === "design") {
        var newProps = connectorServer.getRenderProps();
        setRenderStyle(newProps);
        connectorServer.PSSubscribePanelSaveJson(entrySchema);
        connectorServer.subscribePanelJson(entrySchema, function (data) {
          handlePageDataByPanelJson(data);
        });
        connectorServer.createLangListByProps(entrySchema, function (langConfig) {
          setLangOptions(langConfig.options);
          setLangAttribute(langConfig.langListAttribute);
        });
      } else {
        connectorServer.subscribePanelByProps(entrySchema, function (data) {
          handlePageDataByPanelJson(data);
        });
      }
    }
  };
  var handlePageDataByPanelJson = function handlePageDataByPanelJson(data) {
    var newProps = connectorServer.getPropsInAttributeList(data.attributeList);
    connectorServer.load(newProps, data.switchList);
    var newStyle = connectorServer.getRenderProps();
    var langConfig = connectorServer.getLangOptionsByPanelJson(data.attributeList);
    setRenderStyle(newStyle);
    setLangOptions(langConfig.options);
    setLangAttribute(langConfig.langListAttribute);
  };
  var handleLangChange = function handleLangChange() {
    connectorServer.subscribePanelByProps(entrySchema, function (data) {
      handlePageDataByPanelJson(data);
    });
  };
  var changeLangFn = function changeLangFn(lang) {
    // 编辑态禁止切换语言
    if (props.__designMode === "design") return;
    var langOption = connectorServer.changeLang(lang, langAttribute);
    if (langOption) {
      setLangOptions(langOption);
    }
  };
  var onGoToMainPage = function onGoToMainPage(url) {
    if (url) {
      goToMainPage(url);
    }
  };
  if (renderStyle !== null && renderStyle !== void 0 && renderStyle.visibleConnector) {
    return /*#__PURE__*/React.createElement("div", {
      className: "connector-box",
      style: renderStyle === null || renderStyle === void 0 ? void 0 : renderStyle.visibleConnectorStyle
    }, /*#__PURE__*/React.createElement("div", {
      className: "connector-box-head",
      style: renderStyle === null || renderStyle === void 0 ? void 0 : renderStyle.fixedLayout
    }, /*#__PURE__*/React.createElement("div", {
      className: "connector-content"
    }, /*#__PURE__*/React.createElement("div", {
      className: "connector-logo"
    }, (renderStyle === null || renderStyle === void 0 ? void 0 : renderStyle.logo) && renderStyle.logo.length && (renderStyle === null || renderStyle === void 0 ? void 0 : renderStyle.hiddenConnector("logo")) && /*#__PURE__*/React.createElement("img", {
      className: renderStyle.logoToUrl ? "goToUrl" : "",
      src: renderStyle.logo,
      onClick: function onClick() {
        onGoToMainPage(renderStyle.logoToUrl);
      }
    }), (renderStyle === null || renderStyle === void 0 ? void 0 : renderStyle.hiddenConnector("title")) && /*#__PURE__*/React.createElement("div", {
      className: "logo-title",
      style: renderStyle === null || renderStyle === void 0 ? void 0 : renderStyle.titleStyle
    }, renderStyle.webTitle()))), /*#__PURE__*/React.createElement(LangRender, {
      isShowLang: renderStyle === null || renderStyle === void 0 ? void 0 : renderStyle.hiddenConnector("lang"),
      langOptions: langOptions,
      isDesign: props.__designMode === "design",
      navigatorServer: connectorServer,
      langAttribute: langAttribute
    }), /*#__PURE__*/React.createElement("div", {
      className: "connect"
    }, /*#__PURE__*/React.createElement(ReactConnectButton, {
      visibleWallet: renderStyle === null || renderStyle === void 0 ? void 0 : renderStyle.hiddenConnector("wallet"),
      visibleWalletStyle: renderStyle === null || renderStyle === void 0 ? void 0 : renderStyle.visibleWalletStyle,
      hiddenIndividualCenter: renderStyle === null || renderStyle === void 0 ? void 0 : renderStyle.hiddenConnector("individualCenter"),
      webGid: renderStyle === null || renderStyle === void 0 ? void 0 : renderStyle.webGid,
      mainNetworks: renderStyle === null || renderStyle === void 0 ? void 0 : renderStyle.mainNetworks,
      testNetworks: renderStyle === null || renderStyle === void 0 ? void 0 : renderStyle.testNetworks
    }))));
  } else {
    return null;
  }
};
Connector.displayName = "Connector";
export default Connector;