import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState } from "react";
import { List, ListItem, ListItemText, ListItemSecondaryAction, IconButton, Button, Typography, Dialog, DialogContent, DialogTitle, DialogActions, } from "@material-ui/core";
import styled from "styled-components";
import HighlightOffIcon from "@material-ui/icons/HighlightOff";
import EditIcon from "@material-ui/icons/Edit";
import CloseIcon from "@material-ui/icons/Close";
const DialogContentWrapper = styled.div `
    display: flex;
    flex-wrap: wrap;
`;
export const PropertyEditorList = (props) => {
    const [selected, setSelected] = 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 (_jsxs(Wrapper, Object.assign({ className: "PropertyList-Wrapper EditorList-root" }, { children: [props.label && _jsx(Typography, Object.assign({ variant: "h6" }, { children: props.label }), void 0),
            _jsx(List, Object.assign({ classes: { root: "EditorList-List" } }, { children: list.map((item, idx) => (_jsxs(ListItem, { children: [_jsx(ListItemText, { children: `${item.name || `rows ${idx + 1}`} ` }, void 0),
                        _jsxs(ListItemSecondaryAction, { children: [_jsx(IconButton, Object.assign({ color: "primary", size: "small", onClick: () => onSelect(item, idx) }, { children: _jsx(EditIcon, {}, void 0) }), void 0),
                                _jsx(IconButton, Object.assign({ color: "secondary", size: "small", onClick: () => {
                                        itemUI(item).onComplete({ index: idx, content: null });
                                    } }, { children: _jsx(HighlightOffIcon, {}, void 0) }), void 0)] }, void 0)] }, idx))) }), void 0),
            _jsx(Button, Object.assign({ color: "primary", onClick: addNew, classes: { root: "EditorList-Add" } }, { children: "Add" }), void 0),
            selected && (_jsx("div", Object.assign({ onMouseDown: (e) => {
                    e.stopPropagation();
                } }, { children: _jsxs(Dialog, Object.assign({ open: !!selected.content, onClose: onClose }, { children: [_jsxs(DialogTitle, Object.assign({ disableTypography: true, style: { justifyContent: "space-between", display: "flex" } }, { children: [_jsx(Typography, Object.assign({ variant: "h6" }, { children: selected && selected.name }), void 0),
                                _jsx(IconButton, Object.assign({ onClick: onClose }, { children: _jsx(CloseIcon, {}, void 0) }), void 0)] }), void 0),
                        _jsx(DialogContent, { children: _jsx(DialogContentWrapper, { children: itemUI(selected).ui }, void 0) }, void 0),
                        _jsxs(DialogActions, { children: [showDialogCancel && (_jsx(Button, Object.assign({ onClick: onClose, variant: "contained" }, { children: "Cancel" }), void 0)),
                                _jsx(Button, Object.assign({ color: "primary", onClick: onSave, variant: "contained" }, { children: "Save" }), void 0)] }, void 0)] }), void 0) }), void 0))] }), void 0));
};
const Wrapper = styled.div `
    display: flex;
    flex-direction: column;
    width: 100%;
`;
//# sourceMappingURL=PropertyEditorList.js.map