import {JSX, useState} from 'react';
import {useAppDispatch} from './store';
import {authenticateCredentialsThunk} from './store/slices/Authentication.slice';

export default function App(): JSX.Element {
  const dispatch = useAppDispatch();
  const [applicationId, setApplicationId] = useState<string>('phenixrts.com-alex.zinn');
  const [secret, setSecret] = useState<string>('AMAsDzr.dIuGMZ.Zu52Dt~MQvP!DZwYg');

  const handleAuthenticate = async () => {
    const response = await dispatch(authenticateCredentialsThunk({applicationId, secret}));
    console.log(`${new Date().toISOString()} AuthenticationResponse [%o]`, response.payload);
  };

  return (
    <>
      <h1>Hello World</h1>
      <div>
        <input type="text" value={applicationId} onChange={e => setApplicationId(e.target.value)} />
        <br />
        <input type="text" value={secret} onChange={e => setSecret(e.target.value)} />
      </div>
      <button onClick={handleAuthenticate}>Authenticate</button>
    </>
  );
}
