import React, { createElement, Children, isValidElement, useEffect } from 'react';
import "./index.scss";
import { CollapseSelectorItem } from "../collapse-selector-item/index";
var CollapseSelector = function CollapseSelector(props) {
  var children = props.children;
  // 设置默认值为 null，之后通过 useEffect 设置为第一项
  var _React$useState = React.useState(null),
    activeKey = _React$useState[0],
    setActiveKey = _React$useState[1];
  var handleItemClick = function handleItemClick(key) {
    setActiveKey(activeKey === key ? null : key);
  };

  // 找到第一个子项的 key 并设置为默认打开
  useEffect(function () {
    if (children) {
      var firstKey = null;
      Children.forEach(children, function (child) {
        if (/*#__PURE__*/isValidElement(child) && child.type === CollapseSelectorItem && !firstKey) {
          firstKey = child.props.key || '';
        }
      });
      if (firstKey) {
        setActiveKey(firstKey);
      }
    } else if (props.dataList && props.dataList.length > 0) {
      // 如果使用 dataList，找到第一个项目
      var _firstKey = props.dataList[0].key || '';
      if (_firstKey) {
        setActiveKey(_firstKey);
      }
    }
  }, [children, props.dataList]);

  // 处理低代码引擎中拖放的子组件
  if (children) {
    return /*#__PURE__*/createElement('div', {
      className: 'collapse-selector'
    }, Children.map(children, function (child) {
      if (/*#__PURE__*/isValidElement(child) && child.type === CollapseSelectorItem) {
        var childKey = child.props.key || '';
        var isActive = activeKey === childKey;
        return /*#__PURE__*/createElement('div', {
          key: childKey,
          className: 'collapse-selector-item'
        }, [/*#__PURE__*/createElement('div', {
          className: 'collapse-selector-header',
          onClick: function onClick() {
            return handleItemClick(childKey);
          }
        }, [/*#__PURE__*/createElement('div', {
          className: 'collapse-selector-title'
        }, [child.props.icon && /*#__PURE__*/createElement('i', {
          className: "collapse-selector-icon " + child.props.icon
        }), /*#__PURE__*/createElement('span', null, child.props.title)]), /*#__PURE__*/createElement('div', {
          className: "collapse-selector-indicator " + (isActive ? 'active' : '')
        })]), isActive && /*#__PURE__*/createElement('div', {
          className: 'collapse-selector-content'
        }, child)]);
      }
      return null;
    }));
  }

  // 兼容原有的 dataList 方式（可以删除或保留以保持向后兼容）
  var _props$dataList = props.dataList,
    dataList = _props$dataList === void 0 ? [] : _props$dataList;
  return /*#__PURE__*/createElement('div', {
    className: 'collapse-selector'
  }, dataList.map(function (item) {
    return /*#__PURE__*/createElement('div', {
      key: item.key,
      className: 'collapse-selector-item'
    }, [/*#__PURE__*/createElement('div', {
      className: 'collapse-selector-header',
      onClick: function onClick() {
        return handleItemClick(item.key || '');
      }
    }, [/*#__PURE__*/createElement('div', {
      className: 'collapse-selector-title'
    }, [item.icon && /*#__PURE__*/createElement('i', {
      className: "collapse-selector-icon " + item.icon
    }), /*#__PURE__*/createElement('span', null, item.title)]), /*#__PURE__*/createElement('div', {
      className: "collapse-selector-indicator " + (activeKey === item.key ? 'active' : '')
    })]), item.isContent && activeKey === item.key && /*#__PURE__*/createElement('div', {
      className: 'collapse-selector-content'
    }, /*#__PURE__*/createElement(CollapseSelectorItem, {
      title: item.title,
      key: item.key
    }))]);
  }));
};
CollapseSelector.displayName = 'CollapseSelector';
export default CollapseSelector;