import React from 'react';
import { useAuthorizer } from '@authorizerdev/authorizer-react';

export default function Dashboard() {
  const [loading, setLoading] = React.useState(false);
  const { user, setToken, graphQlRef } = useAuthorizer();

  const onLogout = async () => {
    setLoading(true);
    await graphQlRef
      .mutation(
        `
          mutation {
            logout {
              message
            }
          }
        `
      )
      .toPromise();
    setToken(null);
    setLoading(false);
  };

  return (
    <div>
      <h1>Hey 👋,</h1>
      <p>Thank you for joining authorizer demo app.</p>
      <p>
        Your email address is{' '}
        <a href={`mailto:${user?.email}`} style={{ color: '#3B82F6' }}>
          {user?.email}
        </a>
      </p>

      <br />
      {loading ? (
        <h3>Processing....</h3>
      ) : (
        <h3
          style={{
            color: '#3B82F6',
            cursor: 'pointer',
          }}
          onClick={onLogout}
        >
          Logout
        </h3>
      )}
    </div>
  );
}