/*! Copyright [Amazon.com](http://amazon.com/), Inc. or its affiliates. All Rights Reserved.
SPDX-License-Identifier: Apache-2.0 */
import {
  Container,
  ContentLayout,
  Header,
  SpaceBetween,
  {{#typeSafeApis.0}}
  // Spinner,
  {{/typeSafeApis.0}}
} from "@cloudscape-design/components";
{{#hasApis}}
import { useEffect } from "react";
import { useNavigate } from "react-router-dom";
{{/hasApis}}
{{#typeSafeWebSocketApis.0}}
// import { useOnSendNotification, useDefaultApiWebSocketClient as use{{{apiNameSafe}}}WebSocketClient } from "{{hooksPackage}}";
{{/typeSafeWebSocketApis.0}}
{{#typeSafeApis.0}}
// import { useSayHello } from "{{hooksPackage}}";
{{/typeSafeApis.0}}

/**
 * Component to render the home "/" route.
 */
const Home: React.FC = () => {
  {{#hasApis}}
  const navigate = useNavigate();
  useEffect(() => void navigate("/apiExplorer"), []);
  {{/hasApis}}

  {{#typeSafeApis.0}}
  // const sayHello = useSayHello({ name: "World" });
  {{/typeSafeApis.0}}

  {{#typeSafeWebSocketApis.0}}
  // const webSocketClient = use{{{apiNameSafe}}}WebSocketClient();

  // useOnSendNotification((notification) => {
  //   console.log(`Received notification: ${notification.message}`);
  // }, []);
  {{/typeSafeWebSocketApis.0}}

  return (
    <ContentLayout header={<Header>Home</Header>}>
      <SpaceBetween size="l">
        <Container>
          Hello World!
          {{#typeSafeApis.0}}
          {/* {sayHello.isLoading ? <Spinner /> : <>{sayHello.data?.message}</>} */}
          {{/typeSafeApis.0}}
        </Container>
      </SpaceBetween>
    </ContentLayout>
  );
};

export default Home;