/**
 * amis-ui v6.14.0-beta.1
 * Copyright 2018-2025 fex
 */

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var tslib = require('tslib');
var amisCore = require('amis-core');
var React = require('react');
var reactHookForm = require('react-hook-form');
var useSubForm = require('../hooks/use-sub-form.js');
var Button = require('./Button.js');
var FormField = require('./FormField.js');
var icons = require('./icons.js');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var React__default = /*#__PURE__*/_interopDefaultLegacy(React);

var __react_jsx__ = require('react');
var _J$X_ = (__react_jsx__["default"] || __react_jsx__).createElement;
(__react_jsx__["default"] || __react_jsx__).Fragment;
function Combo(_a) {
    var _this = this;
    var _b, _c;
    var control = _a.control, name = _a.name, wrap = _a.wrap, mode = _a.mode, label = _a.label, labelAlign = _a.labelAlign, labelClassName = _a.labelClassName, description = _a.description, fieldClassName = _a.fieldClassName, className = _a.className, style = _a.style, multiLine = _a.multiLine, itemsWrapperClassName = _a.itemsWrapperClassName, itemClassName = _a.itemClassName, addButtonClassName = _a.addButtonClassName, addButtonLevel = _a.addButtonLevel, addButtonSize = _a.addButtonSize, itemRender = _a.itemRender, __ = _a.translate, cx = _a.classnames, addable = _a.addable, scaffold = _a.scaffold, addButtonText = _a.addButtonText, removable = _a.removable, rules = _a.rules, isRequired = _a.isRequired, minLength = _a.minLength, maxLength = _a.maxLength;
    var subForms = React__default["default"].useRef({});
    var subFormRef = React__default["default"].useCallback(function (subform, index) {
        if (subform) {
            subForms.current[index] = subform;
        }
        else {
            delete subForms.current[index];
        }
    }, [subForms]);
    var finalRules = tslib.__assign({}, rules);
    if (isRequired) {
        finalRules.required = true;
    }
    if (minLength) {
        finalRules.minLength = minLength;
    }
    if (maxLength) {
        finalRules.maxLength = maxLength;
    }
    finalRules.validate = React__default["default"].useCallback(function (items) { return tslib.__awaiter(_this, void 0, void 0, function () {
        var map, result, _a, _b, key, valid, e_1_1;
        var e_1, _c;
        return tslib.__generator(this, function (_d) {
            switch (_d.label) {
                case 0:
                    map = subForms.current;
                    if (!(typeof (rules === null || rules === void 0 ? void 0 : rules.validate) === 'function')) return [3 /*break*/, 2];
                    return [4 /*yield*/, rules.validate(items)];
                case 1:
                    result = _d.sent();
                    if (result) {
                        return [2 /*return*/, result];
                    }
                    _d.label = 2;
                case 2:
                    _d.trys.push([2, 7, 8, 9]);
                    _a = tslib.__values(Object.keys(map)), _b = _a.next();
                    _d.label = 3;
                case 3:
                    if (!!_b.done) return [3 /*break*/, 6];
                    key = _b.value;
                    return [4 /*yield*/, (function (methods) {
                            return new Promise(function (resolve) {
                                methods.handleSubmit(function () { return resolve(true); }, function () { return resolve(false); })();
                            });
                        })(map[key])];
                case 4:
                    valid = _d.sent();
                    if (!valid) {
                        return [2 /*return*/, __('validateFailed')];
                    }
                    _d.label = 5;
                case 5:
                    _b = _a.next();
                    return [3 /*break*/, 3];
                case 6: return [3 /*break*/, 9];
                case 7:
                    e_1_1 = _d.sent();
                    e_1 = { error: e_1_1 };
                    return [3 /*break*/, 9];
                case 8:
                    try {
                        if (_b && !_b.done && (_c = _a.return)) _c.call(_a);
                    }
                    finally { if (e_1) throw e_1.error; }
                    return [7 /*endfinally*/];
                case 9: return [2 /*return*/];
            }
        });
    }); }, [subForms]);
    var _d = reactHookForm.useFieldArray({
        control: control,
        name: name,
        shouldUnregister: true,
        rules: finalRules
    }), fields = _d.fields, append = _d.append; _d.update; var remove = _d.remove;
    var _e = reactHookForm.useFormContext(); _e.trigger; var setValue = _e.setValue;
    // useFieldArray 的 update 会更新行 id，导致重新渲染
    // 正在编辑中的元素失去焦点，所以自己写一个
    var lightUpdate = React__default["default"].useCallback(function (index, value) {
        // const arr = control._getFieldArray(name);
        // arr[index] = {...value};
        // control._updateFieldArray(name, arr);
        // trigger(name);
        // control._subjects.watch.next({});
        setValue("".concat(name, ".").concat(index), value);
    }, [control]);
    function renderBody() {
        var _a;
        return (_J$X_("div", { className: cx("Combo Combo--multi", className, multiLine ? "Combo--ver" : "Combo--hor") },
            _J$X_("div", { className: cx("Combo-items", itemsWrapperClassName) }, fields.map(function (field, index) { return (_J$X_("div", { key: field.id, className: cx("Combo-item", itemClassName) },
                _J$X_(ComboItem, { control: control, update: lightUpdate, index: index, value: field, itemRender: itemRender, translate: __, classnames: cx, formRef: subFormRef }),
                _J$X_("a", { onClick: function () { return remove(index); }, key: "delete", className: cx("Combo-delBtn ".concat(removable === false ||
                        (minLength && fields.length <= minLength)
                        ? 'is-disabled'
                        : '')), "data-tooltip": __('delete'), "data-position": "bottom" },
                    _J$X_(icons.Icon, { icon: "status-close", className: "icon" })))); })),
            addable !== false && (!maxLength || fields.length < maxLength) ? (_J$X_("div", { className: cx("Combo-toolbar") },
                _J$X_(Button["default"], { className: cx("Combo-addBtn", addButtonClassName), level: addButtonLevel !== null && addButtonLevel !== void 0 ? addButtonLevel : 'primary', onClick: function () { return append(tslib.__assign({}, scaffold)); }, size: (_a = addButtonSize) !== null && _a !== void 0 ? _a : 'sm' },
                    _J$X_(icons.Icon, { icon: "plus", className: "icon" }),
                    _J$X_("span", null, __(addButtonText || 'add'))))) : null));
    }
    var errors = reactHookForm.useFormState({
        control: control
    }).errors;
    return wrap === false ? (renderBody()) : (_J$X_(FormField["default"], { className: fieldClassName, style: style, label: label, labelAlign: labelAlign, labelClassName: labelClassName, description: description, mode: mode, isRequired: isRequired, hasError: !!((_b = errors[name]) === null || _b === void 0 ? void 0 : _b.message), errors: (_c = errors[name]) === null || _c === void 0 ? void 0 : _c.message }, renderBody()));
}
function ComboItem(_a) {
    var value = _a.value, itemRender = _a.itemRender, index = _a.index, translate = _a.translate, update = _a.update, cx = _a.classnames, formRef = _a.formRef;
    var indexRef = React__default["default"].useRef(index);
    React__default["default"].useEffect(function () {
        indexRef.current = index;
    }, [index]);
    var methods = useSubForm["default"](value, translate, function (data) {
        return update(indexRef.current, data);
    });
    React__default["default"].useEffect(function () {
        formRef === null || formRef === void 0 ? void 0 : formRef(methods, index);
        return function () {
            formRef === null || formRef === void 0 ? void 0 : formRef(null, index);
        };
    }, [methods]);
    var child = itemRender(methods, index);
    if ((child === null || child === void 0 ? void 0 : child.type) === React__default["default"].Fragment) {
        child = child.props.children;
    }
    if (Array.isArray(child)) {
        child = (_J$X_("div", { className: cx('Form-row') }, child.map(function (child, index) { return (_J$X_("div", { className: cx('Form-col', child === null || child === void 0 ? void 0 : child.props.columnClassName), key: child.key || index }, child)); })));
    }
    return _J$X_("div", { className: cx('Combo-itemInner') }, child);
}
var Combo$1 = amisCore.themeable(amisCore.localeable(Combo));

exports.Combo = Combo;
exports.ComboItem = ComboItem;
exports["default"] = Combo$1;
