import React, { useEffect } from 'react';
import { Button } from 'primereact/button';
import { Card } from 'primereact/card';
import { Configuration } from '../services';

export const Login: React.FC = () => {
  // reset every old token
  useEffect(() => sessionStorage.removeItem('token'), []);

  const redirectToVatsim = () => {
    const url = [
      Configuration.vatsim.authorizeUrl,
      `?client_id=${Configuration.vatsim.clientId}`,
      `&redirect_uri=http://localhost:3000/auth/vatsim`,
      `&response_type=code`,
      `&scope=full_name+vatsim_details`,
      `&approval_prompt=auto`,
    ].join('');
    window.location.replace(url);
  }

  const footer = (
    <span>
      <Button
        label='Login with VATSIM SSO'
        className='p-button p-button-success'
        onClick={redirectToVatsim}
      />
    </span>
  );

  return (
    <>
      <Card
        title='Arrival MANager'
        className='login-card text-center surface-200'
        style={{ width: '25rem' }}
        footer={footer}>
      </Card>
    </>
  );
};