import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import * as React from 'react';
import { Plus } from '@gravity-ui/icons';
import { Button, Icon } from '@gravity-ui/uikit';
import { removeFromArray, swapArrayItems } from "../../../../editor-v2/utils/index.js";
import DynamicForm from "../../../FormGenerator.js";
import { formGeneratorCn } from "../../../utils/cn.js";
import FieldBase from "../../FieldBase/FieldBase.js";
import Text from "../Text/Text.js";
import ItemButton from "./ItemButton/ItemButton.js";
import './Array.css';
const b = 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 = removeFromArray(values, index);
            onUpdate('', newArray);
        }
    }, [onUpdate, values]);
    const onReorderItem = React.useCallback((index, placement) => {
        if (Array.isArray(values)) {
            const newArray = swapArrayItems(values, index, placement === 'up' ? index - 1 : index + 1);
            onUpdate('', newArray);
        }
    }, [onUpdate, values]);
    const renderInput = React.useCallback((value, index) => {
        const arrayItemButton = (_jsx(ItemButton, { 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 (_jsxs("div", { className: b('row'), children: [_jsx(Text, { 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 (_jsxs("div", { className: b('card'), children: [_jsxs("div", { className: `${b('row')} ${b('card-head')}`, children: [_jsxs("div", { className: b('row-title'), children: ["Item ", index + 1] }), arrayItemButton] }), _jsx(DynamicForm, { 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 (_jsxs(React.Fragment, { children: [renderItems, _jsxs(Button, { className: b('add-button'), onClick: onAddItem, children: [_jsx(Icon, { data: Plus }), blockConfig.buttonText] })] }));
        }
        else {
            return (_jsx("div", { className: b('empty'), children: _jsxs(Button, { className: b('add-button'), onClick: onAddItem, children: [_jsx(Icon, { data: Plus }), "Please, add new item"] }) }));
        }
    }, [blockConfig.buttonText, haveItems, onAddItem, renderInput, values]);
    return (_jsx(FieldBase, { title: title, className: b(null, className), onRefresh: (value) => onUpdate('', value), expandable: true, children: renderInputs() }));
};
export default ArrayDynamicField;
//# sourceMappingURL=Array.js.map
