import { __decorate, __metadata } from "tslib";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React from "react";
import { getFormConfig, getFormData } from "./Form/Testing/FormTestData";
import { XFormDesigner } from "./Form/XFormDesigner";
import styled from "styled-components";
import { XUserForm } from "./Form/XUserForm";
import { XFormConfiguration } from "./Form/XFormConfiguration";
import { UserFormData } from "./Form/UserFormData";
import { XFlowEditor } from "./Flow/XFlowEditor";
import { XFlowConfiguration } from "./Flow/Structure/XFlowConfiguration";
import { XExpressionEditor } from "./Expressions/XExpressionEditor";
import { XExpressionDefinition } from "./Expressions/XExpressionDefinition";
import { DropdownMenu } from "./CommonUI/Components/DropdownMenu";
import { XDataDefinition } from "./Common/Data/XDataDefinition";
import { XRuleTableEditor } from "./Rule/Table/RuleTable/RuleTableEditor";
import { RuleTableDefinition } from "./Rule/Table/RuleTable/Structure/RuleTableDefinition";
import { XValueTableRuleEditor } from "./Rule/Table/ValueTable/ValueTableRuleEditor";
import { ValueTableDefinition } from "./Rule/Table/ValueTable/ValueTableDefinition";
import { IntersectionRuleDefinition } from "./Rule/Intersection/IntersectionRuleDefinition";
import { XIntersectionRuleEditor } from "./Rule/Intersection/IntersectionRuleEditor";
import { WhiteLogoIcon } from "./CommonUI/Icon/WhiteLogoIcon";
import { UIConstant } from "./CommonUI/BuildUI/UIConstant";
import { AutoBind } from "./Common/AutoBind";
import { WhiteStyledButton } from "./CommonUI/BuildUI/Button";
import { NumberDataDefinition } from "./Common/Data/Definitions/NumberDataDefinition";
import { DivideExpression } from "./Expressions/ExpressionElements/Math/DivideExpression";
import { IfThenExpression, IfThenStyle } from "./Expressions/ExpressionElements/Logic/IfThenExpression";
import { TreeRuleDefinition } from "./Rule/Tree/Structure/TreeRuleDefinition";
import { XTreeRuleEditor } from "./Rule/Tree/TreeRuleEditor";
import { StatementRuleDefinition } from "./Rule/Statement/StatementRuleDefinition";
import { XStatementRuleEditor } from "./Rule/Statement/StatementRuleEditor";
import "./App.css";
import { XTextMergeDefinition } from "./CommonUI/TextMerge/XTextMergeDefinition";
import { XTextMergeBuilder } from "./CommonUI/TextMerge/XTextMergeBuilder";
import { XMappingDefinition } from "./CommonUI/Mapping/XMappingDefinition";
import { XMappingEditor } from "./CommonUI/Mapping/XMappingEditor";
import { StringDataDefinition } from "./Common/Data/Definitions/StringDataDefinition";
import { DateDataDefinition } from "./Common/Data/Definitions/DateDataDefinition";
import { BooleanDataDefinition } from "./Common/Data/Definitions/BooleanDataDefinition";
import { TextMergeConstants } from "./CommonUI/TextMerge/TextMergeConstants";
import { StringEqualExpression } from "./Expressions/ExpressionElements/String/StringEqualExpression";
import { AddExpression } from "./Expressions/ExpressionElements/Math/AddExpression";
import { ObjectDataDefinition } from "./Common/Data/Definitions/ObjectDataDefinition";
const getTestInputDataDefinition = () => {
    let data = new XDataDefinition();
    data.fields.push(new StringDataDefinition("employeeID"));
    data.fields.push(new StringDataDefinition("firstName"));
    data.fields.push(new StringDataDefinition("lastName"));
    data.fields.push(new StringDataDefinition("socialSecurityNumber"));
    let obj = new ObjectDataDefinition("homeAddress");
    obj.fields.push(new StringDataDefinition("streetAddress"));
    obj.fields.push(new StringDataDefinition("city"));
    obj.fields.push(new StringDataDefinition("state"));
    obj.fields.push(new StringDataDefinition("zipCode"));
    obj.fields.push(new StringDataDefinition("country"));
    data.fields.push(obj);
    data.fields.push(new StringDataDefinition("emailAddress"));
    data.fields.push(new StringDataDefinition("phoneNumber"));
    data.fields.push(new DateDataDefinition("dateOfBirth"));
    data.fields.push(new DateDataDefinition("dateOfHire"));
    data.fields.push(new DateDataDefinition("dateOfTermination"));
    data.fields.push(new StringDataDefinition("position"));
    data.fields.push(new StringDataDefinition("salaryBand"));
    data.fields.push(new StringDataDefinition("department"));
    data.fields.push(new StringDataDefinition("managerID"));
    data.fields.push(new BooleanDataDefinition("fullTime"));
    data.fields.push(new StringDataDefinition("benefitsID"));
    data.fields.push(new BooleanDataDefinition("exempt"));
    obj = new ObjectDataDefinition("disciplinaryActionsHistory");
    obj.list = true;
    obj.fields.push(new StringDataDefinition("description"));
    obj.fields.push(new StringDataDefinition("currentManagerID"));
    obj.fields.push(new StringDataDefinition("actionTaken"));
    obj.fields.push(new DateDataDefinition("dateOfIncident"));
    data.fields.push(obj);
    data.fields.push(new NumberDataDefinition("vacationDaysUsed"));
    data.fields.push(new NumberDataDefinition("sickDaysUsed"));
    data.fields.push(new NumberDataDefinition("vacationDaysRemaining"));
    data.fields.push(new NumberDataDefinition("sickDaysRemaining"));
    data.fields.push(new StringDataDefinition("emergencyContactName"));
    data.fields.push(new StringDataDefinition("emergencyContactPhoneNumber"));
    data.fields.push(new StringDataDefinition("emergencyContactRelationship"));
    data.fields.push(new BooleanDataDefinition("onboarded"));
    obj = new ObjectDataDefinition("promotionHistory");
    obj.list = true;
    obj.fields.push(new StringDataDefinition("position"));
    obj.fields.push(new DateDataDefinition("dateOfPromotion"));
    obj.fields.push(new StringDataDefinition("comments"));
    obj.fields.push(new NumberDataDefinition("salary"));
    data.fields.push(obj);
    data.fields.push(new BooleanDataDefinition("isManager"));
    let field = new StringDataDefinition("directReportsID");
    field.list = true;
    data.fields.push(field);
    data.fields.push(new StringDataDefinition("officeLocationID"));
    data.fields.push(new StringDataDefinition("deskID"));
    return data;
};
class App extends React.Component {
    constructor(props) {
        super(props);
        this.page = "Form Builder";
        this.category = "Form";
        this.filledFormConfig = getFormConfig();
        this.filledFormData = getFormData();
        this.formConfig = new XFormConfiguration();
        this.formData = new UserFormData();
        this.menuItems = [];
        this.state = { page: "Form Builder", category: "Form" };
        this.registerMenuItems();
    }
    componentDidMount() {
        let params = new URLSearchParams(window.location.search);
        let page = params.get("page") || undefined;
        let category = params.get("category");
        // set default
        if (!page && !category) {
            category = "Form";
            page = "Form Builder";
        }
        this.page = page;
        this.category = category || "";
        this.setState({
            page,
            category: this.category,
        });
    }
    registerMenuItems() {
        // Form
        this.menuItems.push({
            name: "Form",
            subItems: [
                {
                    name: "Form Builder (filled)",
                    ui: () => {
                        this.filledFormConfig.inputData = getTestInputDataDefinition();
                        return (_jsx(XFormDesigner, { form: this.filledFormConfig, formData: this.filledFormData, formName: "Test", onFormSave: () => { }, onFormClose: () => { } }, void 0));
                    },
                },
                {
                    name: "Form Builder",
                    ui: () => {
                        this.formConfig.inputData = getTestInputDataDefinition();
                        return (_jsx(XFormDesigner, { form: this.formConfig, formData: this.formData, formName: "Test", onFormSave: () => { }, onFormClose: () => { } }, void 0));
                    },
                },
                {
                    name: "Form",
                    ui: () => {
                        let form = getFormConfig();
                        form.inputData = getTestInputDataDefinition();
                        return (_jsx(FormWrapper, { children: _jsx(XUserForm, { form: getFormConfig() }, void 0) }, void 0));
                    },
                },
            ],
        });
        // Flow
        this.menuItems.push({
            name: "Flow",
            ui: () => {
                let flow = new XFlowConfiguration();
                flow.inputData = getTestInputDataDefinition();
                return _jsx(XFlowEditor, { flow: flow }, void 0);
            },
        });
        this.menuItems.push({
            name: "Expression",
            subItems: [
                {
                    name: "Expression Builder (Filled - Math)",
                    ui: () => {
                        let expression = new DivideExpression();
                        expression.divideValue.variableName = "vacationDaysUsed";
                        let add = new AddExpression();
                        add.value1.variableName = "vacationDaysUsed";
                        add.value2.variableName = "vacationDaysRemaining";
                        expression.divideBy.subExpression = add;
                        let exp = new XExpressionDefinition();
                        exp.expression = expression;
                        exp.executionResult = new NumberDataDefinition();
                        exp.inputData = getTestInputDataDefinition();
                        return _jsx(XExpressionEditor, { expression: exp }, void 0);
                    },
                },
                {
                    name: "Expression Builder (Filled - Logic)",
                    ui: () => {
                        let exp1 = new XExpressionDefinition();
                        exp1.executionResult = new NumberDataDefinition();
                        let baseExpression = new IfThenExpression();
                        baseExpression.ifThenStyle = 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 = getTestInputDataDefinition();
                        return _jsx(XExpressionEditor, { expression: exp1 }, void 0);
                    },
                },
            ],
        });
        this.menuItems.push({
            name: "Rule",
            subItems: [
                {
                    name: "Rule Table",
                    ui: () => {
                        const ruleDefinition = new RuleTableDefinition();
                        ruleDefinition.inputData = getTestInputDataDefinition();
                        ruleDefinition.executionResult = new XDataDefinition();
                        let exp = new XExpressionDefinition();
                        let expression = new StringEqualExpression();
                        expression.value1.variableName = "firstName";
                        expression.value2.value = "Jose";
                        exp.expression = expression;
                        ruleDefinition.rows[0].cells[0].expression = exp;
                        ruleDefinition.setRuleColumn(ruleDefinition.ruleColumns[0], "firstName");
                        ruleDefinition.setResultColumnType(ruleDefinition.resultColumns[0], new NumberDataDefinition("hourlyRate"));
                        ruleDefinition.rows[0].resultCells[0].value = 22.5;
                        ruleDefinition.defaultResult[ruleDefinition.resultColumns[0]._id].value = 22.5;
                        return _jsx(XRuleTableEditor, { ruleDefinition: ruleDefinition, title: "Rule Table" }, void 0);
                    },
                },
                {
                    name: "Value Table",
                    ui: () => {
                        const valueRuleDefinition = new ValueTableDefinition();
                        valueRuleDefinition.inputData = getTestInputDataDefinition();
                        valueRuleDefinition.executionResult = new XDataDefinition();
                        let exp = new XExpressionDefinition();
                        let expression = new StringEqualExpression();
                        expression.value1.variableName = "cellValue";
                        expression.value2.value = "Jose";
                        exp.expression = expression;
                        valueRuleDefinition.columns[0].expression = exp;
                        valueRuleDefinition.rows[0].cells[0].values = "Jose";
                        valueRuleDefinition.rows[0].resultCells[0].value = 22.5;
                        valueRuleDefinition.getDefaultResultByOrder(0).value = 22.5;
                        valueRuleDefinition.setResultColumnType(valueRuleDefinition.resultColumns[0], new NumberDataDefinition("hourlyRate"));
                        valueRuleDefinition.syncAllRows();
                        return _jsx(XValueTableRuleEditor, { ruleDefinition: valueRuleDefinition, title: "Value Table Rule" }, void 0);
                    },
                },
                {
                    name: "Intersection Table",
                    ui: () => {
                        const intersectionRule = new IntersectionRuleDefinition();
                        intersectionRule.inputData = getTestInputDataDefinition();
                        intersectionRule.xaxisExpressions[0].variableName = "isManager";
                        intersectionRule.yaxisExpressions[0].variableName = "fullTime";
                        intersectionRule.setTypeResults(new NumberDataDefinition());
                        intersectionRule.results[0].setValue(6000);
                        return _jsx(XIntersectionRuleEditor, { ruleDefinition: intersectionRule, title: "Intersection Rule" }, void 0);
                    },
                },
                {
                    name: "Tree Rule",
                    ui: () => {
                        const treeRule = new TreeRuleDefinition();
                        treeRule.inputData = getTestInputDataDefinition();
                        treeRule.executionResult = new NumberDataDefinition();
                        treeRule.root.setupEvaluation(treeRule.getInputDefinition());
                        treeRule.root.expression.variableName = "isManager";
                        treeRule.root.trueNode.setupResult(treeRule.getInputDefinition(), treeRule.getRuleResult());
                        treeRule.root.trueNode.expression.value = 6000;
                        treeRule.root.falseNode.setupResult(treeRule.getInputDefinition(), treeRule.getRuleResult());
                        treeRule.root.falseNode.expression.value = 3000;
                        return _jsx(XTreeRuleEditor, { ruleDefinition: treeRule, title: "Tree Rule" }, void 0);
                    },
                },
                {
                    name: "Statement Rule",
                    ui: () => {
                        const statementRule = new StatementRuleDefinition();
                        let exp1 = new XExpressionDefinition();
                        let baseExpression = new IfThenExpression();
                        baseExpression.ifThenStyle = 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;
                        statementRule.inputData = getTestInputDataDefinition();
                        exp1.inputData = getTestInputDataDefinition();
                        statementRule.expression = exp1;
                        statementRule.executionResult = new NumberDataDefinition();
                        return _jsx(XStatementRuleEditor, { ruleDefinition: statementRule, title: "Statement Rule" }, void 0);
                    },
                },
            ],
        });
        this.menuItems.push({
            name: "Other",
            subItems: [
                {
                    name: "Text Merge Editor",
                    ui: () => {
                        const definition = new XTextMergeDefinition();
                        definition.inputData = getTestInputDataDefinition();
                        definition.value = {
                            blocks: [
                                {
                                    key: "558fp",
                                    text: "Welcome   to our   ",
                                    type: "unstyled",
                                    depth: 0,
                                    inlineStyleRanges: [],
                                    entityRanges: [
                                        { offset: 8, length: 1, key: 0 },
                                        { offset: 17, length: 1, key: 1 },
                                    ],
                                    data: {},
                                },
                            ],
                            entityMap: {
                                "0": {
                                    type: TextMergeConstants.MERGE_TEXT_ENTITY_TYPE,
                                    mutability: "IMMUTABLE",
                                    data: {
                                        fieldpath: "name",
                                        entityKey: "65731d0d-5a22-4608-8480-40c9f7a82d35",
                                        field: {
                                            type: "string",
                                            name: "name",
                                            list: false,
                                            valueIsDefault: false,
                                            validValues: [],
                                        },
                                    },
                                },
                                "1": {
                                    type: TextMergeConstants.MERGE_TEXT_ENTITY_TYPE,
                                    mutability: "IMMUTABLE",
                                    data: {
                                        fieldpath: "jobTitle",
                                        entityKey: "8b72cd59-d0c6-4fd2-905a-8c024165ed5a",
                                        field: {
                                            type: "string",
                                            name: "jobTitle",
                                            list: false,
                                            valueIsDefault: false,
                                            validValues: [],
                                        },
                                    },
                                },
                            },
                        };
                        return (_jsx(XTextMergeBuilder, { definition: definition, title: "Merge Editor", onSave: () => { }, onCancel: () => { } }, void 0));
                    },
                },
                {
                    name: "Mapping Editor",
                    ui: () => {
                        const mappingDef = new XMappingDefinition();
                        mappingDef.inputData = getTestInputDataDefinition();
                        return _jsx(XMappingEditor, { definition: mappingDef }, void 0);
                    },
                },
            ],
        });
    }
    changePage(category, page) {
        let querys = [`category=${category}`];
        if (page) {
            querys.push(`page=${page}`);
        }
        window.location.assign(`?${querys.join("&")}`);
    }
    getPage() {
        return this.page;
    }
    getCategory() {
        return this.category;
    }
    renderNavItem(isClickable, category, page) {
        return (_jsx(StyledNavItem, Object.assign({ selected: this.getPage() === page && this.getCategory() === category, onClick: isClickable
                ? () => {
                    this.changePage(category, page);
                }
                : undefined }, { children: page || category }), void 0));
    }
    render() {
        return (_jsxs("div", { children: [_jsxs(NavigationWrapper, { children: [_jsx(Logo, { children: _jsx(WhiteLogoIcon, {}, void 0) }, void 0),
                        this.menuItems.map((menuItem) => {
                            if (menuItem.subItems) {
                                return (_jsx(DropdownMenu, { title: menuItem.name, items: menuItem.subItems.map((item) => ({
                                        renderUI: () => this.renderNavItem(!!item.ui, menuItem.name, item.name),
                                    })) }, menuItem.name));
                            }
                            return (_jsx(WhiteStyledButton, Object.assign({ onClick: !!menuItem.ui ? () => this.changePage(menuItem.name) : undefined }, { children: menuItem.name }), menuItem.name));
                        }),
                        _jsx(ContactUsButton, { children: "Contact Us" }, void 0)] }, void 0),
                _jsx(Wrapper, { children: this.RenderBuilder() }, void 0)] }, void 0));
    }
    RenderBuilder() {
        let categoryItem = this.menuItems.find((menuItem) => menuItem.name === this.getCategory());
        if (!categoryItem)
            return null;
        if (!categoryItem.subItems) {
            if (!categoryItem.ui)
                return null;
            return categoryItem.ui();
        }
        let pageItem = categoryItem.subItems.find((pageItem) => pageItem.name === this.getPage());
        if (pageItem === null || pageItem === void 0 ? void 0 : pageItem.ui)
            return pageItem.ui();
        return null;
    }
}
__decorate([
    AutoBind,
    __metadata("design:type", Function),
    __metadata("design:paramtypes", []),
    __metadata("design:returntype", void 0)
], App.prototype, "registerMenuItems", null);
__decorate([
    AutoBind,
    __metadata("design:type", Function),
    __metadata("design:paramtypes", [Boolean, String, String]),
    __metadata("design:returntype", void 0)
], App.prototype, "renderNavItem", null);
__decorate([
    AutoBind,
    __metadata("design:type", Function),
    __metadata("design:paramtypes", []),
    __metadata("design:returntype", void 0)
], App.prototype, "RenderBuilder", null);
export default App;
const Wrapper = styled.div `
    height: 100vh;
    flex-flow: column;
    display: flex;
`;
const FormWrapper = styled.div `
    border-width: 50px;
    height: 100vh;
    width: 50vw;
    flex-flow: column;
    display: flex;
`;
const NavigationWrapper = styled.div `
    display: flex;
    background: #434d6b;
    padding: 4px 16px;
    align-items: center;
`;
const Logo = styled.div `
    margin-right: 12px;
`;
const StyledNavItem = styled.div `
    font-family: Inter;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 17px;
    letter-spacing: 0px;
    text-align: left;

    padding: 8px;

    color: ${(props) => (props.selected ? UIConstant.primary_text_color : UIConstant.main_text_color)};
`;
const ContactUsButton = styled.div `
    font-family: Inter;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 17px;
    letter-spacing: 0em;
    text-align: center;

    padding: 7px 13px;

    border: 1px solid #ffffff;
    box-sizing: border-box;
    border-radius: 4px;

    margin-left: auto;
    color: #fff;

    display: flex;
    align-items: center;
    justify-content: center;
`;
//# sourceMappingURL=App.js.map