import React from 'react';
import { formilyReact } from '@cainiaofe/cn-ui';
import './index.scss';
import isPlainObject from 'lodash/isPlainObject';
import classNames from 'classnames';
const { connect, observer, useFieldSchema } = formilyReact;
const DropdownFilterItem = connect(observer((props) => {
    const { children } = props;
    const fieldSchema = useFieldSchema();
    const isCompose = (fieldSchema === null || fieldSchema === void 0 ? void 0 : fieldSchema['x-component']) === 'Compose';
    const isRangeDatePicker = ['RangePicker', 'CnRangeDatePickerPro'].includes(fieldSchema === null || fieldSchema === void 0 ? void 0 : fieldSchema['x-component']);
    const renderComposePop = () => {
        const properties = fieldSchema === null || fieldSchema === void 0 ? void 0 : fieldSchema.properties;
        const keys = isPlainObject(properties) ? Object.keys(properties) : [];
        return (React.createElement(React.Fragment, null, keys.map((key) => (React.createElement("div", { className: "cn-ai-search-custom-select-popup-container", id: key })))));
    };
    // fix: 日期区间使用本体时，需要增加宽度，来解决遮挡的问题
    const contentCls = classNames('cn-ai-dropdown-filter-item__content', {
        'cn-dropdown-filter-item__content__date-range': isRangeDatePicker,
    });
    return (React.createElement(React.Fragment, null,
        React.createElement("div", { className: contentCls },
            children,
            React.createElement("div", { className: "cn-search-custom-select-container" },
                React.createElement("div", { className: "cn-ai-search-custom-select-popup-container", id: fieldSchema === null || fieldSchema === void 0 ? void 0 : fieldSchema.name }),
                isCompose ? renderComposePop() : null))));
}));
export default DropdownFilterItem;
