"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.FormDesignerStories = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
// also exported from '@storybook/react' if you can deal with breaking changes in 6.1
const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
const core_1 = require("@material-ui/core");
const InfoIcon_1 = require("../../CommonUI/Icon/InfoIcon");
const TextIcon_1 = require("../../CommonUI/TextIcon");
const FormBuilder_1 = require("../FormBuilder");
const FormConfiguration_1 = require("../FormConfiguration");
const FormTestData_1 = require("../Testing/FormTestData");
const FormRule_1 = require("../Structure/FormRule");
const LogicData_1 = require("../../Expressions/Testing/LogicData");
const MathData_1 = require("../../Expressions/Testing/MathData");
const StoryData_1 = require("../../CommonUI/StoryBook/StoryData");
const UIStyleConstants_1 = require("@appglue/common/dist/Common/UIStyleConstants");
const Wrapper = (0, styled_components_1.default)("div") `
    flex: 1;
    display: flex;
    flex-flow: column;
    background: ${(props) => props.backgroundColor || "transparent"};
`;
class TopExtensionPanel {
    name = "Info";
    icon = ((0, jsx_runtime_1.jsx)(InfoIcon_1.InfoIcon, {}));
    renderUI() {
        return ((0, jsx_runtime_1.jsx)(Wrapper, { backgroundColor: "gray", children: (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(core_1.Typography, { children: "Information" }) }) }));
    }
}
class BottomExtensionPanel {
    name = "Doc";
    icon = ((0, jsx_runtime_1.jsx)(TextIcon_1.TextIcon, { name: "D" }));
    renderUI() {
        return ((0, jsx_runtime_1.jsx)(Wrapper, { backgroundColor: "green", children: (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(core_1.Typography, { children: "Documentation" }) }) }));
    }
}
exports.FormDesignerStories = [
    new StoryData_1.StoryNode(() => {
        let ui = (0, FormTestData_1.getFormConfig)();
        return (0, jsx_runtime_1.jsx)(FormBuilder_1.FormBuilder, { form: ui });
    }, "Form Designer", "All Controls"),
    new StoryData_1.StoryNode(() => {
        let ui = new FormConfiguration_1.FormConfiguration();
        return (0, jsx_runtime_1.jsx)(FormBuilder_1.FormBuilder, { form: ui });
    }, "Form Designer", "No Controls"),
    new StoryData_1.StoryNode(() => {
        let ui = new FormConfiguration_1.FormConfiguration();
        return (0, jsx_runtime_1.jsx)(FormBuilder_1.FormBuilder, { form: ui, formName: "Test Form" });
    }, "Form Designer", "Form Title"),
    new StoryData_1.StoryNode(() => {
        let ui = new FormConfiguration_1.FormConfiguration();
        return (0, jsx_runtime_1.jsx)(FormBuilder_1.FormBuilder, { form: ui, formName: "Test Form", onFormSave: () => { } });
    }, "Form Designer", "Form Save"),
    new StoryData_1.StoryNode(() => {
        let ui = (0, FormTestData_1.getFormConfig)();
        ui.doNotScrollLastContainerOnForm = true;
        ui.doNotScrollFirstContainerOnForm = true;
        return (0, jsx_runtime_1.jsx)(FormBuilder_1.FormBuilder, { form: ui, formName: "Test Form" });
    }, "Form Designer", "Pinned Sections"),
    new StoryData_1.StoryNode(() => {
        let ui = (0, FormTestData_1.getFormConfig)();
        return (0, jsx_runtime_1.jsx)(FormBuilder_1.FormBuilder, { form: ui, onFormClose: () => { } });
    }, "Form Designer", "Close Action"),
    new StoryData_1.StoryNode(() => {
        let ui = (0, FormTestData_1.getFormConfig)();
        ui.gapBetweenContainers = 80;
        return (0, jsx_runtime_1.jsx)(FormBuilder_1.FormBuilder, { form: ui, formName: "Test Form" });
    }, "Form Designer", "Space Between Containers"),
    new StoryData_1.StoryNode(() => {
        let ui = (0, FormTestData_1.getFormConfig)();
        ui.showLinesBetweenContainers = true;
        return (0, jsx_runtime_1.jsx)(FormBuilder_1.FormBuilder, { form: ui, formName: "Test Form" });
    }, "Form Designer", "Lines Between Containers"),
    new StoryData_1.StoryNode(() => {
        let ui = (0, FormTestData_1.getFormConfig)();
        ui.formMargin = 20;
        ui.defaultInnerContainerMargin = 40;
        ui.defaultShowContainerBorder = true;
        return (0, jsx_runtime_1.jsx)(FormBuilder_1.FormBuilder, { form: ui, formName: "Test Form" });
    }, "Form Designer", "Form Margin and Default Container Margin"),
    new StoryData_1.StoryNode(() => {
        let ui = (0, FormTestData_1.getFormConfig)();
        ui.formBackgroundColor = UIStyleConstants_1.UIStyleConstants.YELLOW_COLOR;
        return (0, jsx_runtime_1.jsx)(FormBuilder_1.FormBuilder, { form: ui, formName: "Test Form" });
    }, "Form Designer", "Form Background Color"),
    new StoryData_1.StoryNode(() => {
        let ui = (0, FormTestData_1.getFormConfig)();
        ui.defaultContainerBackgroundColor = UIStyleConstants_1.UIStyleConstants.YELLOW_COLOR;
        return (0, jsx_runtime_1.jsx)(FormBuilder_1.FormBuilder, { form: ui, formName: "Test Form" });
    }, "Form Designer", "Container Background Color"),
    new StoryData_1.StoryNode(() => {
        let ui = (0, FormTestData_1.getFormConfig)();
        ui.defaultContainerBorderColor = UIStyleConstants_1.UIStyleConstants.YELLOW_COLOR;
        ui.defaultShowContainerBorder = true;
        return (0, jsx_runtime_1.jsx)(FormBuilder_1.FormBuilder, { form: ui, formName: "Test Form" });
    }, "Form Designer", "Container Default Border"),
    new StoryData_1.StoryNode(() => {
        let ui = (0, FormTestData_1.getFormConfig)();
        let topDesignerExtensions = [new TopExtensionPanel()];
        let bottomDesignerExtensions = [new BottomExtensionPanel()];
        return ((0, jsx_runtime_1.jsx)(FormBuilder_1.FormBuilder, { form: ui, topDesignerExtensions: topDesignerExtensions, bottomDesignerExtensions: bottomDesignerExtensions, formName: "Test Form" }));
    }, "Form Designer", "Form UI Extensions"),
    new StoryData_1.StoryNode(() => {
        let ui = (0, FormTestData_1.getFormConfig)();
        let datadef = (0, FormTestData_1.getDataDefinitionForRulePage)();
        ui.inputData = datadef;
        let expression1 = (0, LogicData_1.getLogicExpressionResultElseIfAtEnd)();
        let rule1 = new FormRule_1.FormRule(expression1, ["isEmployee", "income"]);
        let expression2 = (0, MathData_1.getDivideSimpleRule)();
        let rule2 = new FormRule_1.FormRule(expression2, []);
        ui.rules = [rule1, rule2];
        return (0, jsx_runtime_1.jsx)(FormBuilder_1.FormBuilder, { form: ui, formName: "Test Form" });
    }, "Form Designer", "With Rules"),
];
//# sourceMappingURL=XFormDesigner-stories.js.map