import { createMachine, assign, send, sendParent, spawn } from 'xstate';
import { debounceMachine } from '$lib/@iioioo_utils/State/debounce.machine';
import type { INumber } from '$lib/Models';


export interface NumberContext {
    debounceMachine: any;
    field: INumber;
}


export const numberMachine = createMachine(
{
    context: {
        field: null,
        debounceMachine: null
    },
    tsTypes: {} as import("./numberMachine.typegen").Typegen0,
    schema: {
        context: {} as NumberContext,
        events: {} as 
            { type: 'KEYSTROKE'; value: any } |
            { type: 'STOPPED'; value: any } |
            { type: 'FOCUS'; value: any } |
            { type: 'TOGGLE_DECIMAL' }
    },
    id: '',
    type: 'parallel',
    states: {
        value: {
            initial: 'idle',
            states: {
                idle: {
                    entry: [ 'assignHelperMachines' ],
                    on: {
                        FOCUS: {
                            target: 'typing',
                            actions: [ 'broadcastFocus' ]
                        }
                    },
                },
                typing: {
                    on: {
                        KEYSTROKE: {
                            actions: [ 'debounceKeystroke' ]
                        },
                        STOPPED: {
                            actions: [
                                'assignValue',
                                'notifyParent'
                            ]
                        },
                    }
                }
            }
        },
        hasDecimal: {
            initial: 'false',
            states: {
                false: {
                    on: {
                        TOGGLE_DECIMAL: 'true'
                    }
                },
                true: {
                    on: {
                        TOGGLE_DECIMAL: 'false'
                    }
                }
            }
        }  
    },
},
{
    actions: {
        assignHelperMachines: assign({
            debounceMachine: (context) => spawn( 
                debounceMachine.withContext({ 
                    ...debounceMachine.context, 
                    debounceFor: context.field.debounceFor,
                    action: { name: 'STOPPED', payload: 'value'}
                }), 
                { name: 'debounceMachine' } 
            )
        }),
        broadcastFocus: sendParent('FOCUS'),
        debounceKeystroke: send(
            (context, event) => ({ type: 'GO', value: event.value }), 
            { to: (context) => context.debounceMachine }
        ),
        assignValue: assign({
            field: (context, event) => 
                ({ ...context.field, value: event.value })
        }), 
        notifyParent: sendParent( ( context ) => {
            return { type: 'CHANGE', value: context.field };
        })
    }
});


// import { createMachine, assign, send, sendParent, spawn } from 'xstate';
// import type { NumberModel, NumberContext, NumberEvent, Number_Event_Keystroke, Number_Event_Stopped } from '../models';
// import { debounceMachine } from '$lib/@iioioo_utils/State/debounce.machine';

// export const numberMachine = ( field: NumberModel ) => createMachine<NumberContext, NumberEvent>(
// {
//     id: field.id,
//     context: {
//         field,
//         debounceMachine: null
//     },
//     type: 'parallel',
//     states: {
//         value: {
//             initial: 'idle',
//             states: {
//                 idle: {
//                     entry: assign({
//                         debounceMachine: (context: NumberContext, event: any) => spawn( 
//                             debounceMachine(field.id, field.debounceFor, { name: 'STOPPED', payload: 'value'}), { name: 'debounceMachine' } 
//                         )
//                     }),
//                     on: {
//                         FOCUS: {
//                             target: 'typing',
//                             actions: sendParent('FOCUS')
//                         }
//                     },
//                 },
//                 typing: {
//                     on: {
//                         KEYSTROKE: {
//                             actions: send(
//                                 (context: NumberContext, event: Number_Event_Keystroke) => ({ type: 'GO', value: event.value }), 
//                                 { to: (context: NumberContext) => context.debounceMachine }
//                             ) 
//                         },
//                         STOPPED: {
//                             actions: [
//                                 assign({
//                                     field: (context: NumberContext, event: Number_Event_Stopped) => 
//                                         ({ ...context.field, value: event.value })
//                                 }),
//                                 sendParent( ( context: NumberContext ) => {
//                                     return { type: 'CHANGE', value: context.field };
//                                 })
//                             ]
//                         },
//                     }
//                 }
//             }
//         },
//         hasDecimal: {
//             initial: 'false',
//             states: {
//                 false: {
//                     on: {
//                         TOGGLE_DECIMAL: 'true'
//                     }
//                 },
//                 true: {
//                     on: {
//                         TOGGLE_DECIMAL: 'false'
//                     }
//                 }
//             }
//         }  
//     },
// });