import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Button, Checkbox, FormControlLabel, TextareaAutosize, Dialog, DialogContent, DialogContentText, DialogActions, } from "@material-ui/core";
import Alert from "@material-ui/lab/Alert";
import React from "react";
import styled from "styled-components";
const JSONWrapper = styled.div `
    flex: 1;
    display: flex;
    flex-flow: column;
`;
const TextAreaWrapper = styled.div `
    width: 100%;
    overflow: auto;
`;
export class XFormDataEditing extends React.Component {
    constructor(props) {
        super(props);
        this.onCloseParseJSONDialog = () => {
            this.setState({ parseJSONError: false });
        };
        this.onCloseLeavingDialog = () => {
            this.props.onNextMode(true);
        };
        this.state = {
            content: "",
            allowEdit: false,
            parseJSONError: false,
        };
    }
    componentDidMount() {
        let data = this.props.form.getStorageData();
        console.log(data);
        this.setState({
            content: JSON.stringify(data, null, 2),
        });
    }
    componentDidUpdate(prevProps) {
        const prevContent = JSON.stringify(prevProps.form.getStorageData(), null, 2);
        const currentContent = JSON.stringify(this.props.form.getStorageData(), null, 2);
        if (prevContent !== currentContent) {
            this.setState({
                content: currentContent,
            });
        }
    }
    handleChange(event) {
        this.setState({
            content: event.target.value,
        });
        const currentContent = JSON.stringify(this.props.form.getStorageData(), null, 2);
        this.props.onJSONUpdating(currentContent !== event.target.value);
    }
    onClickSave(_event) {
        this.props.onNextMode(false);
        try {
            const sasobj = JSON.parse(this.state.content);
            this.props.form.setStorageData({});
            this.props.form.setStorageData(sasobj);
            this.props.onJSONUpdating(false);
        }
        catch (e) {
            this.setState({
                parseJSONError: true,
            });
        }
    }
    onChangeAllow(event) {
        this.setState({
            allowEdit: event.target.checked,
        });
    }
    render() {
        return (_jsxs(JSONWrapper, { children: [_jsxs("div", { children: [_jsx(FormControlLabel, { control: _jsx(Checkbox, { name: "checkedC", checked: this.state.allowEdit, onChange: this.onChangeAllow.bind(this) }, void 0), label: "Allow Form Editing" }, void 0),
                        _jsx(Button, Object.assign({ variant: "contained", onClick: this.onClickSave.bind(this), disabled: !this.state.allowEdit }, { children: "Save Form Data" }), void 0)] }, void 0),
                _jsx("br", {}, void 0),
                _jsx(TextAreaWrapper, { children: _jsx(TextareaAutosize, { value: this.state.content, onChange: this.handleChange.bind(this), style: { width: "800px" }, readOnly: !this.state.allowEdit }, void 0) }, void 0),
                _jsxs(Dialog, Object.assign({ onClose: this.onCloseParseJSONDialog, "aria-labelledby": "confirmation-dialog", open: this.state.parseJSONError }, { children: [_jsx(Alert, Object.assign({ severity: "error" }, { children: "Error" }), void 0),
                        _jsx(DialogContent, { children: _jsx(DialogContentText, { children: "Your JSON is incorrect! Please check and try again." }, void 0) }, void 0),
                        _jsx(DialogActions, { children: _jsx(Button, Object.assign({ onClick: this.onCloseParseJSONDialog, color: "primary" }, { children: "Ok" }), void 0) }, void 0)] }), void 0),
                _jsxs(Dialog, Object.assign({ onClose: this.onCloseLeavingDialog, "aria-labelledby": "confirmation-dialog", open: this.props.isLeaving }, { children: [_jsx(Alert, Object.assign({ severity: "warning" }, { children: "Warning" }), void 0),
                        _jsx(DialogContent, { children: _jsx(DialogContentText, { children: "Your JSON is updated. Do you want to store it?" }, void 0) }, void 0),
                        _jsxs(DialogActions, { children: [_jsx(Button, Object.assign({ onClick: this.onClickSave.bind(this), color: "primary" }, { children: "Yes" }), void 0),
                                _jsx(Button, Object.assign({ onClick: this.onCloseLeavingDialog, color: "default" }, { children: "No" }), void 0)] }, void 0)] }), void 0)] }, void 0));
    }
}
//# sourceMappingURL=XFormDataEditing.js.map