/**
 * Copyright (c) Microsoft Corporation. All rights reserved.
 * Licensed under the MIT License.
 *
 * This component is used to display the required
 * privacy statement which can be found in a link in the
 * about tab.
 */

import React, { useEffect, useState } from "react";
import {
  Avatar,
  Button,
  Center,
  Flex,
  IconButton,
  Link,
  Table,
  Tbody,
  Td,
  Text,
  Th,
  Thead,
  Tr,
  useDisclosure,
} from "@chakra-ui/react";
import { Roadmap } from "./Roadmap";
import * as microsoftTeams from "@microsoft/teams-js";
export function About() {
  const [ssoToken, setSsoToken] = useState();
  const [context, setContext] = useState<microsoftTeams.Context>();
  const [error, setError] = useState();

  const ssoLoginSuccess = async (result: any) => {
    setSsoToken(result);
    console.log({ result });
    // this.exchangeClientTokenForServerToken(result);
  };

  const ssoLoginFailure = (error: any) => {
    setError(error);
    console.error("SSO failed: ", error);
  };
  let authTokenRequestOptions = {
    successCallback: ssoLoginSuccess,
    failureCallback: ssoLoginFailure,
  };
  useEffect(() => {
    microsoftTeams.initialize();
    microsoftTeams.getContext((_context) => {
      setContext(_context);
    });
    console.log("Starting auth");
    microsoftTeams.authentication.getAuthToken(authTokenRequestOptions);
    console.log("finished Auth");
  }, []);

  return (
    <Center w="100vw" h="100vh">
      {/* <Roadmap /> */}
      Hello world
      {ssoToken} token {error}
    </Center>
  );
}