"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.StoryView = exports.StoryViewNode = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const StoryData_1 = require("./StoryData");
const ExpandMore_1 = tslib_1.__importDefault(require("@mui/icons-material/ExpandMore"));
const ChevronRight_1 = tslib_1.__importDefault(require("@mui/icons-material/ChevronRight"));
const lab_1 = require("@mui/lab");
const material_1 = require("@mui/material");
const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
class StoryViewNode extends react_1.Component {
    constructor(props) {
        super(props);
    }
    render() {
        return ((0, jsx_runtime_1.jsx)(lab_1.TreeItem, { nodeId: this.props.node.id, label: this.props.node.name, children: this.props.node.subNodes.map((n) => {
                return new StoryViewNode({ node: n }).render();
            }) }, this.props.node.id));
    }
}
exports.StoryViewNode = StoryViewNode;
class StoryView extends react_1.Component {
    state = {
        currentNodeId: "",
    };
    componentDidMount() {
        let params = new URLSearchParams(window.location.search);
        let currentNodeId = params.get("currentNodeId") || "";
        this.setState({
            currentNodeId,
        });
    }
    render() {
        return ((0, jsx_runtime_1.jsxs)(material_1.Grid, { container: true, children: [(0, jsx_runtime_1.jsx)(material_1.Grid, { item: true, md: 4, children: (0, jsx_runtime_1.jsx)(TreeViewRender, { children: (0, jsx_runtime_1.jsx)(lab_1.TreeView, { "aria-label": "story node navigator", defaultCollapseIcon: (0, jsx_runtime_1.jsx)(ExpandMore_1.default, {}), defaultExpandIcon: (0, jsx_runtime_1.jsx)(ChevronRight_1.default, {}), sx: { height: 600, flexGrow: 1, maxWidth: 400, overflowY: "auto" }, onNodeSelect: (_e, ids) => {
                                let params = new URLSearchParams(window.location.search);
                                if (params.has("currentNodeId")) {
                                    params.delete("currentNodeId");
                                }
                                params.append("currentNodeId", ids);
                                // document.location.search = params.toString();
                                this.setState({ currentNodeId: ids });
                            }, children: this.props.node.subNodes.map((n) => {
                                return new StoryViewNode({ node: n }).render();
                            }) }) }) }), (0, jsx_runtime_1.jsx)(material_1.Grid, { item: true, md: 8, children: (0, jsx_runtime_1.jsx)(UIRender, { children: this.state.currentNodeId !== "" &&
                            StoryData_1.StoryData.getStoryNode(this.state.currentNodeId) &&
                            StoryData_1.StoryData.getStoryNode(this.state.currentNodeId).render() }) })] }));
    }
}
exports.StoryView = StoryView;
const TreeViewRender = styled_components_1.default.div `
    border-right: solid 1px rgba(64, 80, 166, 0.1);
    padding: 0 20px;
    overflow: auto;
`;
const UIRender = styled_components_1.default.div `
    padding: 20px;
    overflow: auto;
`;
//# sourceMappingURL=StoryView.js.map