// import type { ActionFunctionMap } from 'xstate'; 
// import { createMachine, assign, sendParent, spawn } from 'xstate';
// import { nanoid } from '$lib/@iioioo_utils/Services/nanoid'; 
// import { FormModel } from '../models';
// import type { IFieldBase } from '../models';
// import type { ListContext, ListEvent, ListModel, ListStateSchema, List_Event_New, List_Event_Add, List_Event_Remove, List_Event_Submit } from '../models'; 
// import { formMachine } from './form.machine';

// const assignFormMachine = assign({
//     formMachine: (context: ListContext, event: any, meta: any) => {
//         const parentField = new FormModel({ id: 'listparent', parentId: context.field.id, value: context.classExample });
//         const listFormMachine = formMachine( 'listFormMachine', parentField, undefined, { name: 'ADD', payload: 'value' } );
//         return spawn( listFormMachine, { name: 'listFormMachine' } );
//     }
// });

// const add = assign({
//     field: (context: ListContext, event: List_Event_Add) => {
        
//         /* 
//             NOTE: I terms of delivering values to their parents, list first parses its own values so that the 
//             ultimate parent form doesn't need to. 
//         */
//         const newObjScaffold = event.value.value; 
//         const newObj = Object.values(newObjScaffold).reduce((acc: any, curr: IFieldBase) => {
//             return { ...acc, [ curr.name ]: curr.value }; 
//         }, { id: nanoid() }); 

//         context.field.value = [ ...context.field.value, newObj ];
//         return context.field; 
//     }
// });

// const remove = assign({
//     field: (context: ListContext, event: List_Event_Remove) => {
//         context.field.value = context.field.value.filter(item => item.id !== event.id); 
//         return context.field; 
//     }
// });

// export const listStates = ( field: ListModel ) : ListStateSchema => ({ 
    
//     id: field.id,
//     initial: 'idle',
//     context: {
//         active: null,
//         field,
//         addText: field.addText,
//         classExample: field.classExample,
//         formMachine: null
//     },
//     states: {
//         idle: {
//             on: {
//                 NEW: 'editing',
//                 REMOVE: {
//                     actions: [ 'remove', 'notifyParent' ]
//                 },
//                 SUBMIT: {
//                     actions: [ 'submit' ]
//                 },
//                 EDIT: {
//                     actions: [(c,e)=>console.log("IN SET ACTIVE ON LIST 1")]
//                 }
//             }
//         },
//         editing: {
//             entry: [ 'assignFormMachine' ],
//             on: {
//                 ADD: {
//                     target: 'idle',
//                     actions: [ 'add', 'notifyParent' ],
//                 },
//                 REMOVE: {
//                     target: 'idle',
//                     actions: ['remove', 'notifyParent']
//                 },
//                 SUBMIT: { 
//                     target: 'idle',
//                     actions: [ 'notifyParent' ]
//                 },
//                 EDIT: {
//                     actions: [(c,e)=>console.log("IN SET ACTIVE ON LIST 2")]
//                 }
//             },
//             exit: assign({ formMachine: null })
//         }
//     },
//     on: {
//         // EDIT: {
//         //     actions: [ (c,e) => console.log("IN SET ACTIVE ON LIST 3: ", e) ]
//         // },
//         // SET_ACTIVE: {
//         //     actions: [ (c,e) => console.log("IN SET ACTIVE ON LIST 4: ", e) ]
//         // }
//     }
// });

// const actions: ActionFunctionMap<ListContext, ListEvent> = { assignFormMachine, add, remove }; 

// export const listMachine = ( field: ListModel, action: { name: string, payload: string } = { name: 'CHANGE', payload: 'value'} ) => {
    
//     return createMachine<ListContext, ListEvent>(
//         listStates(field) as any,
//         {
//             actions: {
//                 ...actions,
//                 notifyParent: sendParent((context: ListContext, _: ListEvent) => {
//                     return { type: action.name, [action.payload]: context.field }; 
//                 })
//             } 
//         }
//     )
// }