import React from 'react';
import { Page } from '../Page';
import { Dashboard } from './Dashboard';
import { useUserProfileQuery } from '../../gql/queries/profile';
import { WithLoader } from '../WithLoader';

export function HomePage() {
  const { data, loading } = useUserProfileQuery();

  const { userProfile } = (data || {});

  return (
    <Page title={userProfile ? 'Tableau de bord' : 'Accueil'}>
      <div className="container is-fluid">
        <section className="mt-5">
          <WithLoader loading={loading}>
          {
            userProfile ?
            <Dashboard /> :
            <div className="columns">
              <div className="column is-4 is-offset-4">
                <div className="box">
                  <p>Veuillez vous authentifier.</p>
                </div>
              </div>
            </div> 
          }
          </WithLoader>
        </section>
      </div>
    </Page>
  );
}