"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.EditModeTemplate = exports.DisplayLayerEditModeTemplate = exports.DisplayEditModeTemplate = exports.DisplayModeTemplate = exports.GridTestTemplate = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = tslib_1.__importDefault(require("react"));
const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
const ObjectDataDefinition_1 = require("@appglue/common/dist/Common/Data/Definitions/ObjectDataDefinition");
const DataUtilities_1 = require("@appglue/common/dist/Common/DataUtilities");
const DataEditing_1 = require("../DataEditing");
const GridTestTemplate = (args) => {
    let data = args.definition.getValueObject();
    const [selected, setSelected] = react_1.default.useState(0);
    return ((0, jsx_runtime_1.jsx)(GridWrapper, { children: args.definition.fields.map((f, idx) => {
            let value = DataUtilities_1.DataUtilities.get(data, f.name);
            if (!value && f instanceof ObjectDataDefinition_1.ObjectDataDefinition) {
                value = f.list ? [] : {};
                DataUtilities_1.DataUtilities.set(data, f.name, value, false);
            }
            return ((0, jsx_runtime_1.jsx)(Cell, { selected: selected === idx, children: (0, jsx_runtime_1.jsx)(DataEditing_1.XValueEditor, { value: value, forData: f, onUpdate: (newValue) => {
                        DataUtilities_1.DataUtilities.set(args.definition.getValueObject(), f.name, undefined, false);
                        DataUtilities_1.DataUtilities.set(args.definition.getValueObject(), f.name, newValue, false);
                    }, mode: selected === idx ? "edit_mode" : "display_mode", navigate: (direction) => {
                        let newIdx = selected;
                        if (direction === "Left" && selected > 0) {
                            newIdx -= 1;
                        }
                        else if ((direction === "Right" || direction === "Tab") &&
                            selected < args.definition.fields.length - 1) {
                            newIdx += 1;
                        }
                        else if (direction === "Select") {
                            newIdx = idx;
                        }
                        else if (direction === "Down" && selected + 5 <= args.definition.fields.length - 1) {
                            newIdx += 5;
                        }
                        else if (direction === "Up" && selected - 5 >= 0) {
                            newIdx -= 5;
                        }
                        setSelected(newIdx);
                    } }, idx) }));
        }) }));
};
exports.GridTestTemplate = GridTestTemplate;
const GridWrapper = styled_components_1.default.div `
    display: grid;
    justify-items: stretch;
    grid-template-columns: repeat(5, [col-start] max-content [col-end]);
    column-gap: 5px;
    row-gap: 5px;
`;
const DisplayModeTemplate = (args) => {
    if (args.definition.fields.length === 0)
        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
    let forData = args.definition.fields[0];
    const value = DataUtilities_1.DataUtilities.get(args.definition.getValueObject(), forData.name);
    return ((0, jsx_runtime_1.jsx)(Cell, { children: (0, jsx_runtime_1.jsx)(DataEditing_1.XValueEditor, { value: value, forData: forData, onUpdate: (newValue) => {
                DataUtilities_1.DataUtilities.set(args.definition.getValueObject(), forData.name, undefined, false);
                DataUtilities_1.DataUtilities.set(args.definition.getValueObject(), forData.name, newValue, false);
            }, mode: "display_mode" }) }));
};
exports.DisplayModeTemplate = DisplayModeTemplate;
const DisplayEditModeTemplate = (args) => {
    if (args.definition.fields.length === 0)
        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
    let forData = args.definition.fields[0];
    const value = DataUtilities_1.DataUtilities.get(args.definition.getValueObject(), forData.name);
    return ((0, jsx_runtime_1.jsx)(Cell, { children: (0, jsx_runtime_1.jsx)(DataEditing_1.XValueEditor, { value: value, forData: forData, onUpdate: (newValue) => {
                DataUtilities_1.DataUtilities.set(args.definition.getValueObject(), forData.name, undefined, false);
                DataUtilities_1.DataUtilities.set(args.definition.getValueObject(), forData.name, newValue, false);
            }, mode: "display_mode_edit" }) }));
};
exports.DisplayEditModeTemplate = DisplayEditModeTemplate;
const DisplayLayerEditModeTemplate = (args) => {
    if (args.definition.fields.length === 0)
        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
    let forData = args.definition.fields[0];
    const value = DataUtilities_1.DataUtilities.get(args.definition.getValueObject(), forData.name);
    return ((0, jsx_runtime_1.jsx)(Cell, { children: (0, jsx_runtime_1.jsx)(DataEditing_1.XValueEditor, { value: value, forData: forData, onUpdate: (newValue) => {
                DataUtilities_1.DataUtilities.set(args.definition.getValueObject(), forData.name, undefined, false);
                DataUtilities_1.DataUtilities.set(args.definition.getValueObject(), forData.name, newValue, false);
            }, mode: "display_mode_edit", editMode: "layer" }) }));
};
exports.DisplayLayerEditModeTemplate = DisplayLayerEditModeTemplate;
const EditModeTemplate = (args) => {
    if (args.definition.fields.length === 0)
        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
    let forData = args.definition.fields[0];
    const value = DataUtilities_1.DataUtilities.get(args.definition.getValueObject(), forData.name);
    return ((0, jsx_runtime_1.jsx)(Cell, { children: (0, jsx_runtime_1.jsx)(DataEditing_1.XValueEditor, { value: value, forData: forData, onUpdate: (newValue) => {
                DataUtilities_1.DataUtilities.set(args.definition.getValueObject(), forData.name, undefined, false);
                DataUtilities_1.DataUtilities.set(args.definition.getValueObject(), forData.name, newValue, false);
            }, mode: "edit_mode" }) }));
};
exports.EditModeTemplate = EditModeTemplate;
const Cell = styled_components_1.default.div `
    display: inline-flex;
    ${(props) => (props.selected ? `border: 1px solid #4050A6;` : `border: 1px solid #F1F1F6;`)}
`;
//# sourceMappingURL=CommonStoryTemplates.js.map