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

// CONTEXT
export type TextContext = {
    debounceMachine: any;
    field: IText;
    broadcastEvent: { type: string; key: string }
}

export type TextState =
{
    value: 'idle';
    context: TextContext
} | 
{
    value: 'typing';
    context: TextContext
};

export const textMachine = createMachine(
{
    tsTypes: {} as import("./textMachine.typegen").Typegen0,
    schema: {
        context: {} as TextContext,
        events: {} as { type: 'KEYSTROKE'; value: any } |
        { type: 'STOPPED'; value: any } |
        { type: 'FOCUS'; value: any } 
    },
    id: 'tickle',
    initial: 'idle',
    context: {
        field: new TextModel({}),
        debounceMachine: null,
        broadcastEvent: { type: 'CHANGE', key: 'value' }
    },
    states: {
        idle: {
            entry: [ 'assignHelperMachines' ],
            on: {
                FOCUS: {
                    target: 'typing',
                    actions: [ 'broadcastFocus' ]
                }
            },
        },
        typing: {
            on: {
                KEYSTROKE: {
                    actions: [ 'debounceKeystroke' ]
                },
                STOPPED: {
                    actions: [
                        'assignValue',
                        'notifyParent'
                    ]
                },
            }
        }
    },
},
{
   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, event ) => {
            console.log("about to send text changes: ", context);
            return { type: context.broadcastEvent.type, [ context.broadcastEvent.key ]: context.field };
        })
    }
});


// import { createMachine, assign, send, sendParent, spawn } from 'xstate';
// import type { TextModel, TextContext, TextEvent, Text_Event_Keystroke, Text_Event_Stopped } from '../models';
// import { debounceMachine } from '$lib/@iioioo_utils/State/debounce.machine';

// export const textMachine = ( field: TextModel ) => createMachine<TextContext, TextEvent>(
// {
//     id: field.id,
//     initial: 'idle',
//     context: {
//         field,
//         debounceMachine: null
//     },
//     states: {
//         idle: {
//             entry: assign({
//                 debounceMachine: (context: TextContext, 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: TextContext, event: Text_Event_Keystroke) => ({ type: 'GO', value: event.value }), 
//                         { to: (context: TextContext) => context.debounceMachine }
//                     ) 
//                 },
//                 STOPPED: {
//                     actions: [
//                         assign({
//                             field: (context: TextContext, event: Text_Event_Stopped) => 
//                                 ({ ...context.field, value: event.value })
//                         }),
//                         sendParent( ( context: TextContext ) => {
//                             return { type: 'CHANGE', value: context.field };
//                         })
//                     ]
//                 },
//             }
//         }
//     },
// });