"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ContainerColumnStories = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const FormConfiguration_1 = require("../FormConfiguration");
const FormRuntime_1 = require("../FormRuntime");
const XColumnContainer_1 = require("./XColumnContainer");
const TextFormControl_1 = require("../Controls/Web/TextFormControl");
const FormDesignConstants_1 = require("../Utilities/FormDesignConstants");
const DefaultOnOff_1 = require("../Utilities/DefaultOnOff");
const StoryData_1 = require("../../CommonUI/StoryBook/StoryData");
const UIStyleConstants_1 = require("@appglue/common/dist/Common/UIStyleConstants");
function getUI(thirdColumn) {
    let ui = new FormConfiguration_1.FormConfiguration();
    let columnContainer = new XColumnContainer_1.XColumnContainer();
    let actualCol = new XColumnContainer_1.XColumnContainerColumn();
    let actualCol2 = new XColumnContainer_1.XColumnContainerColumn();
    // show border so we can see
    columnContainer.overrideFormBorderSettings = DefaultOnOff_1.DefaultOnOff.On;
    columnContainer.showContainerBorder = true;
    columnContainer.defaultShowColumnBorder = true;
    columnContainer.add(actualCol);
    columnContainer.add(actualCol2);
    actualCol.add(new TextFormControl_1.TextFormControl());
    actualCol.add(new TextFormControl_1.TextFormControl());
    actualCol.add(new TextFormControl_1.TextFormControl());
    actualCol2.add(new TextFormControl_1.TextFormControl());
    actualCol2.add(new TextFormControl_1.TextFormControl());
    actualCol2.add(new TextFormControl_1.TextFormControl());
    let actualCol3 = undefined;
    if (thirdColumn) {
        let actualCol3 = new XColumnContainer_1.XColumnContainerColumn();
        columnContainer.add(actualCol3);
        actualCol3.targetWidth = 200;
        actualCol3.maxSizePx = 200;
        actualCol3.widthUnit = FormDesignConstants_1.WidthUnitInterface.PIXEL;
        actualCol3.add(new TextFormControl_1.TextFormControl());
        actualCol3.add(new TextFormControl_1.TextFormControl());
        actualCol3.add(new TextFormControl_1.TextFormControl());
    }
    ui.add(columnContainer);
    return { form: ui, colContainer: columnContainer, col1: actualCol, col2: actualCol2, col3: actualCol3 };
}
exports.ContainerColumnStories = [
    new StoryData_1.StoryNode(() => {
        let ui = getUI();
        return (0, jsx_runtime_1.jsx)(FormRuntime_1.FormRuntime, { form: ui.form });
    }, "Form Designer", "Containers", "Column Container", "Two Column 50 Percent"),
    new StoryData_1.StoryNode(() => {
        let ui = getUI();
        ui.col1.targetWidth = 70;
        ui.col1.targetWidth = 30;
        return (0, jsx_runtime_1.jsx)(FormRuntime_1.FormRuntime, { form: ui.form });
    }, "Form Designer", "Containers", "Column Container", "Two Column 70-30 Percent"),
    new StoryData_1.StoryNode(() => {
        let ui = getUI();
        ui.col1.targetWidth = 70;
        ui.col1.targetWidth = 50;
        return (0, jsx_runtime_1.jsx)(FormRuntime_1.FormRuntime, { form: ui.form });
    }, "Form Designer", "Containers", "Column Container", "Two Column 70-50 Percent"),
    new StoryData_1.StoryNode(() => {
        let ui = getUI();
        ui.col1.targetWidth = 30;
        ui.col1.targetWidth = 60;
        return (0, jsx_runtime_1.jsx)(FormRuntime_1.FormRuntime, { form: ui.form });
    }, "Form Designer", "Containers", "Column Container", "Two Column 60-30 Percent"),
    new StoryData_1.StoryNode(() => {
        let ui = getUI(true);
        ui.col1.targetWidth = 10;
        ui.col1.minSizePx = 100;
        ui.col1.maxSizePx = 100;
        ui.col2.targetWidth = 70;
        ui.col2.maxSizePx = 300;
        return (0, jsx_runtime_1.jsx)(FormRuntime_1.FormRuntime, { form: ui.form });
    }, "Form Designer", "Containers", "Column Container", "Three Column With Space"),
    new StoryData_1.StoryNode(() => {
        let ui = getUI(true);
        ui.col1.targetWidth = 10;
        ui.col1.minSizePx = 200;
        ui.col1.maxSizePx = 300;
        ui.col2.targetWidth = 70;
        ui.col2.maxSizePx = 300;
        return (0, jsx_runtime_1.jsx)(FormRuntime_1.FormRuntime, { form: ui.form });
    }, "Form Designer", "Containers", "Column Container", "Three Column With Min Sizes"),
    new StoryData_1.StoryNode(() => {
        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: "missing" });
    }, "Form Designer", "Containers", "Column Container", "Responsive Layout (Missing)"),
    new StoryData_1.StoryNode(() => {
        let ui = getUI();
        ui.colContainer.lineBetweenColumns = true;
        ui.colContainer.defaultShowColumnBorder = false;
        return (0, jsx_runtime_1.jsx)(FormRuntime_1.FormRuntime, { form: ui.form });
    }, "Form Designer", "Containers", "Column Container", "Line Between Columns - No Border"),
    new StoryData_1.StoryNode(() => {
        let ui = getUI();
        ui.colContainer.paddingBetweenContainerAndColumns = 50;
        return (0, jsx_runtime_1.jsx)(FormRuntime_1.FormRuntime, { form: ui.form });
    }, "Form Designer", "Containers", "Column Container", "Container Column Space"),
    new StoryData_1.StoryNode(() => {
        let ui = getUI();
        ui.colContainer.gapBetweenColumns = 40;
        return (0, jsx_runtime_1.jsx)(FormRuntime_1.FormRuntime, { form: ui.form });
    }, "Form Designer", "Containers", "Column Container", "Columns Space"),
    new StoryData_1.StoryNode(() => {
        let ui = getUI();
        ui.col1.targetWidth = 30;
        ui.col1.targetWidth = 60;
        ui.colContainer.containerBackgroundColor = "blue";
        ui.colContainer.defaultColumnBackgroundColor = "red";
        ui.colContainer.defaultShowColumnBorder = true;
        ui.colContainer.defaultColumnBorderColor = UIStyleConstants_1.UIStyleConstants.YELLOW_COLOR;
        return (0, jsx_runtime_1.jsx)(FormRuntime_1.FormRuntime, { form: ui.form });
    }, "Form Designer", "Containers", "Column Container", "From Form Column Color and Border"),
    new StoryData_1.StoryNode(() => {
        let ui = getUI();
        ui.col1.targetWidth = 30;
        ui.col1.targetWidth = 60;
        ui.colContainer.containerBackgroundColor = "blue";
        ui.colContainer.defaultColumnBackgroundColor = "red";
        ui.col1.columnBackgroundColor = "yellow";
        return (0, jsx_runtime_1.jsx)(FormRuntime_1.FormRuntime, { form: ui.form });
    }, "Form Designer", "Containers", "Column Container", "Colors and Border Override"),
    new StoryData_1.StoryNode(() => {
        let ui = getUI();
        ui.form.defaultInterControlSpacing = 40;
        return (0, jsx_runtime_1.jsx)(FormRuntime_1.FormRuntime, { form: ui.form });
    }, "Form Designer", "Containers", "Column Container", "From Form - Spacing Between Controls"),
    new StoryData_1.StoryNode(() => {
        let ui = getUI();
        ui.form.defaultInterControlSpacing = 40;
        ui.col1.interControlSpacing = 10;
        ui.col2.interControlSpacing = 50;
        return (0, jsx_runtime_1.jsx)(FormRuntime_1.FormRuntime, { form: ui.form });
    }, "Form Designer", "Containers", "Column Container", "Override Spacing Between Controls"),
    new StoryData_1.StoryNode(() => {
        let ui = getUI();
        ui.form.defaultInnerColumnMargin = 40;
        return (0, jsx_runtime_1.jsx)(FormRuntime_1.FormRuntime, { form: ui.form });
    }, "Form Designer", "Containers", "Column Container", "From Form - Inner Margin"),
    new StoryData_1.StoryNode(() => {
        let ui = getUI();
        ui.form.defaultInnerColumnMargin = 40;
        ui.colContainer.defaultInnerColumnMargin = 20;
        ui.col2.innerMargin = 80;
        return (0, jsx_runtime_1.jsx)(FormRuntime_1.FormRuntime, { form: ui.form });
    }, "Form Designer", "Containers", "Column Container", "Override Form Inner Margin"),
];
//# sourceMappingURL=XColumnContainer-stories.js.map