/*
 * Copyright (c) Microsoft Corporation. All rights reserved.
 * Licensed under the MIT License.
 */

/**
 * Makes a GET request using authorization header. For more, visit:
 * https://tools.ietf.org/html/rfc6750
 * @param {string} accessToken 
 * @param {string} apiEndpoint
 * @param {string} method
 * @param {json} body
 */
export const callApiWithToken = async(accessToken, apiEndpoint, method = "GET", headers = new Headers(), body) => {
    //const headers = new Headers();
    const bearer = `Bearer ${accessToken}`;

    headers.append("Authorization", bearer);

    const options = {
        method: method,
        headers: headers,
        body: JSON.stringify(body)
    };

    return fetch(apiEndpoint, options)
        .then(response => response.json())
        .catch(error => console.log(error));
}

import { useEffect, useState } from "react";

import { MsalAuthenticationTemplate, useMsal, useAccount } from "@azure/msal-react";
import { InteractionType, EventType } from "@azure/msal-browser";

import { loginRequest, protectedResources } from "../authConfig";
import { callApiWithToken } from "../fetch";
import Button from "react-bootstrap/Button";
import Card from "react-bootstrap/Card";
import Row from "react-bootstrap/Row";
import Col from "react-bootstrap/Col";

const body = {
    "queries": [
        {
            "query": "EVALUATE ALL(Sheet1)"
        }
    ]
}

const bgColors = ["#219ebc","#023047","#fb8500"];

const KPIContent = () => {

    /**
     * useMsal is hook that returns the PublicClientApplication instance, 
     * an array of all accounts currently signed in and an inProgress value 
     * that tells you what msal is currently doing. For more, visit: 
     * https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-react/docs/hooks.md
     */
    const { instance, accounts, inProgress } = useMsal();
    const account = useAccount(accounts[0] || {});
    const [datasetData, setDatasetData] = useState(null);



    useEffect(() => {


        /**
         * In order to get the direct response from calling acquireTokenRedirect() API, register an event
         * and listen for ACQUIRE_TOKEN_SUCCESS. Make sure to remove the event once component unmounts. For more, 
         * visit: https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-react/docs/events.md
         */

        // This will be run on component mount
        const callbackId = instance.addEventCallback((message) => {
            // This will be run every time an event is emitted after registering this callback
            if (message.eventType === EventType.ACQUIRE_TOKEN_SUCCESS) {
                const response = message.payload;
                const headers = new Headers();
                headers.append("Content-Type", "application/json");
                // Do something with the response
                callApiWithToken(response.accessToken, protectedResources.pbiDataset.endpoint + '/ac6ea259-x1e4-4329-8ae4-fc0368fa3668/executeQueries', "POST", headers, body)
                    .then(response => { console.log("requesting"); setDatasetData(response); console.log(response); });
            }
        });


        return () => {
            // This will be run on component unmount
            if (callbackId) {
                instance.removeEventCallback(callbackId);

            }

        }
    }, [account, inProgress, instance]);

    const requestDatasetData = () => {
        instance.acquireTokenRedirect({
            scopes: protectedResources.pbiDataset.scopes,
        }).catch(error => console.log(error))
    }

    return (
        <>
            <Row className="align-items-center mb-5">{datasetData ? datasetData.results[0].tables[0].rows.map((kpi, i) => {
                return <Col className="d-flex justify-content-center" key={i}>
                    <Card style={{ color:"white", width: '18rem', backgroundColor: bgColors[i] }}>
                        <Card.Body>
                            <Card.Title>${kpi["Sheet1[Sales]"]}</Card.Title>
                            <Card.Subtitle className="mb-2 text">Year: {kpi["Sheet1[Year]"]}</Card.Subtitle>
                            <Card.Text>*Sales for {kpi["Sheet1[Customers]"]} customers.</Card.Text>
                        </Card.Body>
                    </Card></Col>
            }) : "nothing yet"}</Row>
            <div className="row justify-content-center">
                <Button variant="secondary" onClick={requestDatasetData}>Request Dataset Data</Button>
            </div>
        </>
    );
};

/**
 * The `MsalAuthenticationTemplate` component will render its children if a user is authenticated 
 * or attempt to sign a user in. Just provide it with the interaction type you would like to use 
 * (redirect or popup) and optionally a [request object](https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/request-response-object.md)
 * to be passed to the login API, a component to display while authentication is in progress or a component to display if an error occurs. For more, visit:
 * https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-react/docs/getting-started.md
 */
export const KPIs = () => {
    const authRequest = {
        ...loginRequest
    };

    return (
        <MsalAuthenticationTemplate
            interactionType={InteractionType.Popup}
            authenticationRequest={authRequest}
        >
            <KPIContent />
        </MsalAuthenticationTemplate>
    )
};