"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ListEntryFormControl = exports.ListEntryType = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = tslib_1.__importDefault(require("react"));
const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
const core_1 = require("@material-ui/core");
const react_beautiful_dnd_1 = require("react-beautiful-dnd");
const DataFormControl_1 = require("../DataFormControl");
const CommonStyled_1 = require("./CommonStyled");
const StringDataDefinition_1 = require("@appglue/common/dist/Common/Data/Definitions/StringDataDefinition");
const StyledButton_1 = require("../../../CommonUI/BuildlingBlocks/StyledButton");
const StyledToggleButonGroup_1 = require("../../../CommonUI/BuildlingBlocks/StyledToggleButonGroup");
const EditGrayIcon_1 = require("../../../CommonUI/Icon/EditGrayIcon");
const CloseRedIcon_1 = require("../../../CommonUI/Icon/CloseRedIcon");
const ApplyIcon_1 = require("../../../CommonUI/Icon/ApplyIcon");
const UILayer_1 = require("../../../CommonUI/BuildlingBlocks/UILayer");
const ObserveState_1 = require("../../../CommonUI/StateManagement/ObserveState");
const StateManager_1 = require("@appglue/common/dist/Common/StateManager");
const DataUtilities_1 = require("@appglue/common/dist/Common/DataUtilities");
var ListEntryType;
(function (ListEntryType) {
    ListEntryType["LIST"] = "LIST";
    ListEntryType["TEXT"] = "TEXT";
})(ListEntryType = exports.ListEntryType || (exports.ListEntryType = {}));
class XListEntryUI extends react_1.default.Component {
    render() {
        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: this.props.editMe.renderBaseDataControlEditor() });
    }
}
class ListEntryFormControl extends DataFormControl_1.DataFormControl {
    __type = "List Entry";
    mode = ListEntryType.LIST;
    render() {
        const issueData = this.getFormContext().getControlContext(this).getRuntimeIssueData();
        const issueText = issueData?.text || "";
        return ((0, jsx_runtime_1.jsxs)(XListEntryRender, { "data-testid": this.valueName, children: [(0, jsx_runtime_1.jsx)(StyledFormLabel, { children: this.label }), (0, jsx_runtime_1.jsx)(ObserveState_1.ObserveState, { listenTo: this, properties: ["mode"], control: () => {
                        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(StyledToggleButonGroup_1.StyledToggleButtonGroup, { value: this.mode, color: "primary", onChange: (event, value) => {
                                        event.stopPropagation();
                                        this.mode = value;
                                        StateManager_1.StateManager.propertyChanged(this, "mode");
                                    }, exclusive: true, style: { marginBottom: 10 }, children: [(0, jsx_runtime_1.jsx)(StyledToggleButonGroup_1.StyledToggleButton, { value: ListEntryType.LIST, "data-testid": "list-mode", children: ListEntryType.LIST }), (0, jsx_runtime_1.jsx)(StyledToggleButonGroup_1.StyledToggleButton, { value: ListEntryType.TEXT, "data-testid": "text-mode", children: ListEntryType.TEXT })] }), this.mode === ListEntryType.LIST ? ((0, jsx_runtime_1.jsx)(TextList, { items: this.getItems(), updateCallback: (newItems) => {
                                        if (this.valueName) {
                                            this.setFormDataValue(this.valueName, newItems);
                                        }
                                    } })) : ((0, jsx_runtime_1.jsx)(MultilineText, { items: this.getItems(), updateCallback: (newItems) => {
                                        if (this.valueName) {
                                            this.setFormDataValue(this.valueName, newItems);
                                        }
                                    } }))] }));
                    } }), issueText && ((0, jsx_runtime_1.jsx)(CommonStyled_1.StyledFormHelperText, { error: Boolean(issueText), children: issueText ? issueText : "" }))] }));
    }
    renderEditUI() {
        return (0, jsx_runtime_1.jsx)(XListEntryUI, { editMe: this });
    }
    getAddedData() {
        if (!this.valueName)
            return;
        let def = new StringDataDefinition_1.StringDataDefinition();
        def.list = true;
        def.name = this.valueName;
        return def;
    }
    getItems() {
        if (this.valueName) {
            return this.getFormDataValue(this.valueName) || [];
        }
        return [];
    }
    getStorageData() {
        let retData = super.getStorageData();
        retData = DataUtilities_1.DataUtilities.addStorageData(this, retData, "__type", "mode");
        return retData;
    }
    setStorageData(data) {
        super.setStorageData(data);
        DataUtilities_1.DataUtilities.setStorageData(this, data, "__type", "mode");
    }
}
exports.ListEntryFormControl = ListEntryFormControl;
const MultilineText = (props) => {
    const [items, setItems] = react_1.default.useState(() => {
        if (props.items.length) {
            return props.items;
        }
        else
            return [""];
    });
    const [isEdit, setIsEdit] = react_1.default.useState(false);
    const [currentIdx, setCurrentIdx] = react_1.default.useState(0);
    const onKeyDown = (event) => {
        if (event.keyCode === 13) {
            if (currentIdx === items.length - 1) {
                const tempItems = [...items, ""];
                setItems([...tempItems]);
            }
            setCurrentIdx(currentIdx + 1);
        }
        else if (event.keyCode === 8) {
            if (items[currentIdx] === "") {
                const tempItems = [...items];
                tempItems.splice(currentIdx, 1);
                setItems([...tempItems]);
                setCurrentIdx(currentIdx - 1);
            }
        }
    };
    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(MultipleTextRender, { isEdit: isEdit, "data-testid": "text-mode-render", children: items.map((item, idx) => ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsxs)(IndexRender, { children: [idx + 1, "."] }), (0, jsx_runtime_1.jsx)(MultilineTextItemInput, { value: item, readOnly: !isEdit, disableUnderline: true, onFocus: () => {
                                setCurrentIdx(idx);
                            }, onChange: (event) => {
                                const tempItems = [...items];
                                tempItems[idx] = event.target.value;
                                setItems([...tempItems]);
                            }, onKeyDown: onKeyDown, autoFocus: idx === currentIdx, "data-testid": `textmode-input-${idx}` })] }, idx))) }), (0, jsx_runtime_1.jsx)(StyledButton_1.StyledButton, { color: "primary", variant: "outlined", style: { marginTop: 12 }, "data-testid": "textmode-switch", onClick: () => {
                    if (isEdit) {
                        props.updateCallback(items);
                        setIsEdit(false);
                    }
                    else {
                        setIsEdit(true);
                    }
                }, children: isEdit ? "Save" : "Edit" })] }));
};
const TextList = (props) => {
    const [items, setItems] = react_1.default.useState(props.items);
    const [newItems, setNewItems] = react_1.default.useState([]);
    const [currentIdx, setCurrentIdx] = react_1.default.useState(-1);
    const onKeyDown = (event) => {
        if (event.keyCode === 13) {
            if (currentIdx === items.length - 1) {
                const tempItems = [...items, ""];
                setItems([...tempItems]);
            }
            setCurrentIdx(currentIdx + 1);
        }
    };
    const onPaste = (event) => {
        let pastedItems = event.clipboardData.getData("Text").split("\n");
        if (pastedItems.length > 1) {
            setNewItems(pastedItems);
        }
    };
    const onDragEnd = (result) => {
        if (!result.destination)
            return;
        let tempItems = [...items];
        let deleteItems = tempItems.splice(result.source.index, 1);
        tempItems.splice(result.destination.index, 0, deleteItems[0]);
        setItems([...tempItems]);
        props.updateCallback([...tempItems]);
    };
    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(TextListRender, { onPaste: onPaste, "data-testid": "list-mode-render", children: (0, jsx_runtime_1.jsx)(react_beautiful_dnd_1.DragDropContext, { onDragEnd: onDragEnd, children: (0, jsx_runtime_1.jsx)(react_beautiful_dnd_1.Droppable, { droppableId: "droppable", children: (provided) => ((0, jsx_runtime_1.jsx)("div", { ...provided.droppableProps, ref: provided.innerRef, children: items.map((item, idx) => ((0, jsx_runtime_1.jsx)(react_beautiful_dnd_1.Draggable, { draggableId: `item_${idx}`, index: idx, isDragDisabled: idx === currentIdx, children: (provided) => ((0, jsx_runtime_1.jsxs)(TextListItem, { ref: provided.innerRef, ...provided.draggableProps, ...provided.dragHandleProps, children: [(0, jsx_runtime_1.jsxs)(IndexRender, { children: [idx + 1, "."] }), (0, jsx_runtime_1.jsx)(TextListItemInput, { edit: currentIdx === idx, value: item, readOnly: currentIdx !== idx, disableUnderline: true, onChange: (event) => {
                                                const tempItems = [...items];
                                                tempItems[idx] = event.target.value;
                                                setItems([...tempItems]);
                                                props.updateCallback([...tempItems]);
                                            }, onKeyDown: onKeyDown, "data-testid": `listmode-input-${idx}` }), (0, jsx_runtime_1.jsx)(ActionButton, { "data-testid": `listmode-editswitch-${idx}`, onClick: () => {
                                                if (idx === currentIdx) {
                                                    setCurrentIdx(-1);
                                                    props.updateCallback(items);
                                                }
                                                else {
                                                    setCurrentIdx(idx);
                                                }
                                            }, children: idx === currentIdx ? (0, jsx_runtime_1.jsx)(ApplyIcon_1.ApplyIcon, {}) : (0, jsx_runtime_1.jsx)(EditGrayIcon_1.EditGrayIcon, {}) }), (0, jsx_runtime_1.jsx)(ActionButton, { "data-testid": `listmode-delete-${idx}`, onClick: () => {
                                                const tempItems = [...items];
                                                tempItems.splice(idx, 1);
                                                setItems([...tempItems]);
                                                props.updateCallback([...tempItems]);
                                            }, children: (0, jsx_runtime_1.jsx)(CloseRedIcon_1.CloseRedIcon, {}) })] })) }, idx))) })) }) }) }), (0, jsx_runtime_1.jsx)(StyledButton_1.StyledButton, { color: "primary", variant: "outlined", style: { marginTop: 12 }, onClick: () => {
                    const tempItems = [...items, ""];
                    setItems([...tempItems]);
                    props.updateCallback([...tempItems]);
                }, children: "Add" }), (0, jsx_runtime_1.jsx)(UILayer_1.UILayer, { open: newItems.length > 1, padding: "36px 32px 32px", renderUI: () => {
                    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(LayerDescription, { children: "Insert data as one row or multiple rows?" }), (0, jsx_runtime_1.jsxs)(LayerActions, { children: [(0, jsx_runtime_1.jsx)(StyledButton_1.StyledButton, { color: "primary", variant: "outlined", onClick: () => {
                                            setItems([...items, newItems.join("\n")]);
                                            props.updateCallback([...items, newItems.join("\n")]);
                                            setNewItems([]);
                                        }, children: "One" }), (0, jsx_runtime_1.jsx)(StyledButton_1.StyledButton, { color: "primary", variant: "outlined", onClick: () => {
                                            setItems([...items, ...newItems]);
                                            props.updateCallback([...items, ...newItems]);
                                            setNewItems([]);
                                        }, children: "Multiple" })] })] }));
                }, showCloseButton: true, onClose: () => {
                    setNewItems([]);
                } })] }));
};
const TextListRender = styled_components_1.default.div `
    display: flex;
    flex-direction: column;

    padding: 16px 8px;

    border: 1px solid transparent;

    column-gap: 4px;
    row-gap: 0;
`;
const TextListItem = styled_components_1.default.div `
    display: flex;
    flex-direction: row;
    align-items: center;

    padding: 0 2px;

    > * {
        margin: 0 2px !important;
    }
`;
const MultipleTextRender = styled_components_1.default.div `
    display: grid;
    grid-template-columns: max-content max-content;

    padding: 16px 8px;

    border: 1px solid transparent;

    column-gap: 8px;
    row-gap: 12px;

    ${(props) => props.isEdit
    ? `
                background: #FCFCFE;
                border: 1px solid rgba(39, 41, 50, 0.35);
                border-radius: 4px;
            `
    : ``}
`;
const IndexRender = styled_components_1.default.div `
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 17px;
    letter-spacing: 0px;
    text-align: left;
    color: rgba(96, 104, 129, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
`;
const TextListItemInput = ({ edit, ...props }) => {
    if (edit)
        return (0, jsx_runtime_1.jsx)(StyledEditTextListItemInput, { ...props });
    return (0, jsx_runtime_1.jsx)(StyledTextListItemInput, { ...props });
};
const StyledEditTextListItemInput = (0, styled_components_1.default)(core_1.Input) `
    && {
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: 17px;
        letter-spacing: 0px;
        text-align: left;
        color: #272932;
        flex: 1;

        .MuiInputBase-input {
            padding: 6px 12px;
            border: 1px solid transparent;
            background: #fcfcfe;
            border: 1px solid rgba(39, 41, 50, 0.35);
            border-radius: 4px;
        }
    }
`;
const StyledTextListItemInput = (0, styled_components_1.default)(core_1.Input) `
    && {
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: 17px;
        letter-spacing: 0px;
        text-align: left;
        color: #272932;
        flex: 1;
        position: relative;

        &::after {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 2;
        }

        .MuiInputBase-input {
            padding: 6px 12px;
            border: 1px solid transparent;
        }
    }
`;
const MultilineTextItemInput = (0, styled_components_1.default)(core_1.Input) `
    && {
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: 17px;
        letter-spacing: 0px;
        text-align: left;
        color: #272932;

        .MuiInputBase-input {
            padding: 0;
        }
    }
`;
const StyledFormLabel = (0, styled_components_1.default)(core_1.FormLabel) `
    && {
        margin-bottom: 20px;
    }
`;
const ActionButton = styled_components_1.default.div `
    width: 16px;
    height: 16px;

    display: flex;
    align-items: center;
    justify-center: center;

    cursor: pointer;

    &:hover {
        opacity: 0.8;
    }
`;
const LayerDescription = styled_components_1.default.div `
    //styleName: title/h3 Inter SemiBold 16px;

    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 22px;
    letter-spacing: 0em;
    text-align: center;
    color: #272932;
`;
const LayerActions = styled_components_1.default.div `
    display: flex;
    flex-direction: row;

    padding: 8px 0 0;

    > * {
        width: 50%;
        margin: 8px 6px 0 !important;
    }
`;
const XListEntryRender = styled_components_1.default.div `
    display: flex;
    flex-direction: column;
`;
//# sourceMappingURL=ListEntryFormControl.js.map