"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.FormUserStories = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
const TextareaAutosize_1 = tslib_1.__importDefault(require("@material-ui/core/TextareaAutosize"));
const FormConfiguration_1 = require("../FormConfiguration");
const FormTestData_1 = require("../Testing/FormTestData");
const FormRuntime_1 = require("../FormRuntime");
const Containers_1 = require("../Containers");
const XHStackContainer_1 = require("../Containers/XHStackContainer");
const TextFormControl_1 = require("../Controls/Web/TextFormControl");
const ButtonFormControl_1 = require("../Controls/Web/ButtonFormControl");
const DefaultOnOff_1 = require("../Utilities/DefaultOnOff");
const MultiLineTextEditFormControl_1 = require("../Controls/Web/MultiLineTextEditFormControl");
const SelectFormControl_1 = require("../Controls/Web/SelectFormControl");
const CheckboxFormControl_1 = require("../Controls/Web/CheckboxFormControl");
const core_1 = require("@material-ui/core");
const FormDesignConstants_1 = require("../Utilities/FormDesignConstants");
const StoryData_1 = require("../../CommonUI/StoryBook/StoryData");
const UIStyleConstants_1 = require("@appglue/common/dist/Common/UIStyleConstants");
// --------------------------------
// control for testing
// --------------------------------
const StoryHostWrapper = (0, styled_components_1.default)("div") `
    display: flex;
    flex-direction: row;
    background: ${(props) => props.background || "lightgray"};
`;
const XUserFormWrapper = (0, styled_components_1.default)("div") `
    height: ${(props) => (props.height ? `${props.height}px` : "auto")};
    width: ${(props) => (props.width ? `${props.width}px` : "100%")};
    overflow: visible;
    border: ${(props) => props.border || "solid 1px gray"};
    background: #fff;
    margin: ${(props) => (props.hasHeader ? "83px 33px 33px" : "33px")};
    position: relative;
`;
const InfoWrapper = styled_components_1.default.div `
    display: flex;
    flex-direction: column;
    margin: 33px;
`;
const initialState = [];
var EventLogType;
(function (EventLogType) {
    EventLogType["ADD_EVENT"] = "ADD_EVENT";
    EventLogType["REMOVE_EVENT"] = "REMOVE_EVENT";
})(EventLogType || (EventLogType = {}));
const eventLogsReducer = (state, action) => {
    switch (action.type) {
        case EventLogType.ADD_EVENT:
            return [...state, action.logMessage || ""];
        case EventLogType.REMOVE_EVENT:
            return state.splice(action.index || 0, 1);
    }
};
function StoryHostXUserForm(props) {
    const [formData, setFormData] = (0, react_1.useState)(null);
    const [eventLogs, dispatch] = (0, react_1.useReducer)(eventLogsReducer, initialState);
    const addEventLog = (0, react_1.useCallback)((logMessage) => {
        dispatch({
            type: EventLogType.ADD_EVENT,
            logMessage,
        });
    }, [dispatch]);
    const onFormDataChange = (0, react_1.useCallback)((data) => {
        setFormData(data);
        addEventLog("Form Data is changed");
    }, [setFormData, addEventLog]);
    const onFormButtonClick = (0, react_1.useCallback)((buttonName, _data) => {
        addEventLog(`Button ${buttonName}: clicked`);
    }, [addEventLog]);
    const onFormCancelButton = (0, react_1.useCallback)(() => {
        addEventLog(`Cancel Form is triggered`);
    }, [addEventLog]);
    const onFormClose = (0, react_1.useCallback)((data) => {
        props.storyHostProps.onFormClose(data);
        setFormData(data);
        addEventLog("Close Form event is triggered");
    }, [addEventLog, props.storyHostProps.onFormClose]);
    if (props.storyHostProps.width) {
        props.storyHostProps.form.runtimeWidth = props.storyHostProps.width;
    }
    return ((0, jsx_runtime_1.jsxs)(StoryHostWrapper, { background: props.storyHostProps.background, children: [(0, jsx_runtime_1.jsx)(XUserFormWrapper, { height: props.storyHostProps.height, width: props.storyHostProps.width, border: props.storyHostProps.border, hasHeader: !!props.storyHostProps.formTitle || !!props.storyHostProps.onFormClose, children: (0, jsx_runtime_1.jsx)("div", { style: { width: "100%", height: "100%", overflow: "auto" }, children: (0, jsx_runtime_1.jsx)(FormRuntime_1.FormRuntime, { form: props.storyHostProps.form, formTitle: props.storyHostProps.formTitle, onFormDataChange: onFormDataChange, onFormButtonClick: onFormButtonClick, onFormCancelButton: onFormCancelButton, onFormClose: props.storyHostProps.onFormClose ? onFormClose : undefined }) }) }), (0, jsx_runtime_1.jsxs)(InfoWrapper, { children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(core_1.InputLabel, { children: "Form Data" }), (0, jsx_runtime_1.jsx)(TextareaAutosize_1.default, { rows: 3, value: formData ? JSON.stringify(formData, null, 2) : "" })] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(core_1.InputLabel, { children: "Event Logs" }), (0, jsx_runtime_1.jsx)(TextareaAutosize_1.default, { rows: 3, value: eventLogs.join("\n") })] })] })] }));
}
exports.FormUserStories = [
    new StoryData_1.StoryNode(() => {
        let form = (0, FormTestData_1.getFormConfig)();
        let p = {
            form: form,
            width: 800,
            height: 800,
        };
        return (0, jsx_runtime_1.jsx)(StoryHostXUserForm, { storyHostProps: p });
    }, "Form Designer", "Runtime", "All Controls"),
    new StoryData_1.StoryNode(() => {
        let form = (0, FormTestData_1.getFormConfig)();
        let p = {
            form: form,
            width: 800,
            height: 800,
        };
        return (0, jsx_runtime_1.jsx)(StoryHostXUserForm, { storyHostProps: p });
    }, "Form Designer", "Runtime", "Validation Breaks -- MISSING"),
    new StoryData_1.StoryNode(() => {
        let form = (0, FormTestData_1.getFormConfig)();
        form = new FormConfiguration_1.FormConfiguration();
        let cContainer = new Containers_1.XColumnContainer();
        let hContainer = new XHStackContainer_1.XHStackContainer();
        let sContainer = new Containers_1.XStackContainer();
        form.add(cContainer);
        form.add(hContainer);
        form.add(sContainer);
        let p = {
            form: form,
            width: 800,
            height: 800,
        };
        return (0, jsx_runtime_1.jsx)(StoryHostXUserForm, { storyHostProps: p });
    }, "Form Designer", "Runtime", "No Controls"),
    new StoryData_1.StoryNode(() => {
        let form = (0, FormTestData_1.getFormConfig)();
        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();
        actualCol3.overrideFormBorderSettings = DefaultOnOff_1.DefaultOnOff.On;
        actualCol3.columnBorderWidth = 3;
        actualCol3.columnBorderColor = UIStyleConstants_1.UIStyleConstants.RED_COLOR;
        actualCol.targetWidth = 30;
        actualCol.minSizePx = 100;
        actualCol2.targetWidth = 70;
        actualCol2.minSizePx = 300;
        actualCol3.targetWidth = 20;
        actualCol3.minSizePx = 100;
        // show border so we can see
        columnContainer.overrideFormBorderSettings = DefaultOnOff_1.DefaultOnOff.On;
        columnContainer.showContainerBorder = true;
        columnContainer.defaultShowColumnBorder = true;
        columnContainer.add(actualCol);
        columnContainer.add(actualCol2);
        columnContainer.add(actualCol3);
        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 hstackContainer = new XHStackContainer_1.XHStackContainer();
        hstackContainer.verticalAlignment = XHStackContainer_1.HStackVerticalAlignment.MIDDLE;
        hstackContainer.overrideFormBorderSettings = DefaultOnOff_1.DefaultOnOff.On;
        hstackContainer.showContainerBorder = true;
        let button = new ButtonFormControl_1.ButtonFormControl();
        button.label = "Submit";
        let button2 = new ButtonFormControl_1.ButtonFormControl();
        button.label = "Cancel";
        hstackContainer.add(new TextFormControl_1.TextFormControl());
        hstackContainer.add(new TextFormControl_1.TextFormControl());
        hstackContainer.add(button);
        hstackContainer.add(button2);
        form.add(columnContainer);
        form.add(hstackContainer);
        let p = {
            form: form,
            width: 375,
            height: 667,
        };
        return (0, jsx_runtime_1.jsx)(StoryHostXUserForm, { storyHostProps: p });
    }, "Form Designer", "Runtime", "Responsive Thin Form"),
    new StoryData_1.StoryNode(() => {
        let form = (0, FormTestData_1.getFormConfig)();
        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.targetWidth = 30;
        actualCol.minSizePx = 100;
        actualCol2.targetWidth = 70;
        actualCol2.minSizePx = 300;
        actualCol3.targetWidth = 20;
        actualCol3.minSizePx = 100;
        columnContainer.add(actualCol);
        columnContainer.add(actualCol2);
        columnContainer.add(actualCol3);
        columnContainer.overrideFormBorderSettings = DefaultOnOff_1.DefaultOnOff.On;
        columnContainer.showContainerBorder = true;
        columnContainer.defaultShowColumnBorder = true;
        columnContainer.lineBetweenColumns = true;
        columnContainer.lineWidthBetweenColumns = 2;
        columnContainer.lineColorBetweenColumns = "gray";
        form.add(columnContainer);
        let p = {
            form: form,
            width: 375,
            height: 667,
        };
        return (0, jsx_runtime_1.jsx)(StoryHostXUserForm, { storyHostProps: p });
    }, "Form Designer", "Runtime", "Resonsive Thin Line Between Containers"),
    new StoryData_1.StoryNode(() => {
        let form = (0, FormTestData_1.getFormConfig)();
        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();
        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 p = {
            form: form,
            width: 800,
            height: 800,
        };
        return (0, jsx_runtime_1.jsx)(StoryHostXUserForm, { storyHostProps: p });
    }, "Form Designer", "Runtime", "Lines Between With Overlap Column"),
    new StoryData_1.StoryNode(() => {
        let form = (0, FormTestData_1.getFormConfig)();
        form.doNotScrollLastContainerOnForm = true;
        form.doNotScrollFirstContainerOnForm = true;
        let p = {
            form: form,
            width: 800,
            height: 800,
        };
        return (0, jsx_runtime_1.jsx)(StoryHostXUserForm, { storyHostProps: p });
    }, "Form Designer", "Runtime", "Pinned Sections"),
    new StoryData_1.StoryNode(() => {
        let form = (0, FormTestData_1.getFormConfig)();
        form.doNotScrollLastContainerOnForm = true;
        form.doNotScrollFirstContainerOnForm = true;
        let onFormClose = (_data) => { };
        let p = {
            form: form,
            width: 800,
            height: 800,
            formTitle: "Test Form",
            onFormClose: onFormClose,
        };
        return (0, jsx_runtime_1.jsx)(StoryHostXUserForm, { storyHostProps: p });
    }, "Form Designer", "Runtime", "Pinned Sections With Header"),
    new StoryData_1.StoryNode(() => {
        let form = (0, FormTestData_1.getFormConfig)();
        form.doNotScrollLastContainerOnForm = true;
        form.doNotScrollFirstContainerOnForm = true;
        let onFormClose = (_data) => { };
        let p = {
            form: form,
            width: 800,
            height: 800,
            formTitle: "Test Form",
            onFormClose: onFormClose,
        };
        return (0, jsx_runtime_1.jsx)(StoryHostXUserForm, { storyHostProps: p });
    }, "Form Designer", "Runtime", "Pinned Sections With Header"),
    new StoryData_1.StoryNode(() => {
        let form = (0, FormTestData_1.getFormConfig)();
        form = new FormConfiguration_1.FormConfiguration();
        let stackContainer = new Containers_1.XStackContainer();
        let textField = new TextFormControl_1.TextFormControl();
        textField.valueName = "textfield";
        textField.label = "Text Field";
        let textareaField = new MultiLineTextEditFormControl_1.MultiLineTextEditFormControl();
        textareaField.valueName = "textarea";
        textareaField.label = "Textarea Field";
        let selectField = new SelectFormControl_1.SelectFormControl();
        selectField.valueName = "selectbox";
        selectField.list = ["Option 1", "Option 2"];
        let checkboxField = new CheckboxFormControl_1.CheckboxFormControl();
        checkboxField.valueName = "checkbox";
        stackContainer.add(textField);
        stackContainer.add(textareaField);
        stackContainer.add(selectField);
        stackContainer.add(checkboxField);
        form.add(stackContainer);
        let formStorageData = form.getStorageData();
        let s = JSON.stringify(formStorageData, null, 2);
        let sasobj = JSON.parse(s);
        let newForm = new FormConfiguration_1.FormConfiguration();
        newForm.setStorageData(sasobj);
        let p = {
            form: form,
            width: 800,
            height: 800,
        };
        return (0, jsx_runtime_1.jsx)(StoryHostXUserForm, { storyHostProps: p });
    }, "Form Designer", "Runtime", "Data Changed Externally ?? WRONG"),
    new StoryData_1.StoryNode(() => {
        let form = (0, FormTestData_1.getFormConfig)();
        form.designFormWidth = 500;
        form.runtimeWidth = 600;
        form.gapBetweenContainers = 10;
        form.formMargin = 5;
        form.defaultInnerContainerMargin = 8;
        form.defaultInnerColumnMargin = 2;
        form.defaultInterControlSpacing = 8;
        // // first container
        form.doNotScrollLastContainerOnForm = true;
        form.doNotScrollFirstContainerOnForm = false;
        form.defaultShowContainerBorder = true;
        form.defaultContainerBorderRadius = 10;
        form.defaultContainerBorderWidth = 3;
        form.defaultContainerBorderColor = UIStyleConstants_1.UIStyleConstants.GREEN_COLOR;
        form.defaultContainerBorderStyle = FormDesignConstants_1.BorderStyle.Groove;
        form.defaultLineBetweenContainerWidth = 2;
        form.showLinesBetweenContainers = true;
        form.defaultLineBetweenContainerColor = UIStyleConstants_1.UIStyleConstants.BLACK_COLOR;
        form.defaultLineBetweenContainerStyle = FormDesignConstants_1.BorderStyle.Dashed;
        form.formBackgroundColor = "#ccc";
        form.defaultContainerBackgroundColor = "#eee";
        form.defaultTextStyle = FormDesignConstants_1.TextControlStyle.OUTLINE;
        form.defaultTextSize = FormDesignConstants_1.TextControlSize.SMALL;
        let containers = form.getContainers();
        let hstackContainer = containers[3];
        hstackContainer.alignment = XHStackContainer_1.HStackAlignment.CENTER;
        hstackContainer.verticalAlignment = XHStackContainer_1.HStackVerticalAlignment.MIDDLE;
        let stackContainer = containers[1];
        stackContainer.interControlSpacing = 20;
        let stackContainer1 = containers[0];
        stackContainer1.containerBackgroundColor = "#033";
        let columnContainer = containers[2];
        columnContainer.overrideFormBorderSettings = DefaultOnOff_1.DefaultOnOff.On;
        columnContainer.defaultShowColumnBorder = true;
        columnContainer.defaultColumnBorderColor = "#a00";
        columnContainer.defaultInnerColumnMargin = 10;
        columnContainer.lineBetweenColumns = true;
        columnContainer.lineWidthBetweenColumns = 1;
        columnContainer.lineColorBetweenColumns = UIStyleConstants_1.UIStyleConstants.BLUE_COLOR;
        let formStorageData = form.getStorageData();
        let s = JSON.stringify(formStorageData, null, 2);
        let sasobj = JSON.parse(s);
        let newForm = new FormConfiguration_1.FormConfiguration();
        newForm.setStorageData(sasobj);
        let p = {
            form: newForm,
            width: 800,
            height: 800,
        };
        return (0, jsx_runtime_1.jsx)(StoryHostXUserForm, { storyHostProps: p });
    }, "Form Designer", "Runtime", "Data Read In From JSON"),
    new StoryData_1.StoryNode(() => {
        let form = new FormConfiguration_1.FormConfiguration();
        let stack = new Containers_1.XStackContainer();
        form.add(stack);
        let control = new TextFormControl_1.TextFormControl();
        control.valueName = "test";
        control.label = "test label";
        stack.add(control);
        let p = {
            form: form,
            width: 800,
            height: 800,
        };
        return (0, jsx_runtime_1.jsx)(StoryHostXUserForm, { storyHostProps: p });
    }, "Form Designer", "Runtime", "Simple Form"),
];
//# sourceMappingURL=XUserForm-stories.js.map