"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    var desc = Object.getOwnPropertyDescriptor(m, k);
    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
      desc = { enumerable: true, get: function() { return m[k]; } };
    }
    Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
    __setModuleDefault(result, mod);
    return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const react_1 = __importStar(require("react"));
const antd_1 = require("antd");
const debounce_1 = __importDefault(require("lodash/debounce"));
const application_1 = require("@/apis/application");
const file_1 = require("@/constants/file");
const parse_helper_1 = require("@/utils/parse-helper");
const { Option } = antd_1.Select;
const PackageSelect = ({ applicationId, packageType, mode, disabled, ignoreContentIds, placeholder, value, onChange = () => { }, }) => {
    const [selectVal, setSelectVal] = (0, react_1.useState)(value);
    const [fetching, setFetching] = (0, react_1.useState)(false);
    const [options, setOptions] = (0, react_1.useState)([]);
    const fetchRef = (0, react_1.useRef)(0);
    (0, react_1.useEffect)(() => {
        var _a, _b;
        if (value === selectVal)
            return;
        const valueType = (0, parse_helper_1.getAbsoluteTypes)(value);
        const selectValType = (0, parse_helper_1.getAbsoluteTypes)(selectVal);
        if (valueType === selectValType) {
            if (valueType === 'array') {
                if (((_a = value === null || value === void 0 ? void 0 : value.map) === null || _a === void 0 ? void 0 : _a.call(value, (item) => item.value).join(',')) ===
                    ((_b = selectVal === null || selectVal === void 0 ? void 0 : selectVal.map) === null || _b === void 0 ? void 0 : _b.call(selectVal, (item) => item.value).join(','))) {
                    return;
                }
            }
            else if (valueType === 'object') {
                if (value.value === selectVal.value) {
                    return;
                }
            }
        }
        setSelectVal(value);
    }, [value]);
    const handleChange = (0, react_1.useCallback)((val) => {
        setSelectVal(val);
        onChange(val);
    }, [onChange]);
    const fetchOptions = (0, react_1.useCallback)((search) => {
        return (0, application_1.getComponentSearchs)({
            applicationId,
            type: packageType,
            search,
        }).then((res) => {
            if (res.code !== 200) {
                return [];
            }
            return res.data || [];
        });
    }, [applicationId, packageType]);
    const debounceFetcher = (0, react_1.useMemo)(() => {
        const loadOptions = (value) => {
            fetchRef.current += 1;
            const fetchId = fetchRef.current;
            setOptions([]);
            setFetching(true);
            fetchOptions(value).then((data) => {
                if (fetchId !== fetchRef.current) {
                    // for fetch callback order
                    return;
                }
                let newOptions = data;
                if (ignoreContentIds && ignoreContentIds.length > 0) {
                    newOptions = data.filter(({ contentId }) => {
                        return !ignoreContentIds.includes(contentId);
                    });
                }
                setOptions(newOptions);
                setFetching(false);
            });
        };
        return (0, debounce_1.default)(loadOptions, 200);
    }, [fetchOptions]);
    return (react_1.default.createElement(antd_1.Select, { labelInValue: true, showSearch: true, allowClear: true, mode: mode, disabled: disabled, style: { width: '100%' }, optionLabelProp: "label", filterOption: false, notFoundContent: fetching ? react_1.default.createElement(antd_1.Spin, { size: "small" }) : null, value: selectVal, dropdownStyle: { maxHeight: 400, overflow: 'auto' }, placeholder: placeholder || 'Please select package', onChange: handleChange, onSearch: debounceFetcher }, options &&
        options.map((option) => (react_1.default.createElement(Option, { value: option.contentId, label: option.name, key: option.contentId },
            react_1.default.createElement(antd_1.Tag, { color: file_1.suffixTagColor[option.type] }, option.type),
            " ",
            option.name)))));
};
exports.default = PackageSelect;
