import { NapContextProvider, NAPEventType, useNap } from 'nap-react-sdk';
import React from 'react';
import { v4 as UUID } from 'uuid';

const IncommingMessageComponent: React.FC = () => {
  const napContext = useNap()

  return <div> {JSON.stringify(napContext.latestIncomming)}</div>
}

const IncommingErrorsComponent: React.FC = () => {
  const napContext = useNap()
  return (
    <div >
      <p> Error received: {JSON.stringify(napContext.latestError)}</p>
    </div>
  )
}


const PostMessageComponent: React.FC = () => {
  const napContext = useNap()

  return (
    <button
      onClick={() => {
        napContext.postMessage({
          date: new Date().toString(),
          id: '123',
          event: { type: NAPEventType.SessionOpen }
        })
      }}
    >
      Send message
    </button>
  )
}

const App = () => {

  return (
    <>
      <NapContextProvider>
        <IncommingMessageComponent></IncommingMessageComponent>
		<IncommingErrorsComponent></IncommingErrorsComponent>
        <PostMessageComponent></PostMessageComponent>
      </NapContextProvider>
    </>
  )
}

export default Appp