import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
import React from "react";
import styled from "styled-components";
import { ObjectDataDefinition } from "../../Common/Data/Definitions/ObjectDataDefinition";
import { DataUtilities } from "../../Common/DataUtilities";
import { XValueEditor } from "../DataEditing";
export const GridTestTemplate = (args) => {
    let data = args.definition.getValueObject();
    const [selected, setSelected] = React.useState(0);
    return (_jsx(GridWrapper, { children: args.definition.fields.map((f, idx) => {
            let value = DataUtilities.get(data, f.name);
            if (!value && f instanceof ObjectDataDefinition) {
                value = f.list ? [] : {};
                DataUtilities.set(data, f.name, value, false);
            }
            return (_jsx(Cell, Object.assign({ selected: selected === idx }, { children: _jsx(XValueEditor, { value: value, forData: f, onUpdate: (newValue) => {
                        DataUtilities.set(args.definition.getValueObject(), f.name, undefined, false);
                        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) }), void 0));
        }) }, void 0));
};
const GridWrapper = styled.div `
    display: grid;
    justify-items: stretch;
    grid-template-columns: repeat(5, [col-start] max-content [col-end]);
    column-gap: 5px;
    row-gap: 5px;
`;
export const DisplayModeTemplate = (args) => {
    if (args.definition.fields.length === 0)
        return _jsx(_Fragment, {}, void 0);
    let forData = args.definition.fields[0];
    const value = DataUtilities.get(args.definition.getValueObject(), forData.name);
    return (_jsx(Cell, { children: _jsx(XValueEditor, { value: value, forData: forData, onUpdate: (newValue) => {
                DataUtilities.set(args.definition.getValueObject(), forData.name, undefined, false);
                DataUtilities.set(args.definition.getValueObject(), forData.name, newValue, false);
            }, mode: "display_mode" }, void 0) }, void 0));
};
export const DisplayEditModeTemplate = (args) => {
    if (args.definition.fields.length === 0)
        return _jsx(_Fragment, {}, void 0);
    let forData = args.definition.fields[0];
    const value = DataUtilities.get(args.definition.getValueObject(), forData.name);
    return (_jsx(Cell, { children: _jsx(XValueEditor, { value: value, forData: forData, onUpdate: (newValue) => {
                DataUtilities.set(args.definition.getValueObject(), forData.name, undefined, false);
                DataUtilities.set(args.definition.getValueObject(), forData.name, newValue, false);
            }, mode: "display_mode_edit" }, void 0) }, void 0));
};
export const DisplayLayerEditModeTemplate = (args) => {
    if (args.definition.fields.length === 0)
        return _jsx(_Fragment, {}, void 0);
    let forData = args.definition.fields[0];
    const value = DataUtilities.get(args.definition.getValueObject(), forData.name);
    return (_jsx(Cell, { children: _jsx(XValueEditor, { value: value, forData: forData, onUpdate: (newValue) => {
                DataUtilities.set(args.definition.getValueObject(), forData.name, undefined, false);
                DataUtilities.set(args.definition.getValueObject(), forData.name, newValue, false);
            }, mode: "display_mode_edit", editMode: "layer" }, void 0) }, void 0));
};
export const EditModeTemplate = (args) => {
    if (args.definition.fields.length === 0)
        return _jsx(_Fragment, {}, void 0);
    let forData = args.definition.fields[0];
    const value = DataUtilities.get(args.definition.getValueObject(), forData.name);
    return (_jsx(Cell, { children: _jsx(XValueEditor, { value: value, forData: forData, onUpdate: (newValue) => {
                DataUtilities.set(args.definition.getValueObject(), forData.name, undefined, false);
                DataUtilities.set(args.definition.getValueObject(), forData.name, newValue, false);
            }, mode: "edit_mode" }, void 0) }, void 0));
};
const Cell = styled.div `
    display: inline-flex;
    ${(props) => (props.selected ? `border: 1px solid #4050A6;` : `border: 1px solid #F1F1F6;`)}
`;
//# sourceMappingURL=CommonStoryTemplates.js.map