"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.FormAndLayoutDesignPanelStories = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = tslib_1.__importDefault(require("react"));
const XFormAndLayoutDesignPanel_1 = require("./XFormAndLayoutDesignPanel");
const FormConfiguration_1 = require("../FormConfiguration");
const FormTestData_1 = require("../Testing/FormTestData");
const FormDesignConstants_1 = require("./FormDesignConstants");
const Containers_1 = require("../Containers");
const TextFormControl_1 = require("../Controls/Web/TextFormControl");
const IDesignValidationProvider_1 = require("@appglue/common/dist/Common/IDesignValidationProvider");
const FormContext_1 = require("./FormContext");
const DefaultOnOff_1 = require("./DefaultOnOff");
const StoryData_1 = require("../../CommonUI/StoryBook/StoryData");
exports.FormAndLayoutDesignPanelStories = [
    new StoryData_1.StoryNode(() => {
        let form = (0, FormTestData_1.getFormConfig)();
        let ui = new FormContext_1.FormContext(form);
        form.setFormContext(ui);
        ui.mode = FormDesignConstants_1.FormMode.LayoutDesign;
        const ref = react_1.default.createRef();
        // hook to the update
        ui.onDesignerUpdate = () => {
            ref.current?.forceUpdate();
        };
        return (0, jsx_runtime_1.jsx)(XFormAndLayoutDesignPanel_1.XFormAndLayoutDesignPanel, { editContext: ui, ref: ref });
    }, "Form Designer", "Designer", "Pieces", "Design Panel "),
    new StoryData_1.StoryNode(() => {
        let form = (0, FormTestData_1.getFormConfig)();
        let ui = new FormContext_1.FormContext(form);
        form.setFormContext(ui);
        ui.mode = FormDesignConstants_1.FormMode.LayoutDesign;
        const ref = react_1.default.createRef();
        // hook to the update
        ui.onDesignerUpdate = () => {
            ref.current?.forceUpdate();
        };
        return (0, jsx_runtime_1.jsx)(XFormAndLayoutDesignPanel_1.XFormAndLayoutDesignPanel, { editContext: ui, ref: ref });
    }, "Form Designer", "Designer", "Pieces", "Design Panel Only Control Mode"),
    new StoryData_1.StoryNode(() => {
        let form1 = new FormConfiguration_1.FormConfiguration();
        let stack = new Containers_1.XStackContainer();
        let errorField = new TextFormControl_1.TextFormControl();
        errorField.label = "Label";
        stack.add(errorField);
        let textField = new TextFormControl_1.TextFormControl();
        textField.valueName = "ttt";
        textField.label = "Text";
        stack.add(textField);
        form1.add(stack);
        let ui = new FormContext_1.FormContext(form1);
        form1.setFormContext(ui);
        ui.designValidationProvider = {
            getDesignValidationIssues: () => {
                let breaks = [];
                for (let c of form1.getAllControls()) {
                    const valueName = Reflect.get(c, "valueName");
                    if (valueName && valueName.length < 6) {
                        breaks.push(new IDesignValidationProvider_1.ValidationIssue("valueName must have at least 6 characters", valueName, c.id, IDesignValidationProvider_1.ValidationLevel.WARNING));
                    }
                }
                return breaks;
            },
        };
        // todo: remove these parts, we need to listen to all compoments
        ui.computeDesignValidationIssues();
        const ref = react_1.default.createRef();
        // hook to the update
        ui.onDesignerUpdate = () => {
            ref.current?.forceUpdate();
        };
        return (0, jsx_runtime_1.jsx)(XFormAndLayoutDesignPanel_1.XFormAndLayoutDesignPanel, { editContext: ui, ref: ref });
    }, "Form Designer", "Designer", "Pieces", "Design Panel With Design Time Validation"),
    new StoryData_1.StoryNode(() => {
        let form = (0, FormTestData_1.getFormConfig)();
        form.doNotScrollFirstContainerOnForm = true;
        form.doNotScrollLastContainerOnForm = true;
        let ui = new FormContext_1.FormContext(form);
        form.setFormContext(ui);
        const ref = react_1.default.createRef();
        // hook to the update
        ui.onDesignerUpdate = () => {
            ref.current?.forceUpdate();
        };
        return (0, jsx_runtime_1.jsx)(XFormAndLayoutDesignPanel_1.XFormAndLayoutDesignPanel, { editContext: ui, ref: ref });
    }, "Form Designer", "Designer", "Pieces", "Design Panel With Pinned Section"),
    new StoryData_1.StoryNode(() => {
        let form = new FormConfiguration_1.FormConfiguration();
        let stack = new Containers_1.XStackContainer();
        form.add(stack);
        let hstack = new Containers_1.XHStackContainer();
        form.add(hstack);
        let columnContainer = new Containers_1.XColumnContainer();
        form.add(columnContainer);
        let ui = new FormContext_1.FormContext(form);
        form.setFormContext(ui);
        const ref = react_1.default.createRef();
        // hook to the update
        ui.onDesignerUpdate = () => {
            ref.current?.forceUpdate();
        };
        return (0, jsx_runtime_1.jsx)(XFormAndLayoutDesignPanel_1.XFormAndLayoutDesignPanel, { editContext: ui, ref: ref });
    }, "Form Designer", "Designer", "Pieces", "Design Panel with Empty Container"),
    new StoryData_1.StoryNode(() => {
        let form = new FormConfiguration_1.FormConfiguration();
        let stack = new Containers_1.XStackContainer();
        form.add(stack);
        let hstack = new Containers_1.XHStackContainer();
        form.add(hstack);
        let columnContainer = new Containers_1.XColumnContainer();
        form.add(columnContainer);
        let ui = new FormContext_1.FormContext(form);
        ui.mode = FormDesignConstants_1.FormMode.LayoutDesign;
        form.setFormContext(ui);
        const ref = react_1.default.createRef();
        // hook to the update
        ui.onDesignerUpdate = () => {
            ref.current?.forceUpdate();
        };
        return (0, jsx_runtime_1.jsx)(XFormAndLayoutDesignPanel_1.XFormAndLayoutDesignPanel, { editContext: ui, ref: ref });
    }, "Form Designer", "Designer", "Pieces", "Layout Mode Wtih Empty Container"),
    new StoryData_1.StoryNode(() => {
        let form = new FormConfiguration_1.FormConfiguration();
        let columnContainer = new Containers_1.XColumnContainer();
        let actualCol = new Containers_1.XColumnContainerColumn();
        let actualCol2 = new Containers_1.XColumnContainerColumn();
        let actualCol3 = new Containers_1.XColumnContainerColumn();
        actualCol.add(new TextFormControl_1.TextFormControl());
        actualCol2.add(new TextFormControl_1.TextFormControl());
        actualCol3.add(new TextFormControl_1.TextFormControl());
        columnContainer.add(actualCol);
        columnContainer.add(actualCol2);
        columnContainer.add(actualCol3);
        actualCol.targetWidth = 30;
        actualCol.minSizePx = 500;
        actualCol2.targetWidth = 70;
        actualCol2.minSizePx = 300;
        actualCol3.targetWidth = 20;
        actualCol3.minSizePx = 100;
        columnContainer.lineBetweenColumns = true;
        columnContainer.lineWidthBetweenColumns = 2;
        columnContainer.lineColorBetweenColumns = "gray";
        form.add(columnContainer);
        let ui = new FormContext_1.FormContext(form);
        ui.mode = FormDesignConstants_1.FormMode.LayoutDesign;
        form.setFormContext(ui);
        const ref = react_1.default.createRef();
        // hook to the update
        ui.onDesignerUpdate = () => {
            ref.current?.forceUpdate();
        };
        return (0, jsx_runtime_1.jsx)(XFormAndLayoutDesignPanel_1.XFormAndLayoutDesignPanel, { editContext: ui, ref: ref });
    }, "Form Designer", "Designer", "Pieces", "Design Panel With Line Between and Overlap"),
    new StoryData_1.StoryNode(() => {
        let tabContainer = new Containers_1.XTabContainer();
        let tabContainerTab = new Containers_1.XTabContainerTab();
        tabContainer.overrideFormBorderSettings = DefaultOnOff_1.DefaultOnOff.On;
        let tabContainerTabContent = new Containers_1.XTabContainerTabContent();
        let tabContainerTabHeader = new Containers_1.XTabContainerTabHeader();
        tabContainerTabHeader.title = "Test 1";
        tabContainerTab.setContent(tabContainerTabContent);
        tabContainerTab.setHeader(tabContainerTabHeader);
        let tabContainerTab2 = new Containers_1.XTabContainerTab();
        let tabContainerTabContent2 = new Containers_1.XTabContainerTabContent();
        let tabContainerTabHeader2 = new Containers_1.XTabContainerTabHeader();
        tabContainerTabHeader2.title = "Test 2";
        tabContainerTab2.setContent(tabContainerTabContent2);
        tabContainerTab2.setHeader(tabContainerTabHeader2);
        tabContainer.addTab(tabContainerTab);
        tabContainer.addTab(tabContainerTab2);
        let form = new FormConfiguration_1.FormConfiguration();
        form.add(tabContainer);
        let ui = new FormContext_1.FormContext(form);
        ui.mode = FormDesignConstants_1.FormMode.LayoutDesign;
        form.setFormContext(ui);
        const ref = react_1.default.createRef();
        // hook to the update
        ui.onDesignerUpdate = () => {
            ref.current?.forceUpdate();
        };
        return (0, jsx_runtime_1.jsx)(XFormAndLayoutDesignPanel_1.XFormAndLayoutDesignPanel, { editContext: ui, ref: ref });
    }, "Form Designer", "Designer", "Pieces", "Design Panel With Tab Container"),
];
//# sourceMappingURL=XFormAndLayoutDesignPanel-stories.js.map