"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;
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.List = void 0;
const react_1 = __importStar(require("react"));
const inlines_1 = require("inlines");
const icons_1 = require("../../icons");
const components_1 = require("../../components");
const Item_1 = require("../FormGroup/Column/Item");
const List = ({ type = 'string', field, label, onChange, value = [], items, isChild = false, deleteFunc, onChangeObj, hasChanges, valuesChanged, setChanges, alwaysAccept, item, }) => {
    const [open, setOpen] = (0, react_1.useState)(false);
    const [prevValue, setValue] = (0, react_1.useState)(value);
    if (Object.keys(value).length > 0 && !Array.isArray(value)) {
        const newVal = Object.values(value);
        const key = parseInt(Object.keys(value)[0]);
        const newValue = [...prevValue];
        newValue[key] = newVal[0];
        value = Object.values(newValue);
        onChange(field, value);
    }
    const itemType = type === 'references' ? 'reference' : type;
    const addType = itemType === 'object'
        ? {}
        : itemType === 'array' || itemType === 'set'
            ? ['']
            : '';
    return (react_1.default.createElement(react_1.default.Fragment, null,
        react_1.default.createElement(components_1.Text, { onClick: () => console.log(value), weight: "strong", style: {
                display: 'flex',
                gap: 4,
                alignItems: 'center',
                width: '100%',
            } },
            field,
            react_1.default.createElement(components_1.Button, { hideFocusState: true, size: "small", light: true, color: "system", onClick: () => setOpen(!open), style: { border: '1px solid transparent' }, icon: react_1.default.createElement(icons_1.IconArrowheadRight, { color: "default", style: {
                        transform: open ? 'rotate(90deg)' : 'rotate(0deg)',
                        transition: '0.2s all',
                    } }) }),
            !open && itemType === 'array' && value.length > 1 && (react_1.default.createElement(components_1.Badge, { style: { marginLeft: 4 }, color: "neutral", light: true },
                "+",
                value.length)),
            isChild && (react_1.default.createElement(components_1.Button
            // hideFocusState
            , { 
                // hideFocusState
                size: "small", 
                // light
                color: "system", onClick: deleteFunc, style: {
                    border: '1px solid transparent',
                    marginLeft: 'auto',
                }, icon: react_1.default.createElement(icons_1.IconClose, { color: "default" }) }))),
        react_1.default.createElement(inlines_1.styled.div, { style: {
                margin: '8px 0',
                '& > * + *': { marginTop: '8px' },
                gap: 4,
                display: 'flex',
                flexDirection: 'column',
            } }, value
            .filter((_, i) => (open ? true : i === 0))
            .map((thing, index) => {
            const newField = field + '.' + index;
            return (react_1.default.createElement("span", { key: newField, onFocus: () => setOpen(true), style: { position: 'relative' } },
                !open && itemType !== 'array' && value.length > 1 && (react_1.default.createElement(inlines_1.styled.div, { style: {
                        position: 'absolute',
                        display: 'flex',
                        alignItems: 'center',
                        inset: 0,
                        gap: 8,
                        color: 'transparent',
                        padding: 12,
                        overflow: 'hidden',
                        paddingLeft: itemType === 'boolean' || itemType === 'checkbox'
                            ? 70
                            : 12,
                    } },
                    react_1.default.createElement(components_1.Text, { style: {
                            height: '100%',
                            marginLeft: 0,
                            overflow: 'hidden',
                            maxWidth: 'calc(100% - 60px)',
                        }, color: "inherit" }, itemType !== 'object' ? value[0] : ''),
                    react_1.default.createElement(components_1.Badge, { color: "neutral", light: true },
                        "+",
                        value.length))),
                react_1.default.createElement(Item_1.FormItem, { key: newField, noLabel: true, objValues: items, item: {
                        ...thing,
                        properties: item.items?.properties,
                        type: type === 'references' ? 'reference' : item.items.type,
                        items: item.items?.items ?? {},
                        field: newField,
                    }, onChange: onChange, hasChanges: hasChanges, valuesChanged: valuesChanged, setChanges: setChanges, alwaysAccept: alwaysAccept, onChangeObj: onChangeObj, style: { backgroundColor: 'red' }, value: value[index], deleteFunc: () => {
                        onChange(field, value.filter((_, i) => i !== index));
                    } }),
                itemType === 'array' ||
                    (itemType === 'object' && (react_1.default.createElement(inlines_1.styled.div, { style: {
                            position: 'absolute',
                            top: '0',
                            right: 8,
                            height: '40px',
                            display: 'flex',
                            justifyContent: 'center',
                            alignItems: 'center',
                        } },
                        react_1.default.createElement(icons_1.IconClose, { onClick: () => {
                                onChange(field, value.filter((_, i) => i !== index));
                            } }))))));
        })),
        react_1.default.createElement(inlines_1.styled.div, { style: { display: 'flex' } },
            react_1.default.createElement(components_1.Button, { color: "system", size: "small", hideFocusState: true, icon: react_1.default.createElement(icons_1.IconPlus, null), style: { border: '1px solid transparent' }, onClick: () => {
                    setOpen(true);
                    onChange(field, [...value, addType]);
                } },
                "Add ",
                itemType))));
};
exports.List = List;
//# sourceMappingURL=index.js.map