/**
 * amis-ui v6.12.0-beta.0
 * Copyright 2018-2025 fex
 */

import { __extends, __decorate, __metadata } from 'tslib';
import React__default from 'react';
import { guid, autobind, themeable, localeable, uncontrollable } from 'amis-core';
import InputBox from './InputBox.js';
import { Icon } from './icons.js';
import Button from './Button.js';
import Sortable from 'sortablejs';
import { findDOMNode } from 'react-dom';

var ArrayInput = /** @class */ (function (_super) {
    __extends(ArrayInput, _super);
    function ArrayInput() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.id = guid();
        return _this;
    }
    ArrayInput.prototype.handleItemOnChange = function (index, itemValue) {
        var onChange = this.props.onChange;
        var value = this.props.value;
        var newValue = Array.isArray(value) ? value.concat() : [];
        newValue.splice(index, 1, itemValue);
        onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
    };
    ArrayInput.prototype.dragTipRef = function (ref) {
        if (!this.dragTip && ref) {
            this.initDragging();
        }
        else if (this.dragTip && !ref) {
            this.destroyDragging();
        }
        this.dragTip = ref;
    };
    ArrayInput.prototype.handleAdd = function () {
        var _a = this.props, value = _a.value, onChange = _a.onChange, itemInitalValue = _a.itemInitalValue;
        var newValue = Array.isArray(value) ? value.concat() : [];
        newValue.push(itemInitalValue);
        onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
    };
    ArrayInput.prototype.handleRemove = function (e) {
        var indx = parseInt(e.currentTarget.getAttribute('data-index'), 10);
        var _a = this.props, value = _a.value, onChange = _a.onChange; _a.itemInitalValue;
        var newValue = Array.isArray(value) ? value.concat() : [];
        newValue.splice(indx, 1);
        onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
    };
    ArrayInput.prototype.initDragging = function () {
        var _this = this;
        var onChange = this.props.onChange;
        var ns = this.props.classPrefix;
        var dom = findDOMNode(this);
        this.sortable = new Sortable(dom.querySelector(".drag-group"), {
            group: "array-input-".concat(this.id),
            animation: 150,
            handle: ".drag-bar",
            ghostClass: "".concat(ns, "ArrayInput-item--dragging"),
            onEnd: function (e) {
                // 没有移动
                if (e.newIndex === e.oldIndex) {
                    return;
                }
                // 换回来
                var parent = e.to;
                if (e.oldIndex < parent.childNodes.length - 1) {
                    parent.insertBefore(e.item, parent.childNodes[e.oldIndex > e.newIndex ? e.oldIndex + 1 : e.oldIndex]);
                }
                else {
                    parent.appendChild(e.item);
                }
                var value = _this.props.value;
                if (!Array.isArray(value)) {
                    return;
                }
                var newValue = value.concat();
                newValue.splice(e.newIndex, 0, newValue.splice(e.oldIndex, 1)[0]);
                onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
            }
        });
    };
    ArrayInput.prototype.destroyDragging = function () {
        this.sortable && this.sortable.destroy();
    };
    ArrayInput.prototype.renderItem = function (value, index, collection) {
        var _a = this.props, itemRender = _a.itemRender, disabled = _a.disabled, cx = _a.classnames, sortable = _a.sortable, removable = _a.removable, minLength = _a.minLength;
        return (React__default.createElement("div", { className: cx('ArrayInput-item'), key: index },
            sortable && collection.length > 1 && !disabled ? (React__default.createElement("a", { className: cx('ArrayInput-itemDrager drag-bar') },
                React__default.createElement(Icon, { icon: "drag-bar", className: "icon" }))) : null,
            itemRender({
                value: value,
                onChange: this.handleItemOnChange.bind(this, index),
                index: index,
                disabled: disabled
            }),
            removable !== false &&
                !disabled &&
                (!minLength || collection.length > minLength) ? (React__default.createElement("a", { "data-index": index, className: cx('ArrayInput-itemRemove'), onClick: this.handleRemove },
                React__default.createElement(Icon, { icon: "close", className: "icon" }))) : null));
    };
    ArrayInput.prototype.render = function () {
        var _this = this;
        var _a = this.props, cx = _a.classnames, value = _a.value, placeholder = _a.placeholder, __ = _a.translate, maxLength = _a.maxLength, sortable = _a.sortable, sortTip = _a.sortTip, disabled = _a.disabled;
        return (React__default.createElement("div", { className: cx('ArrayInput') },
            Array.isArray(value) && value.length ? (React__default.createElement("div", { className: cx('ArrayInput-items drag-group') }, value.map(function (item, index) { return _this.renderItem(item, index, value); }))) : (React__default.createElement("div", { className: cx('ArrayInput-placeholder') }, __(placeholder))),
            React__default.createElement("div", { className: cx('ArrayInput-toolbar', sortable && Array.isArray(value) && value.length > 1
                    ? 'ArrayInput-toolbar--dnd'
                    : '') },
                !Array.isArray(value) || !maxLength || value.length < maxLength ? (React__default.createElement(Button, { className: cx('ArrayInput-addBtn'), onClick: this.handleAdd, level: "", disabled: disabled },
                    React__default.createElement(Icon, { icon: "plus", className: "icon" }),
                    React__default.createElement("span", null, __('add')))) : null,
                sortable && Array.isArray(value) && value.length ? (React__default.createElement("span", { className: cx("ArrayInput-sortTip"), ref: this.dragTipRef }, Array.isArray(value) && value.length > 1 ? __(sortTip) : '')) : null)));
    };
    ArrayInput.defaultProps = {
        placeholder: 'empty',
        itemRender: function (_a) {
            var value = _a.value, onChange = _a.onChange;
            return React__default.createElement(InputBox, { value: value, onChange: onChange });
        }
    };
    __decorate([
        autobind,
        __metadata("design:type", Function),
        __metadata("design:paramtypes", [Object]),
        __metadata("design:returntype", void 0)
    ], ArrayInput.prototype, "dragTipRef", null);
    __decorate([
        autobind,
        __metadata("design:type", Function),
        __metadata("design:paramtypes", []),
        __metadata("design:returntype", void 0)
    ], ArrayInput.prototype, "handleAdd", null);
    __decorate([
        autobind,
        __metadata("design:type", Function),
        __metadata("design:paramtypes", [Object]),
        __metadata("design:returntype", void 0)
    ], ArrayInput.prototype, "handleRemove", null);
    return ArrayInput;
}(React__default.Component));
var ArrayInput$1 = themeable(localeable(uncontrollable(ArrayInput, {
    value: 'onChange'
})));

export { ArrayInput, ArrayInput$1 as default };
