"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = tslib_1.__importDefault(require("react"));
const Alert_1 = tslib_1.__importDefault(require("@mui/material/Alert"));
const core_1 = require("@material-ui/core");
const FormTestData_1 = require("./Form/Testing/FormTestData");
const FormBuilder_1 = require("./Form/FormBuilder");
const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
const FormRuntime_1 = require("./Form/FormRuntime");
const FormConfiguration_1 = require("./Form/FormConfiguration");
const FlowBuilder_1 = require("./Flow/FlowBuilder");
const FlowConfiguration_1 = require("@appglue/common/dist/Flow/FlowConfiguration");
const ExpressionBuilder_1 = require("./Expressions/ExpressionBuilder");
const ExpressionConfiguration_1 = require("@appglue/common/dist/Expressions/ExpressionConfiguration");
const RuleTableBuilder_1 = require("./Rule/Table/RuleTable/RuleTableBuilder");
const ValueTableRuleBuilder_1 = require("./Rule/Table/ValueTable/ValueTableRuleBuilder");
const IntersectionRuleBuilder_1 = require("./Rule/Intersection/IntersectionRuleBuilder");
const AutoBind_1 = require("@appglue/common/dist/Common/AutoBind");
const NumberDataDefinition_1 = require("@appglue/common/dist/Common/Data/Definitions/NumberDataDefinition");
const DivideExpression_1 = require("@appglue/common/dist/Expressions/Expressions/Math/DivideExpression");
const IfThenExpression_1 = require("@appglue/common/dist/Expressions/Expressions/Logic/IfThenExpression");
const TreeRuleBuilder_1 = require("./Rule/Tree/TreeRuleBuilder");
const StatementRuleBuilder_1 = require("./Rule/Statement/StatementRuleBuilder");
const TextMergeConfiguration_1 = require("@appglue/common/dist/TextMerge/TextMergeConfiguration");
const TextMergeBuilder_1 = require("./TextMerge/TextMergeBuilder");
const MappingBuilder_1 = require("./Mapping/MappingBuilder");
const AddExpression_1 = require("@appglue/common/dist/Expressions/Expressions/Math/AddExpression");
const Menu_1 = require("./CommonUI/Menu");
const Menu_2 = require("./CommonUI/BuilderUI/Menu");
const Statement_1 = require("./CommonUI/Example/Rule/Statement");
const DataDefinition_1 = require("./CommonUI/Example/DataDefinition");
const Tree_1 = require("./CommonUI/Example/Rule/Tree");
const Intersection_1 = require("./CommonUI/Example/Rule/Intersection");
const ValueTable_1 = require("./CommonUI/Example/Rule/Table/ValueTable");
const RuleTable_1 = require("./CommonUI/Example/Rule/Table/RuleTable");
const Frame_1760_png_1 = tslib_1.__importDefault(require("./assets/images/Frame 1760.png"));
const WebForms_png_1 = tslib_1.__importDefault(require("./assets/images/Services/WebForms.png"));
const Form_builder_empty_png_1 = tslib_1.__importDefault(require("./assets/images/Services/Form_builder_empty.png"));
const form_empty_png_1 = tslib_1.__importDefault(require("./assets/images/Services/form_empty.png"));
const Flow_png_1 = tslib_1.__importDefault(require("./assets/images/Services/Flow.png"));
const TreeRule_png_1 = tslib_1.__importDefault(require("./assets/images/Services/TreeRule.png"));
const Tree_Rules_empty_png_1 = tslib_1.__importDefault(require("./assets/images/Services/Tree Rules_empty.png"));
const Value_table_png_1 = tslib_1.__importDefault(require("./assets/images/Services/Value_table.png"));
const Value_Table_empty_png_1 = tslib_1.__importDefault(require("./assets/images/Services/Value Table_empty.png"));
const Rule_table_png_1 = tslib_1.__importDefault(require("./assets/images/Services/Rule_table.png"));
const Rule_Table__empty_png_1 = tslib_1.__importDefault(require("./assets/images/Services/Rule Table_ empty.png"));
const IntersectionRule_png_1 = tslib_1.__importDefault(require("./assets/images/Services/IntersectionRule.png"));
const Statement_Rule_png_1 = tslib_1.__importDefault(require("./assets/images/Services/Statement Rule.png"));
const Statement_Rule_empty_png_1 = tslib_1.__importDefault(require("./assets/images/Services/Statement Rule_empty.png"));
const Intersection_Rules_empty_png_1 = tslib_1.__importDefault(require("./assets/images/Services/Intersection Rules_empty.png"));
const Expression_png_1 = tslib_1.__importDefault(require("./assets/images/Services/Expression.png"));
const Text_Merge_png_1 = tslib_1.__importDefault(require("./assets/images/Services/Text Merge.png"));
const Mapping_Builder_png_1 = tslib_1.__importDefault(require("./assets/images/Services/Mapping Builder.png"));
const CloseIcon_1 = require("./CommonUI/Icon/CloseIcon");
const FormBlueIcon_1 = require("./CommonUI/Icon/FormBlueIcon");
const StyledButton_1 = require("./CommonUI/BuildlingBlocks/StyledButton");
const Flow1Icon_1 = require("./CommonUI/Icon/Flow1Icon");
const RulesGreenIcon_1 = require("./CommonUI/Icon/RulesGreenIcon");
const ExpressionBlueIcon_1 = require("./CommonUI/Icon/ExpressionBlueIcon");
const OtherBuilderIcon_1 = require("./CommonUI/Icon/OtherBuilderIcon");
const ExecutionData_1 = require("@appglue/common/dist/Common/Data/ExecutionData/ExecutionData");
const Mapping_1 = require("./CommonUI/Example/Mapping");
require("./App.css");
const StoryView_1 = require("./CommonUI/StoryBook/StoryView");
const StoryData_1 = require("./CommonUI/StoryBook/StoryData");
const RegisterStories_1 = require("./CommonUI/StoryBook/RegisterStories");
const UIStyleConstants_1 = require("@appglue/common/dist/Common/UIStyleConstants");
const BooleanDataDefinition_1 = require("@appglue/common/dist/Common/Data/Definitions/BooleanDataDefinition");
const StringDataDefinition_1 = require("@appglue/common/dist/Common/Data/Definitions/StringDataDefinition");
class Notification {
    type = "error";
    message;
    onClose;
    constructor(message, type) {
        this.message = message;
        if (type) {
            this.type = type;
        }
    }
}
const TestHomeItemUI = (props) => {
    return ((0, jsx_runtime_1.jsxs)(TestHomeItemRender, { className: "TestHomeItem", children: [(0, jsx_runtime_1.jsx)(TestHomeItemImageWrapper, { className: "image-wrapper", children: props.item.img() }), (0, jsx_runtime_1.jsxs)(TestHomeItemActions, { children: [props.item.name, " ", (0, jsx_runtime_1.jsx)(StyledButton_1.StyledButton, { color: "primary", variant: "contained", onClick: () => {
                            (0, Menu_2.changePage)(props.category, props.item.name);
                        }, children: "Open" })] })] }));
};
const TestHomeSectionUI = (props) => {
    return ((0, jsx_runtime_1.jsxs)(TestHomeItemRender, { children: [(0, jsx_runtime_1.jsx)(TestHomeSectionHeader, { children: (0, jsx_runtime_1.jsx)(TestHomeSectionTitle, { children: props.category.name }) }), props.category.description && (0, jsx_runtime_1.jsx)(TestHomeDescription, { children: props.category.description }), (0, jsx_runtime_1.jsx)(TestHomeCategoryItemSection, { children: props.category.items.map((item, idx) => ((0, jsx_runtime_1.jsx)(TestHomeItemUI, { item: item, category: props.category.name }, idx))) })] }));
};
const TestHomeColumnUI = (props) => {
    return ((0, jsx_runtime_1.jsxs)(TestHomeColumn, { children: [props.menuColumn.description && ((0, jsx_runtime_1.jsx)(TestHomeColumnDescription, { color: props.menuColumn.color, children: props.menuColumn.description })), props.menuColumn.categories.map((item, idx) => item instanceof Menu_1.MenuItem ? ((0, jsx_runtime_1.jsx)(TestHomeItemUI, { item: item, category: props.menuColumn.name }, idx)) : ((0, jsx_runtime_1.jsx)(TestHomeSectionUI, { category: item }, idx)))] }));
};
class App extends react_1.default.Component {
    page;
    category = "Form Builder";
    filledFormConfig = (0, FormTestData_1.getFormConfig)();
    filledFormData = (0, FormTestData_1.getFormData)();
    formConfig = new FormConfiguration_1.FormConfiguration();
    formData = new ExecutionData_1.ExecutionData();
    menuItems = [];
    constructor(props) {
        super(props);
        this.state = {
            notification: undefined,
            page: undefined,
            category: "Form Builder",
        };
        this.registerMenuItems();
        (0, RegisterStories_1.RegisterStories)();
    }
    componentDidMount() {
        let params = new URLSearchParams(window.location.search);
        let page = params.get("page") || "";
        let category = params.get("category");
        this.page = page;
        this.category = category || "";
        this.setState({
            page,
            category: this.category,
        });
    }
    registerMenuItems() {
        // Form
        let menuColumn = new Menu_1.MenuColumn("Form", [
            new Menu_1.MenuItem("Form Builder (filled)", () => {
                this.filledFormConfig.inputData = (0, DataDefinition_1.getTestInputDataDefinition)();
                return ((0, jsx_runtime_1.jsx)(FormBuilder_1.FormBuilder, { form: this.filledFormConfig, formData: this.filledFormData, formName: "Test", onFormSave: this.onSave, onFormClose: this.goToHome }));
            }, () => (0, jsx_runtime_1.jsx)("img", { src: WebForms_png_1.default, alt: "Form Builder (filled)" })),
            new Menu_1.MenuItem("Form Builder", () => {
                this.formConfig.inputData = (0, DataDefinition_1.getTestInputDataDefinition)();
                return ((0, jsx_runtime_1.jsx)(FormBuilder_1.FormBuilder, { form: this.formConfig, formData: this.formData, formName: "Test", onFormSave: this.onSave, onFormClose: this.goToHome }));
            }, () => (0, jsx_runtime_1.jsx)("img", { src: Form_builder_empty_png_1.default, alt: "Form Builder" })),
            new Menu_1.MenuItem("Form", () => {
                let form = (0, FormTestData_1.getFormConfig)();
                form.inputData = (0, DataDefinition_1.getTestInputDataDefinition)();
                return ((0, jsx_runtime_1.jsx)(FormWrapper, { children: (0, jsx_runtime_1.jsx)(FormRuntime_1.FormRuntime, { form: (0, FormTestData_1.getFormConfig)() }) }));
            }, () => (0, jsx_runtime_1.jsx)("img", { src: form_empty_png_1.default, alt: "Form" })),
        ], UIStyleConstants_1.UIStyleConstants.BLUE_GRAY_COLOR, () => (0, jsx_runtime_1.jsx)(FormBlueIcon_1.FormBlueIcon, {}), "Build responsive forms intuitively with a toolkit of commonly used layouts and components like labels, text fields, checklists, toggle buttons, data grids, and much, much more. Design mobile-optimized forms with the same drag and drop capability, featuring the same robust toolkit as Web Forms.");
        this.menuItems.push(menuColumn);
        menuColumn = new Menu_1.MenuColumn("Flow", [
            new Menu_1.MenuItem("Flow", () => {
                let flow = new FlowConfiguration_1.FlowConfiguration();
                flow.inputData = (0, DataDefinition_1.getTestInputDataDefinition)();
                return ((0, jsx_runtime_1.jsx)(FlowBuilder_1.FlowBuilder, { flowName: "Empty Flow", flow: flow, onFlowCancel: this.goToHome, onFlowSave: this.onSave }));
            }, () => (0, jsx_runtime_1.jsx)("img", { src: Flow_png_1.default, alt: "Flow" })),
        ], "#F4955F", () => (0, jsx_runtime_1.jsx)(Flow1Icon_1.Flow1Icon, {}), "Link together steps in a 100% graphical environment to automate business processes. These steps leverage the assets created in other Builders such as Forms, Expressions, and Rules.");
        this.menuItems.push(menuColumn);
        menuColumn = new Menu_1.MenuColumn("Expression", [
            new Menu_1.MenuItem("Expression Builder (Filled - Math)", () => {
                let expression = new DivideExpression_1.DivideExpression();
                expression.divideValue.variableName = "vacationDaysUsed";
                let add = new AddExpression_1.AddExpression();
                add.value1.variableName = "vacationDaysUsed";
                add.value2.variableName = "vacationDaysRemaining";
                expression.divideBy.subExpression = add;
                let exp = new ExpressionConfiguration_1.ExpressionConfiguration();
                exp.expression = expression;
                exp.executionResult = new NumberDataDefinition_1.NumberDataDefinition();
                exp.inputData = (0, DataDefinition_1.getTestInputDataDefinition)();
                return (0, jsx_runtime_1.jsx)(ExpressionBuilder_1.ExpressionBuilder, { expression: exp });
            }, () => (0, jsx_runtime_1.jsx)("img", { src: Expression_png_1.default, alt: "Expression Builder (Filled - Math)" })),
            new Menu_1.MenuItem("Expression Builder (Filled - Logic)", () => {
                let exp1 = new ExpressionConfiguration_1.ExpressionConfiguration();
                exp1.executionResult = new NumberDataDefinition_1.NumberDataDefinition();
                let baseExpression = new IfThenExpression_1.IfThenExpression();
                baseExpression.ifThenStyle = IfThenExpression_1.IfThenStyle.BRANCH_DATA_RETURN;
                baseExpression.ifBranches[0].ifExpression.elements[0].variableName = "fullTime";
                baseExpression.ifBranches[0].thenExpression.value = 6000;
                let second = baseExpression.addIfBranch();
                second.ifExpression.elements[0].variableName = "isManager";
                second.thenExpression.value = 0;
                baseExpression.defaultOutput.value = 5000;
                exp1.expression = baseExpression;
                exp1.inputData = (0, DataDefinition_1.getTestInputDataDefinition)();
                return (0, jsx_runtime_1.jsx)(ExpressionBuilder_1.ExpressionBuilder, { expression: exp1 });
            }, () => (0, jsx_runtime_1.jsx)("img", { src: Expression_png_1.default, alt: "Expression Builder (Filled - Math)" })),
            new Menu_1.MenuItem("Expression Builder (Blank - Boolean)", () => {
                let exp1 = new ExpressionConfiguration_1.ExpressionConfiguration();
                exp1.executionResult = new BooleanDataDefinition_1.BooleanDataDefinition();
                exp1.inputData = (0, DataDefinition_1.getTestInputDataDefinition)();
                return (0, jsx_runtime_1.jsx)(ExpressionBuilder_1.ExpressionBuilder, { expression: exp1, openFirstTimeWhenEmptyExpression: false });
            }, () => (0, jsx_runtime_1.jsx)("img", { src: Expression_png_1.default, alt: "Expression Builder (Filled - Math)" })),
            new Menu_1.MenuItem("Expression Builder (Blank - Number)", () => {
                let exp1 = new ExpressionConfiguration_1.ExpressionConfiguration();
                exp1.executionResult = new NumberDataDefinition_1.NumberDataDefinition();
                exp1.inputData = (0, DataDefinition_1.getTestInputDataDefinition)();
                return (0, jsx_runtime_1.jsx)(ExpressionBuilder_1.ExpressionBuilder, { expression: exp1, openFirstTimeWhenEmptyExpression: false });
            }, () => (0, jsx_runtime_1.jsx)("img", { src: Expression_png_1.default, alt: "Expression Builder (Filled - Math)" })),
            new Menu_1.MenuItem("Expression Builder (Blank - String [choice])", () => {
                let exp1 = new ExpressionConfiguration_1.ExpressionConfiguration();
                let dd = new StringDataDefinition_1.StringDataDefinition();
                dd.validValues = ["Normal", "Rush", "Cancel"];
                exp1.executionResult = dd;
                exp1.inputData = (0, DataDefinition_1.getTestInputDataDefinition)();
                return (0, jsx_runtime_1.jsx)(ExpressionBuilder_1.ExpressionBuilder, { expression: exp1, openFirstTimeWhenEmptyExpression: false });
            }, () => (0, jsx_runtime_1.jsx)("img", { src: Expression_png_1.default, alt: "Expression Builder (Filled - Math)" })),
        ], UIStyleConstants_1.UIStyleConstants.BLUE_COLOR, () => (0, jsx_runtime_1.jsx)(ExpressionBlueIcon_1.ExpressionBlueIcon, {}), "Create complex logic by combining of formulas and logical elements, focusing on one piece at a time. Because statements can be combined, you are not limited to single expressions or value evaluation at any node.");
        this.menuItems.push(menuColumn);
        menuColumn = new Menu_1.MenuColumn("Rule", [
            new Menu_1.MenuCategory("Rule Table", [
                new Menu_1.MenuItem("Blank", () => {
                    return ((0, jsx_runtime_1.jsx)(RuleTableBuilder_1.RuleTableBuilder, { ruleDefinition: (0, RuleTable_1.getRuleTableEmpty)(), ruleTableName: "Rule Table", onRuleSave: this.onSave, onRuleCancel: this.goToHome }));
                }, () => (0, jsx_runtime_1.jsx)("img", { src: Rule_Table__empty_png_1.default, alt: "Blank" })),
                new Menu_1.MenuItem("Vacation Approval Policy", () => {
                    return ((0, jsx_runtime_1.jsx)(RuleTableBuilder_1.RuleTableBuilder, { ruleDefinition: (0, RuleTable_1.getRuleTableExample)(), ruleTableName: "Vacation Approval Policy", onRuleSave: this.onSave, onRuleCancel: this.goToHome }));
                }, () => (0, jsx_runtime_1.jsx)("img", { src: Rule_table_png_1.default, alt: "Vacation Approval Policy" })),
            ], "Leverage great flexibility in creating business logic through selected evaluators and conditions in each and every row with this tabular format."),
            new Menu_1.MenuCategory("Value Table", [
                new Menu_1.MenuItem("Blank", () => {
                    return ((0, jsx_runtime_1.jsx)(ValueTableRuleBuilder_1.ValueTableRuleBuilder, { ruleDefinition: (0, ValueTable_1.getValueTableEmpty)(), valueTableName: "Value Table Rule", onRuleSave: this.onSave, onRuleCancel: this.goToHome }));
                }, () => (0, jsx_runtime_1.jsx)("img", { src: Value_Table_empty_png_1.default, alt: "Blank" })),
                new Menu_1.MenuItem("Burnout Detection", () => {
                    return ((0, jsx_runtime_1.jsx)(ValueTableRuleBuilder_1.ValueTableRuleBuilder, { ruleDefinition: (0, ValueTable_1.getValueTableExample)(), valueTableName: "Burnout Detection", onRuleSave: this.onSave, onRuleCancel: this.goToHome }));
                }, () => (0, jsx_runtime_1.jsx)("img", { src: Value_table_png_1.default, alt: "Burnout Detection" })),
            ], "Visually configure a tabular-style rule that can handle 1000s of different combinations of variables in a succinct manner, with evaluators in the top row of each column."),
        ], UIStyleConstants_1.UIStyleConstants.GREEN_COLOR, () => (0, jsx_runtime_1.jsx)(RulesGreenIcon_1.RulesGreenIcon, {}), undefined);
        this.menuItems.push(menuColumn);
        menuColumn = new Menu_1.MenuColumn("Rule", [
            new Menu_1.MenuCategory("Intersection Rule", [
                new Menu_1.MenuItem("Blank", () => {
                    return ((0, jsx_runtime_1.jsx)(IntersectionRuleBuilder_1.IntersectionRuleBuilder, { ruleDefinition: (0, Intersection_1.getIntersectionRuleEmpty)(), intersectionRuleName: "Intersection Rule", onRuleSave: this.onSave, onRuleCancel: this.goToHome }));
                }, () => (0, jsx_runtime_1.jsx)("img", { src: Intersection_Rules_empty_png_1.default, alt: "Blank" })),
                new Menu_1.MenuItem("FMLA Pay Requirements", () => {
                    return ((0, jsx_runtime_1.jsx)(IntersectionRuleBuilder_1.IntersectionRuleBuilder, { ruleDefinition: (0, Intersection_1.getIntersectionRulExample)(), intersectionRuleName: "FMLA Pay Requirements", onRuleSave: this.onSave, onRuleCancel: this.goToHome }));
                }, () => (0, jsx_runtime_1.jsx)("img", { src: IntersectionRule_png_1.default, alt: "FMLA Pay Requirements" })),
            ], "Easily cross compare two sets of data to reach a desired result with this matrix-style rule."),
            new Menu_1.MenuCategory("Tree Rule", [
                new Menu_1.MenuItem("Blank", () => {
                    return ((0, jsx_runtime_1.jsx)(TreeRuleBuilder_1.TreeRuleBuilder, { ruleDefinition: (0, Tree_1.getTreeRuleEmpty)(), treeRuleName: "Tree Rule", onRuleSave: this.onSave, onRuleCancel: this.goToHome }));
                }, () => (0, jsx_runtime_1.jsx)("img", { src: Tree_Rules_empty_png_1.default, alt: "Blank" })),
                new Menu_1.MenuItem("Promotion Policy", () => {
                    return ((0, jsx_runtime_1.jsx)(TreeRuleBuilder_1.TreeRuleBuilder, { ruleDefinition: (0, Tree_1.getTreeRuleExample)(), treeRuleName: "Promotion Policy", onRuleSave: this.onSave, onRuleCancel: this.goToHome }));
                }, () => (0, jsx_runtime_1.jsx)("img", { src: TreeRule_png_1.default, alt: "Promotion Policy" })),
            ], "Combine the power of the Flow Builder with the Expression Builder to create rules that follow different paths, 100% graphically."),
            new Menu_1.MenuCategory("Statement Rule", [
                new Menu_1.MenuItem("Blank", () => {
                    const statementRule = (0, Statement_1.getStatementRuleEmpty)();
                    return ((0, jsx_runtime_1.jsx)(StatementRuleBuilder_1.StatementRuleBuilder, { ruleDefinition: statementRule, statementRuleName: "Statement Rule", onRuleSave: this.onSave, onRuleCancel: this.goToHome }));
                }, () => (0, jsx_runtime_1.jsx)("img", { src: Statement_Rule_empty_png_1.default, alt: "Blank" })),
                new Menu_1.MenuItem("Onboarding Validation", () => {
                    const statementRule = (0, Statement_1.getStatementRuleExample)();
                    return ((0, jsx_runtime_1.jsx)(StatementRuleBuilder_1.StatementRuleBuilder, { ruleDefinition: statementRule, statementRuleName: "Onboarding Validation", onRuleSave: this.onSave, onRuleCancel: this.goToHome }));
                }, () => (0, jsx_runtime_1.jsx)("img", { src: Statement_Rule_png_1.default, alt: "Onboarding Validation" })),
            ], "Create if/then rules that can be nested to run logic. Statement rules are foundation rules that are used by other composite rule builders."),
        ], UIStyleConstants_1.UIStyleConstants.GREEN_COLOR, () => (0, jsx_runtime_1.jsx)(RulesGreenIcon_1.RulesGreenIcon, {}), undefined);
        this.menuItems.push(menuColumn);
        menuColumn = new Menu_1.MenuColumn("Other", [
            new Menu_1.MenuItem("Text Merge Editor", () => {
                const definition = new TextMergeConfiguration_1.TextMergeConfiguration();
                definition.inputData = (0, DataDefinition_1.getTestInputDataDefinition)();
                definition.setValue({
                    blocks: [
                        {
                            key: "558fp",
                            text: "Welcome Mr.    to our   ",
                            type: "unstyled",
                            depth: 0,
                            inlineStyleRanges: [],
                            entityRanges: [
                                { offset: 12, length: 1, key: 0 },
                                { offset: 22, length: 1, key: 1 },
                            ],
                            data: {},
                        },
                    ],
                    entityMap: {
                        "0": {
                            type: "MERGE_TEXT_ENTITY_TYPE",
                            mutability: "IMMUTABLE",
                            data: {
                                fieldpath: "firstName",
                                entityKey: "c586d3e1-eee3-4772-b02a-74b46def7b40",
                                field: {
                                    type: "string",
                                    name: "firstName",
                                    list: false,
                                    valueIsDefault: false,
                                    validValues: [],
                                },
                            },
                        },
                        "1": {
                            type: "MERGE_TEXT_ENTITY_TYPE",
                            mutability: "IMMUTABLE",
                            data: {
                                fieldpath: "position",
                                entityKey: "47cfe8f6-b103-4927-8e26-96367e1ded1e",
                                field: {
                                    type: "string",
                                    name: "position",
                                    list: false,
                                    valueIsDefault: false,
                                    validValues: [],
                                },
                            },
                        },
                    },
                });
                return ((0, jsx_runtime_1.jsx)(TextMergeBuilder_1.TextMergeBuilder, { definition: definition, textMergeName: "Merge Editor", onSave: this.onSave, onCancel: this.goToHome }));
            }, () => (0, jsx_runtime_1.jsx)("img", { src: Text_Merge_png_1.default, alt: "Text Merge Editor" })),
            new Menu_1.MenuItem("Mapping Editor", () => {
                return ((0, jsx_runtime_1.jsx)(MappingBuilder_1.MappingBuilder, { definition: (0, Mapping_1.getMappingEmpty)(), onSave: this.onSave, onCancel: this.goToHome }));
            }, () => (0, jsx_runtime_1.jsx)("img", { src: Mapping_Builder_png_1.default, alt: "Mapping Editor" })),
            new Menu_1.MenuItem("UI Examples", () => {
                return (0, jsx_runtime_1.jsx)(StoryView_1.StoryView, { node: StoryData_1.StoryData.rootNode });
            }, () => (0, jsx_runtime_1.jsx)("img", { src: Mapping_Builder_png_1.default, alt: "Mapping Editor" })),
        ], "#918470", () => (0, jsx_runtime_1.jsx)(OtherBuilderIcon_1.OtherBuilderIcon, {}));
        this.menuItems.push(menuColumn);
    }
    goToHome() {
        window.location.href = "/";
    }
    onSave() {
        let nof = new Notification("The AppGlue test app does not save data changes.  Your application can implement its own storage for builder configuration data.");
        nof.onClose = () => {
            this.setState({
                notification: undefined,
            });
        };
        this.setState({
            notification: nof,
        });
    }
    getPage() {
        return this.page;
    }
    getCategory() {
        return this.category;
    }
    render() {
        return ((0, jsx_runtime_1.jsxs)(TestAppRender, { children: [(0, jsx_runtime_1.jsx)(Menu_2.Menu, { items: this.menuItems }), (0, jsx_runtime_1.jsx)(core_1.Collapse, { in: !!this.state.notification, children: (0, jsx_runtime_1.jsx)(Alert_1.default, { severity: this.state.notification?.type, action: this.state.notification?.onClose ? ((0, jsx_runtime_1.jsx)(core_1.IconButton, { "aria-label": "close", color: "inherit", size: "small", onClick: () => {
                                if (this.state.notification?.onClose) {
                                    this.state.notification.onClose();
                                }
                            }, children: (0, jsx_runtime_1.jsx)(CloseIcon_1.CloseIcon, {}) })) : undefined, children: this.state.notification?.message }) }), (0, jsx_runtime_1.jsx)(Wrapper, { children: this.RenderBuilder() })] }));
    }
    renderHomePage() {
        let titles = [];
        let i = 0;
        while (i < this.menuItems.length) {
            let menuColumn = this.menuItems[i];
            let columnsSpan = this.menuItems.filter((m) => m.name === menuColumn.name).length;
            i += columnsSpan;
            titles.push((0, jsx_runtime_1.jsxs)(TestHomeColumnTitle, { color: menuColumn.color, columnSpan: columnsSpan, children: [menuColumn.icon(), " ", menuColumn.name] }));
        }
        return ((0, jsx_runtime_1.jsxs)(HomepageWrapper, { children: [(0, jsx_runtime_1.jsxs)(HompageBanner, { children: [(0, jsx_runtime_1.jsx)(core_1.Typography, { variant: "h1", children: "AppGlue Builder Test App" }), (0, jsx_runtime_1.jsx)(core_1.Typography, { children: "Click open to explore each of the AppGlue Builders" })] }), (0, jsx_runtime_1.jsx)(HomepageMainContent, { children: (0, jsx_runtime_1.jsxs)(TestHomeRender, { columnsCount: this.menuItems.length, children: [(0, jsx_runtime_1.jsx)(EmptyColumn, {}), titles, (0, jsx_runtime_1.jsx)(EmptyColumn, {}), (0, jsx_runtime_1.jsx)(EmptyColumn, {}), this.menuItems.map((menuColumn, idx) => ((0, jsx_runtime_1.jsx)(TestHomeColumnUI, { menuColumn: menuColumn }, idx))), (0, jsx_runtime_1.jsx)(EmptyColumn, {})] }) })] }));
    }
    RenderBuilder() {
        let category = this.getCategory();
        // homepage
        if (category === "" && this.getPage() === "") {
            return this.renderHomePage();
        }
        for (let col of this.menuItems) {
            for (let cat of col.categories) {
                if (cat instanceof Menu_1.MenuCategory) {
                    for (let page of cat.items) {
                        if (cat.name === category && page.name === this.getPage()) {
                            return page.ui ? page.ui() : null;
                        }
                    }
                }
                else {
                    if (col.name === category && cat.name === this.getPage()) {
                        return cat.ui ? cat.ui() : null;
                    }
                }
            }
        }
        return null;
    }
}
tslib_1.__decorate([
    AutoBind_1.AutoBind
], App.prototype, "registerMenuItems", null);
tslib_1.__decorate([
    AutoBind_1.AutoBind
], App.prototype, "onSave", null);
tslib_1.__decorate([
    AutoBind_1.AutoBind
], App.prototype, "renderHomePage", null);
tslib_1.__decorate([
    AutoBind_1.AutoBind
], App.prototype, "RenderBuilder", null);
exports.default = App;
const Wrapper = styled_components_1.default.div `
    flex: 1;
    flex-flow: column;
    display: flex;

    overflow: auto;
`;
const FormWrapper = styled_components_1.default.div `
    border-width: 50px;
    height: 100vh;
    width: 50vw;
    flex-flow: column;
    display: flex;
`;
const HomepageWrapper = styled_components_1.default.div `
    background: whitesmoke;

    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
`;
const HompageBanner = styled_components_1.default.div `
    background: url("${Frame_1760_png_1.default}");

    padding: 48px 32px;

    background-position: top right;
    background-size: auto 143px;
    background-repeat: no-repeat;

    .MuiTypography-root {
        &.MuiTypography-h1 {
            //styleName: title/h0 Inter ExtraBold 40px;

            font-size: 40px;
            font-style: normal;
            font-weight: 800;
            line-height: 48px;
            letter-spacing: 0em;
            text-align: left;

            margin-bottom: 4px;
            color: #272932;
        }

        &.MuiTypography-body1 {
            //styleName: title/h3 Inter SemiBold 16px;

            font-size: 16px;
            font-style: normal;
            font-weight: 600;
            line-height: 22px;
            letter-spacing: 0em;
            text-align: left;
            color: #4050a6;
        }
    }
`;
const HomepageMainContent = styled_components_1.default.div `
    overflow: auto;
`;
const TestHomeColumn = styled_components_1.default.div `
    width: 326px;

    display: flex;
    flex-direction: column;

    > div {
        margin-bottom: 8px;
    }
`;
const TestHomeColumnTitle = styled_components_1.default.div `
    grid-column: span ${(props) => props.columnSpan};

    border-bottom: solid 3px ${(props) => props.color};

    //styleName: title/h3 Inter SemiBold 16px;

    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 22px;
    letter-spacing: 0em;
    text-align: left;

    color: ${(props) => props.color};

    display: flex;
    align-items: center;

    padding: 8px 0;

    & > *:first-child {
        margin-right: 12px;
    }
`;
const TestHomeColumnDescription = styled_components_1.default.div `
    padding: 12px;
    //styleName: buttons / Inter Medium 12px;

    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 17px;
    letter-spacing: 0em;
    text-align: left;
    color: rgba(39, 41, 50, 0.8);

    position: relative;

    border-radius: 8px;

    overflow: hidden;

    &::before {
        content: "";
        display: block;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;

        background: ${(props) => props.color};
        opacity: 0.1;
    }
`;
const TestHomeItemRender = styled_components_1.default.div `
  border: 1px solid #f1f1f6;
  border-radius: 8px;
  background: ${UIStyleConstants_1.UIStyleConstants.WHITE_COLOR};
  width: 100%;
  padding: 20px;

    display: flex;
    flex-direction: column;
`;
const TestHomeItemImageWrapper = styled_components_1.default.div `
    position: relative;
    padding-top: 202px;
    overflow: hidden;

    margin-bottom: 16px;

    img {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 100%;
        transform: translateX(-50%) translateY(-50%);
    }
`;
const TestHomeItemActions = styled_components_1.default.div `
    display: flex;
    flex-direction: row;
    justify-content: space-between;

    //styleName: title/h3 Inter SemiBold 16px;

    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 22px;
    letter-spacing: 0em;
    text-align: left;

    color: #272932;
    align-items: center;
`;
const TestHomeRender = styled_components_1.default.div `
    display: grid;
    grid-template-columns: repeat(${(props) => props.columnsCount + 2}, max-content);

    margin-bottom: 40px;

    column-gap: 20px;

    row-gap: 8px;
`;
const TestHomeSectionHeader = styled_components_1.default.div `
    display: flex;
    flex-direction: column;
`;
const TestHomeSectionTitle = (0, styled_components_1.default)(core_1.Typography) `
    && {
        //styleName: title/h2 Inter Bold 24px;

        font-size: 24px;
        font-style: normal;
        font-weight: 700;
        line-height: 29px;
        letter-spacing: 0em;
        text-align: left;

        color: #272932;

        margin-bottom: 8px;
    }
`;
const TestHomeDescription = (0, styled_components_1.default)(core_1.Typography) `
    && {
        //styleName: text/Inter Regular 12px;

        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: 17px;
        letter-spacing: 0px;
        text-align: left;
        color: #606881;

        margin-bottom: 20px;
    }
`;
const EmptyColumn = styled_components_1.default.div `
    width: 12px;
`;
const TestHomeCategoryItemSection = styled_components_1.default.div `
    display: flex;
    flex-direction: column;

    padding-left: 16px;
    border-left: solid 4px rgba(96, 104, 129, 0.15);

    .image-wrapper {
        padding-top: 163px;
    }

    .TestHomeItem {
        margin-top: 8px;

        &:first-child {
            margin-top: 0px;
        }
    }
`;
const TestAppRender = styled_components_1.default.div `
    height: 100vh;

    display: flex;
    flex-direction: column;
    overflow: hidden;
`;
//# sourceMappingURL=App.js.map