import React from 'react';
import { CredentialResponse, GoogleLogin } from '@react-oauth/google';

interface LoginResponse {
    id: number
}

interface User {
    id: Number,
    elements: Element[],
}

interface Element {
    id: Number,
    userId: Number,
    name: string,
    state: ElementState,
}

enum ElementState {
    HasColor,
    HasIcon,
}

function App() {
    const responseMessage = async (googleResponse: CredentialResponse) => {
        console.log(googleResponse);
        const url: string = "/auth/login";
        const body = {
            "googleToken": googleResponse.credential
        };

        const response = await fetch(url, {
            method: "POST",
            credentials: "include",
            mode: "cors",
            headers: {
                "Content-Type": "application/json"
            },
            body: JSON.stringify(body),
        });
        if (!response.ok) {
            console.log("Backend conection problem");
            return;
        }

        const user = await response.json() as LoginResponse;
        console.log(user);
    };

    return (
        <div className="App">
            <GoogleLogin onSuccess={responseMessage} />
        </div>
    );
}

export default App;