"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
// import styled from 'styled-components';
// import { ObjectDataDefinition } from "@appglue/common/dist/Common/Data/Definitions/ObjectDataDefinition";
// import { DataUtilities } from "@appglue/common/dist/Common/DataUtilities";
// import { XValueEditor } from "../DataEditing";
// import {StoryNode} from "../StoryBook/StoryData";
//
// 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 ValueEditorStories = [
//     new StoryNode( () => {
//             let data = args.definition.getValueObject();
//             const [selected, setSelected] = React.useState(0);
//
//             return <GridWrapper>
//                 {
//                     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);
//                         }
//
//                         return <XValueEditor
//                             value={value}
//                             key={idx}
//                             forData={f}
//                             onUpdate={(newValue: any) => {
//                                 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);
//                             }}
//                         />
//                     })
//                 }
//             </GridWrapper>
//         },
//
//         'Shared',
//         'Value Editing',
//         'Grid Test'
//     ),
//
//     new StoryNode( () => {
//             if (args.definition.fields.length === 0) return <></>;
//
//             let forData = args.definition.fields[0];
//             const value = DataUtilities.get(args.definition.getValueObject(), forData.name);
//
//             return <div>
//                 <XValueEditor
//                     value={value}
//                     forData={forData}
//                     onUpdate={(newValue: any) => {
//                         DataUtilities.set(args.definition.getValueObject(), forData.name, newValue, false);
//                     }}
//                     mode={'display_mode'}
//                 />
//             </div>
//         },
//
//         'Shared',
//         'Value Editing',
//         'Display Mode'
//     ),
//
//     new StoryNode( () => {
//             if (args.definition.fields.length === 0) return <></>;
//
//             let forData = args.definition.fields[0];
//             const value = DataUtilities.get(args.definition.getValueObject(), forData.name);
//
//             return <div>
//                 <XValueEditor
//                     value={value}
//                     forData={forData}
//                     onUpdate={(newValue: any) => {
//                         DataUtilities.set(args.definition.getValueObject(), forData.name, newValue, false);
//                     }}
//                     mode={'display_mode_edit'}
//                 />
//             </div>
//         },
//
//         'Shared',
//         'Value Editing',
//         'Display Mode Edit'
//     ),
//     new StoryNode( () => {
//             if (args.definition.fields.length === 0) return <></>;
//
//             let forData = args.definition.fields[0];
//             const value = DataUtilities.get(args.definition.getValueObject(), forData.name);
//
//             return <div>
//                 <XValueEditor
//                     value={value}
//                     forData={forData}
//                     onUpdate={(newValue: any) => {
//                         DataUtilities.set(args.definition.getValueObject(), forData.name, newValue, false);
//                     }}
//                     mode={'edit_mode'}
//                 />
//             </div>
//         },
//
//         'Shared',
//         'Value Editing',
//         'Edit Mode'
//     ),
// ]
//
//# sourceMappingURL=XValueEditor-stories.js.map