"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.PropertyEditorList = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const core_1 = require("@material-ui/core");
const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
const HighlightOff_1 = tslib_1.__importDefault(require("@mui/icons-material/HighlightOff"));
const Edit_1 = tslib_1.__importDefault(require("@mui/icons-material/Edit"));
const Close_1 = tslib_1.__importDefault(require("@mui/icons-material/Close"));
const DialogContentWrapper = styled_components_1.default.div `
    display: flex;
    flex-wrap: wrap;
`;
const PropertyEditorList = (props) => {
    const [selected, setSelected] = (0, react_1.useState)(null);
    const { list, itemUI, showDialogCancel, prototype } = props;
    const onSelect = (item, index) => {
        if (list.length < index) {
            const newItem = prototype();
            Object.keys(item.item).forEach((k) => {
                Reflect.set(newItem, k, Reflect.get(item.item, k));
            });
            setSelected({
                content: newItem,
                index,
                name: item.name,
            });
        }
        else {
            setSelected({
                content: item.item,
                index,
                name: item.name,
            });
        }
    };
    const addNew = () => {
        let newObj = prototype();
        onSelect({ item: newObj, name: "New" }, list.length);
    };
    const onSave = () => {
        itemUI(selected).onComplete(selected);
        setSelected(null);
    };
    const onClose = () => {
        itemUI(selected).onCancel();
        setSelected(null);
    };
    return ((0, jsx_runtime_1.jsxs)(Wrapper, { className: "PropertyList-Wrapper EditorList-root", children: [props.label && (0, jsx_runtime_1.jsx)(core_1.Typography, { variant: "h6", children: props.label }), (0, jsx_runtime_1.jsx)(core_1.List, { classes: { root: "EditorList-List" }, children: list.map((item, idx) => ((0, jsx_runtime_1.jsxs)(core_1.ListItem, { children: [(0, jsx_runtime_1.jsx)(core_1.ListItemText, { children: `${item.name || `rows ${idx + 1}`} ` }), (0, jsx_runtime_1.jsxs)(core_1.ListItemSecondaryAction, { children: [(0, jsx_runtime_1.jsx)(core_1.IconButton, { color: "primary", size: "small", onClick: () => onSelect(item, idx), children: (0, jsx_runtime_1.jsx)(Edit_1.default, {}) }), (0, jsx_runtime_1.jsx)(core_1.IconButton, { color: "secondary", size: "small", onClick: () => {
                                        itemUI(item).onComplete({ index: idx, content: null });
                                    }, children: (0, jsx_runtime_1.jsx)(HighlightOff_1.default, {}) })] })] }, idx))) }), (0, jsx_runtime_1.jsx)(core_1.Button, { color: "primary", onClick: addNew, classes: { root: "EditorList-Add" }, children: "Add" }), selected && ((0, jsx_runtime_1.jsx)("div", { onMouseDown: (e) => {
                    e.stopPropagation();
                }, children: (0, jsx_runtime_1.jsxs)(core_1.Dialog, { open: !!selected.content, onClose: onClose, children: [(0, jsx_runtime_1.jsxs)(core_1.DialogTitle, { disableTypography: true, style: { justifyContent: "space-between", display: "flex" }, children: [(0, jsx_runtime_1.jsx)(core_1.Typography, { variant: "h6", children: selected && selected.name }), (0, jsx_runtime_1.jsx)(core_1.IconButton, { onClick: onClose, children: (0, jsx_runtime_1.jsx)(Close_1.default, {}) })] }), (0, jsx_runtime_1.jsx)(core_1.DialogContent, { children: (0, jsx_runtime_1.jsx)(DialogContentWrapper, { children: itemUI(selected).ui }) }), (0, jsx_runtime_1.jsxs)(core_1.DialogActions, { children: [showDialogCancel && ((0, jsx_runtime_1.jsx)(core_1.Button, { onClick: onClose, variant: "contained", children: "Cancel" })), (0, jsx_runtime_1.jsx)(core_1.Button, { color: "primary", onClick: onSave, variant: "contained", children: "Save" })] })] }) }))] }));
};
exports.PropertyEditorList = PropertyEditorList;
const Wrapper = styled_components_1.default.div `
    display: flex;
    flex-direction: column;
    width: 100%;
`;
//# sourceMappingURL=PropertyEditorList.js.map