// src/lib/components/Recipies/machines/authMachine.ts
import { createMachine } from 'xstate';

export const recipeMachine = createMachine(
    {
        id: 'auth',
        initial: 'notAuthenticated',
        states: {
            notAuthenticated: {
                meta: {
                    title: 'Welcome!',
                    buttons: [
                        {
                            type: 'START',
                            label: 'Login',
                            disabled: false
                        }
                    ]
                },
                on: {
                    START: {
                        target: 'signIn',
                        actions: 'startSignIn'
                    }
                }
            },
            signIn: {
                meta: {
                    title: 'Sign In',
                    composite: {
                        id: 'signInForm',
                        component: 'oForm'
                    },
                    buttons: [
                        {
                            type: 'BACK',
                            label: 'Back',
                            disabled: true
                        },
                        {
                            type: 'NEXT',
                            label: 'Authenticate',
                            disabled: false
                        }
                    ]
                },
                on: {
                    BACK: 'notAuthenticated',
                    NEXT: {
                        target: 'authenticated',
                        actions: 'authenticate'
                    }
                }
            },
            authenticated: {
                meta: {
                    title: 'Authenticated',
                    buttons: [
                        {
                            type: 'LOGOUT',
                            label: 'Logout',
                            disabled: false
                        }
                    ]
                },
                on: {
                    LOGOUT: {
                        target: 'notAuthenticated',
                        actions: 'logout'
                    }
                }
            }
        }
    },
    {
        actions: {
            startSignIn: (context, event) => {
                console.log('Starting sign in process...');
            },
            authenticate: (context, event) => {
                console.log('Authenticating...');
            },
            logout: (context, event) => {
                console.log('Logging out...');
            },
            setValidated: (context, event) => {
                console.log('Form is validated');
                // Add your logic here to update the visual representation
            },
            setNotValidated: (context, event) => {
                console.log('Form is not validated');
                // Add your logic here to update the visual representation
            }
        }
    }
)