// import { createMachine, assign } from 'xstate';

// const initialise = async (context: PdfContext, event: any) => new Promise( async (resolve, reject) => {
    
//     let url = await loadFile( event );        

//     resolve( { 
//         ...context, 
//         file: event.file,
//         url
//     } );

// });

// const loadFile = async ( event: any ): Promise<any> => new Promise((resolve, reject) => {
     
//     const fr = new FileReader();
    
//     fr.addEventListener('load', async () => {
//         resolve( fr.result )
//     });
//     fr.addEventListener('error', (err) => reject(err));

//     fr.readAsDataURL(event.file);

// });

// export type PdfContext = {
//     file: File | null;
//     url: any;
// };

// type PdfEvent = 
//     { type: 'FETCH' } |
//     { type: 'SUCCESS'; file: File  } |
//     { type: 'VIEW'; file: File  } |
//     { type: 'EXIT' } |
//     { type: 'REMOVE', event: any } |
//     { type: 'SUBMIT' } |
//     { type: 'RETRY'; file: File  } ;

// export const pdfMachine = () => createMachine<PdfContext, PdfEvent>(
//     {
//         id: 'fetch',
//         initial: 'idle',
//         context: {
//             file: null,
//             url: ''
//         },
//         states: {
//             idle: {
//                 on: {
//                     FETCH: 'loading'
//                 }
//             },
//             loading: {
//                 on: {
//                     SUCCESS: {
//                         target: 'initialising',
//                     }
//                 }
//             },
//             initialising: {
//                 invoke: {
//                     id: 'initialise',
//                     src: initialise,
//                     onDone: {
//                         target: 'loaded',
//                         actions: assign((context, event) => ({ ...context, ...event.data }))
//                     }
//                 },
//             },
//             loaded: {
//                 on: {
//                     VIEW: 'viewing',
//                     SUBMIT: {
//                         target: 'success'
//                     },
//                     // REMOVE: {
//                     //     target: 'idle',
//                     //     actions: assign({
//                     //         file: null,
//                     //         url: null
//                     //     })
//                     // }
//                 }                
//             },
//             viewing: {
//                 on: {
//                     EXIT: 'loaded'
//                 }
//             },
//             success: {
//                 // type: 'final',
//                 // invoke: {
//                 //     id: 'saveFileAsync',
//                 //     src: saveFileAsync,
//                 //     onDone: {
//                 //       target: 'loaded',
//                 //       actions: assign(( context: PdfContext, event: any ) => {
//                 //             const files = [ ...context.files.filter(f => f.name !== event.data.name), event.data  ];
//                 //             return { ...context, files };
//                 //         })
//                 //     },
//                 // }
//             },
//             failure: {
//                 on: {
//                     // RETRY: {
//                     //     target: 'uploading'
//                     // }
//                 }
//             }
//         }
//     },
//     {
//         actions: { initialise }
//     }
// );