import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React from "react";
import styled from "styled-components";
import { FormLabel, Input } from "@material-ui/core";
import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd";
import { BaseDataControl } from "./BaseDataControl";
import { StyledFormHelperText } from "./XCommonStyled";
import { StringDataDefinition } from "../../Common/Data/Definitions/StringDataDefinition";
import { StyledButton } from "../../CommonUI/Components/Button";
import { StyledToggleButtonGroup, StyledToggleButton } from "../../CommonUI/Components/ToggleButtonGroup";
import { EditGrayIcon } from "../../CommonUI/Icon/EditGrayIcon";
import { CloseRedIcon } from "../../CommonUI/Icon/CloseRedIcon";
import { ApplyIcon } from "../../CommonUI/Icon/ApplyIcon";
import { Layer } from "../../CommonUI/Components/Layer";
import { ObserveState } from "../../CommonUI/StateManagement/ObserveState";
import { StateManager } from "../../CommonUI/StateManagement/StateManager";
export var ListEntryType;
(function (ListEntryType) {
    ListEntryType["LIST"] = "LIST";
    ListEntryType["TEXT"] = "TEXT";
})(ListEntryType || (ListEntryType = {}));
class XListEntryUI extends React.Component {
    render() {
        return _jsx(_Fragment, { children: this.props.editMe.renderBaseDataControlEditor() }, void 0);
    }
}
export class XListEntry extends BaseDataControl {
    constructor() {
        super(...arguments);
        this.mode = ListEntryType.LIST;
    }
    render() {
        const issueData = this.getFormContext().getControlContext(this).getRuntimeIssueData();
        const issueText = (issueData === null || issueData === void 0 ? void 0 : issueData.text) || "";
        return (_jsxs(XListEntryRender, Object.assign({ "data-testid": this.valueName }, { children: [_jsx(StyledFormLabel, { children: this.label }, void 0),
                _jsx(ObserveState, { listenTo: this, properties: ["mode"], control: () => {
                        return (_jsxs(_Fragment, { children: [_jsxs(StyledToggleButtonGroup, Object.assign({ value: this.mode, color: "primary", onChange: (event, value) => {
                                        event.stopPropagation();
                                        this.mode = value;
                                        StateManager.propertyChanged(this, "mode");
                                    }, exclusive: true, style: { marginBottom: 10 } }, { children: [_jsx(StyledToggleButton, Object.assign({ value: ListEntryType.LIST, "data-testid": "list-mode" }, { children: ListEntryType.LIST }), void 0),
                                        _jsx(StyledToggleButton, Object.assign({ value: ListEntryType.TEXT, "data-testid": "text-mode" }, { children: ListEntryType.TEXT }), void 0)] }), void 0),
                                this.mode === ListEntryType.LIST ? (_jsx(TextList, { items: this.getItems(), updateCallback: (newItems) => {
                                        if (this.valueName) {
                                            this.setFormDataValue(this.valueName, newItems);
                                        }
                                    } }, void 0)) : (_jsx(MultilineText, { items: this.getItems(), updateCallback: (newItems) => {
                                        if (this.valueName) {
                                            this.setFormDataValue(this.valueName, newItems);
                                        }
                                    } }, void 0))] }, void 0));
                    } }, void 0),
                issueText && (_jsx(StyledFormHelperText, Object.assign({ error: Boolean(issueText) }, { children: issueText ? issueText : "" }), void 0))] }), void 0));
    }
    renderEditUI() {
        return _jsx(XListEntryUI, { editMe: this }, void 0);
    }
    getAddedData() {
        if (!this.valueName)
            return;
        let def = new StringDataDefinition();
        def.list = true;
        def.name = this.valueName;
        return def;
    }
    getItems() {
        if (this.valueName) {
            return this.getFormDataValue(this.valueName) || [];
        }
        return [];
    }
}
const MultilineText = (props) => {
    const [items, setItems] = React.useState(() => {
        if (props.items.length) {
            return props.items;
        }
        else
            return [""];
    });
    const [isEdit, setIsEdit] = React.useState(false);
    const [currentIdx, setCurrentIdx] = React.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 (_jsxs(_Fragment, { children: [_jsx(MultipleTextRender, Object.assign({ isEdit: isEdit, "data-testid": "text-mode-render" }, { children: items.map((item, idx) => (_jsxs(React.Fragment, { children: [_jsxs(IndexRender, { children: [idx + 1, "."] }, void 0),
                        _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}` }, void 0)] }, idx))) }), void 0),
            _jsx(StyledButton, Object.assign({ 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" }), void 0)] }, void 0));
};
const TextList = (props) => {
    const [items, setItems] = React.useState(props.items);
    const [newItems, setNewItems] = React.useState([]);
    const [currentIdx, setCurrentIdx] = React.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, provided) => {
        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 (_jsxs(_Fragment, { children: [_jsx(TextListRender, Object.assign({ onPaste: onPaste, "data-testid": "list-mode-render" }, { children: _jsx(DragDropContext, Object.assign({ onDragEnd: onDragEnd }, { children: _jsx(Droppable, Object.assign({ droppableId: "droppable" }, { children: (provided, snapshot) => (_jsx("div", Object.assign({}, provided.droppableProps, { ref: provided.innerRef }, { children: items.map((item, idx) => (_jsx(Draggable, Object.assign({ draggableId: `item_${idx}`, index: idx, isDragDisabled: idx === currentIdx }, { children: (provided, snapshot) => (_jsxs(TextListItem, Object.assign({ ref: provided.innerRef }, provided.draggableProps, provided.dragHandleProps, { children: [_jsxs(IndexRender, { children: [idx + 1, "."] }, void 0),
                                        _jsx(TextListItemInput, { isEdit: 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}` }, void 0),
                                        _jsx(ActionButton, Object.assign({ "data-testid": `listmode-editswitch-${idx}`, onClick: () => {
                                                if (idx === currentIdx) {
                                                    setCurrentIdx(-1);
                                                    props.updateCallback(items);
                                                }
                                                else {
                                                    setCurrentIdx(idx);
                                                }
                                            } }, { children: idx === currentIdx ? _jsx(ApplyIcon, {}, void 0) : _jsx(EditGrayIcon, {}, void 0) }), void 0),
                                        _jsx(ActionButton, Object.assign({ "data-testid": `listmode-delete-${idx}`, onClick: () => {
                                                const tempItems = [...items];
                                                tempItems.splice(idx, 1);
                                                setItems([...tempItems]);
                                                props.updateCallback([...tempItems]);
                                            } }, { children: _jsx(CloseRedIcon, {}, void 0) }), void 0)] }), void 0)) }), idx))) }), void 0)) }), void 0) }), void 0) }), void 0),
            _jsx(StyledButton, Object.assign({ color: "primary", variant: "outlined", style: { marginTop: 12 }, onClick: () => {
                    const tempItems = [...items, ""];
                    setItems([...tempItems]);
                    props.updateCallback([...tempItems]);
                } }, { children: "Add" }), void 0),
            _jsx(Layer, { open: newItems.length > 1, padding: "36px 32px 32px", renderUI: () => {
                    return (_jsxs(_Fragment, { children: [_jsx(LayerDescription, { children: "Insert data as one row or multiple rows?" }, void 0),
                            _jsxs(LayerActions, { children: [_jsx(StyledButton, Object.assign({ color: "primary", variant: "outlined", onClick: (event) => {
                                            setItems([...items, newItems.join("\n")]);
                                            props.updateCallback([...items, newItems.join("\n")]);
                                            setNewItems([]);
                                        } }, { children: "One" }), void 0),
                                    _jsx(StyledButton, Object.assign({ color: "primary", variant: "outlined", onClick: (event) => {
                                            setItems([...items, ...newItems]);
                                            props.updateCallback([...items, ...newItems]);
                                            setNewItems([]);
                                        } }, { children: "Multiple" }), void 0)] }, void 0)] }, void 0));
                }, showCloseButton: true, onClose: () => {
                    setNewItems([]);
                } }, void 0)] }, void 0));
};
const TextListRender = styled.div `
    display: flex;
    flex-direction: column;

    padding: 16px 8px;

    border: 1px solid transparent;

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

    padding: 0 2px;

    > * {
        margin: 0 2px !important;
    }
`;
const MultipleTextRender = styled.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.div `
    font-family: Inter;
    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 = styled(Input) `
    && {
        font-family: Inter;
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: 17px;
        letter-spacing: 0px;
        text-align: left;
        color: #272932;
        flex: 1;

        ${(props) => props.isEdit
    ? ``
    : `
                    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;

            ${(props) => props.isEdit
    ? `
                        background: #FCFCFE;
                        border: 1px solid rgba(39, 41, 50, 0.35);
                        border-radius: 4px;
                    `
    : ``}
        }
    }
`;
const MultilineTextItemInput = styled(Input) `
    && {
        font-family: Inter;
        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 = styled(FormLabel) `
    && {
        font-family: Inter;

        margin-bottom: 20px;
    }
`;
const ActionButton = styled.div `
    width: 16px;
    height: 16px;

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

    cursor: pointer;

    &:hover {
        opacity: 0.8;
    }
`;
const LayerDescription = styled.div `
    //styleName: title/h3 Inter SemiBold 16px;
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 22px;
    letter-spacing: 0em;
    text-align: center;
    color: #272932;
`;
const LayerActions = styled.div `
    display: flex;
    flex-direction: row;

    padding: 8px 0 0;

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