import React, { useEffect, useRef, useCallback } from 'react';
import { Card, Empty, Spin } from 'antd';
import { ShoppingCartOutlined, CreditCardOutlined, SafetyCertificateOutlined, SettingOutlined } from '@ant-design/icons';
import { ShoppingCart01 } from '@pisell/icon';
import { locales } from '@pisell/utils';
import useEngineContext from "../../../../hooks/useEngineContext";

// 获取多语言文本的工具函数
var getLocalizedText = function getLocalizedText(text) {
  var locale = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'zh-CN';
  if (typeof text === 'string') {
    return text;
  }

  // 优先使用当前语言，然后是原始文本，最后是英文
  return text[locale] || text.original || text.en || '';
};

// 区块图标映射
var sectionIcons = {
  order: /*#__PURE__*/React.createElement(ShoppingCartOutlined, null),
  payment: /*#__PURE__*/React.createElement(CreditCardOutlined, null),
  auth: /*#__PURE__*/React.createElement(SafetyCertificateOutlined, null),
  default: /*#__PURE__*/React.createElement(SettingOutlined, null)
};

// 渲染图标的函数
var renderSectionIcon = function renderSectionIcon(iconName, code) {
  // 如果有具体的图标名称，处理特定图标
  if (iconName === 'pisell2-shopping-cart-01') {
    return /*#__PURE__*/React.createElement(ShoppingCart01, null);
  }

  // 否则使用代码映射的图标
  if (code && sectionIcons[code]) {
    return sectionIcons[code];
  }

  // 默认图标
  return sectionIcons.default;
};
var SectionList = function SectionList(_ref) {
  var _context$engine;
  var sections = _ref.sections,
    selectedSectionId = _ref.selectedSectionId,
    onSectionSelect = _ref.onSectionSelect,
    _ref$loading = _ref.loading,
    loading = _ref$loading === void 0 ? false : _ref$loading,
    _ref$hasMore = _ref.hasMore,
    hasMore = _ref$hasMore === void 0 ? false : _ref$hasMore,
    onLoadMore = _ref.onLoadMore;
  var scrollContainerRef = useRef(null);
  var loadingRef = useRef(null);
  var context = useEngineContext();

  // 获取当前语言
  var currentLocale = (context === null || context === void 0 || (_context$engine = context.engine) === null || _context$engine === void 0 || (_context$engine = _context$engine.props) === null || _context$engine === void 0 ? void 0 : _context$engine.locale) || localStorage.getItem('umi_locale') || 'en';

  // 滚动加载更多的处理函数
  var handleScroll = useCallback(function () {
    if (!scrollContainerRef.current || !hasMore || loading || !onLoadMore) {
      return;
    }
    var container = scrollContainerRef.current;
    var scrollTop = container.scrollTop;
    var scrollHeight = container.scrollHeight;
    var clientHeight = container.clientHeight;

    // 当滚动到底部附近时触发加载更多
    if (scrollHeight - scrollTop - clientHeight < 100) {
      onLoadMore();
    }
  }, [hasMore, loading, onLoadMore]);

  // 监听滚动事件
  useEffect(function () {
    var container = scrollContainerRef.current;
    if (!container) return;
    container.addEventListener('scroll', handleScroll);
    return function () {
      container.removeEventListener('scroll', handleScroll);
    };
  }, [handleScroll]);

  // 使用 Intersection Observer 监听加载更多元素
  useEffect(function () {
    if (!loadingRef.current || !hasMore || !onLoadMore) return;
    var observer = new IntersectionObserver(function (entries) {
      var entry = entries[0];
      if (entry.isIntersecting && !loading) {
        onLoadMore();
      }
    }, {
      threshold: 0.1
    });
    observer.observe(loadingRef.current);
    return function () {
      observer.disconnect();
    };
  }, [hasMore, loading, onLoadMore]);
  if (sections.length === 0) {
    return /*#__PURE__*/React.createElement("div", {
      className: "pisell-settings-registry-sections-empty"
    }, /*#__PURE__*/React.createElement(Empty, {
      description: locales.getText('registry.sections.empty'),
      image: Empty.PRESENTED_IMAGE_SIMPLE
    }));
  }
  return /*#__PURE__*/React.createElement("div", {
    className: "pisell-settings-registry-sections",
    ref: scrollContainerRef,
    style: {
      height: '100%',
      overflowY: 'auto',
      paddingRight: '8px'
    }
  }, sections.map(function (section) {
    return /*#__PURE__*/React.createElement("div", {
      key: section.id,
      onClick: function onClick() {
        return onSectionSelect(section.id);
      },
      style: {
        cursor: 'pointer'
      }
    }, /*#__PURE__*/React.createElement(Card, {
      className: "pisell-settings-registry-section-card ".concat(selectedSectionId === section.id ? 'active' : ''),
      hoverable: true,
      bodyStyle: {
        padding: '16px'
      }
    }, /*#__PURE__*/React.createElement("div", {
      className: "pisell-settings-registry-section-content"
    }, /*#__PURE__*/React.createElement("div", {
      className: "pisell-settings-registry-section-icon"
    }, renderSectionIcon(section.icon, section.code)), /*#__PURE__*/React.createElement("div", {
      className: "pisell-settings-registry-section-info"
    }, /*#__PURE__*/React.createElement("div", {
      className: "pisell-settings-registry-section-name"
    }, getLocalizedText(section.name, currentLocale)), /*#__PURE__*/React.createElement("div", {
      className: "pisell-settings-registry-section-code"
    }, /*#__PURE__*/React.createElement("span", {
      className: "section-code-tag",
      style: {
        backgroundColor: '#1890ff',
        color: 'white',
        padding: '2px 8px',
        borderRadius: '4px',
        fontSize: '12px'
      }
    }, section.code)), section.description && /*#__PURE__*/React.createElement("div", {
      className: "pisell-settings-registry-section-description"
    }, getLocalizedText(section.description, currentLocale))))));
  }), hasMore && /*#__PURE__*/React.createElement("div", {
    ref: loadingRef,
    className: "pisell-settings-registry-sections-loading",
    style: {
      textAlign: 'center',
      padding: '16px',
      minHeight: '50px'
    }
  }, loading ? /*#__PURE__*/React.createElement(Spin, {
    size: "small"
  }) : /*#__PURE__*/React.createElement("div", {
    style: {
      color: '#999'
    }
  }, locales.getText('registry.sections.loadMore'))), !hasMore && sections.length > 0 && /*#__PURE__*/React.createElement("div", {
    className: "pisell-settings-registry-sections-no-more",
    style: {
      textAlign: 'center',
      padding: '16px',
      color: '#999',
      fontSize: '12px'
    }
  }, locales.getText('registry.sections.noMore')));
};
export default SectionList;