"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const React = tslib_1.__importStar(require("react"));
const icons_1 = require("@gravity-ui/icons");
const uikit_1 = require("@gravity-ui/uikit");
const utils_1 = require("../../../../editor-v2/utils/index.js");
const FormGenerator_1 = tslib_1.__importDefault(require("../../../FormGenerator.js"));
const cn_1 = require("../../../utils/cn.js");
const FieldBase_1 = tslib_1.__importDefault(require("../../FieldBase/FieldBase.js"));
const Text_1 = tslib_1.__importDefault(require("../Text/Text.js"));
const ItemButton_1 = tslib_1.__importDefault(require("./ItemButton/ItemButton.js"));
const b = (0, cn_1.formGeneratorCn)('array-dynamic-field');
const ArrayDynamicField = ({ title, values, onUpdate, className, blockConfig }) => {
    const haveItems = values && Array.isArray(values) && values.length;
    const onAddItem = React.useCallback(() => {
        if (blockConfig.arrayType === 'text') {
            onUpdate('', haveItems ? [...values, ''] : ['']);
        }
        else if (blockConfig.arrayType === 'object') {
            onUpdate('', haveItems ? [...values, {}] : [{}]);
        }
    }, [blockConfig.arrayType, haveItems, onUpdate, values]);
    const onDeleteItem = React.useCallback((index) => {
        if (Array.isArray(values)) {
            const newArray = (0, utils_1.removeFromArray)(values, index);
            onUpdate('', newArray);
        }
    }, [onUpdate, values]);
    const onReorderItem = React.useCallback((index, placement) => {
        if (Array.isArray(values)) {
            const newArray = (0, utils_1.swapArrayItems)(values, index, placement === 'up' ? index - 1 : index + 1);
            onUpdate('', newArray);
        }
    }, [onUpdate, values]);
    const renderInput = React.useCallback((value, index) => {
        const arrayItemButton = ((0, jsx_runtime_1.jsx)(ItemButton_1.default, { onRemove: () => onDeleteItem(index), onReorderUp: () => onReorderItem(index, 'up'), onReorderDown: () => onReorderItem(index, 'down'), disableReorderUp: index === 0, disableReorderDown: Boolean(haveItems) && values.length === index + 1 }));
        switch (blockConfig.arrayType) {
            case 'text': {
                return ((0, jsx_runtime_1.jsxs)("div", { className: b('row'), children: [(0, jsx_runtime_1.jsx)(Text_1.default, { className: b('row-field'), value: String(value), onUpdate: (updateValue) => onUpdate(`[${index}]`, updateValue), onRefresh: (updatedValue) => onUpdate('', updatedValue) }), arrayItemButton] }));
            }
            case 'object': {
                if (!blockConfig.properties) {
                    return null;
                }
                return ((0, jsx_runtime_1.jsxs)("div", { className: b('card'), children: [(0, jsx_runtime_1.jsxs)("div", { className: `${b('row')} ${b('card-head')}`, children: [(0, jsx_runtime_1.jsxs)("div", { className: b('row-title'), children: ["Item ", index + 1] }), arrayItemButton] }), (0, jsx_runtime_1.jsx)(FormGenerator_1.default, { contentConfig: value, blockConfig: blockConfig.properties, onUpdateByKey: (key, updateValue) => onUpdate(`[${index}].${key}`, updateValue) })] }, index));
            }
            default: {
                return null;
            }
        }
    }, [blockConfig, haveItems, onDeleteItem, onReorderItem, onUpdate, values]);
    const renderInputs = React.useCallback(() => {
        if (haveItems) {
            const renderItems = values
                .map(renderInput)
                .filter(Boolean);
            return ((0, jsx_runtime_1.jsxs)(React.Fragment, { children: [renderItems, (0, jsx_runtime_1.jsxs)(uikit_1.Button, { className: b('add-button'), onClick: onAddItem, children: [(0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: icons_1.Plus }), blockConfig.buttonText] })] }));
        }
        else {
            return ((0, jsx_runtime_1.jsx)("div", { className: b('empty'), children: (0, jsx_runtime_1.jsxs)(uikit_1.Button, { className: b('add-button'), onClick: onAddItem, children: [(0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: icons_1.Plus }), "Please, add new item"] }) }));
        }
    }, [blockConfig.buttonText, haveItems, onAddItem, renderInput, values]);
    return ((0, jsx_runtime_1.jsx)(FieldBase_1.default, { title: title, className: b(null, className), onRefresh: (value) => onUpdate('', value), expandable: true, children: renderInputs() }));
};
exports.default = ArrayDynamicField;
//# sourceMappingURL=Array.js.map
