import React from "react";
import { Scene } from "@roku-web-cloud-sdk/components/scene.jsx";
import { Label } from "@roku-web-cloud-sdk/components/label.jsx";
import { useConfig, useAsyncEffect } from "@roku-cloud-sdk/roku-hooks";
import { getConfig } from "./config/config.mjs";

import background from "./img/background.png";

export { appMain } from "./app.mjs";

const MainScene = ({ app }) => {
    const config = useConfig({ getConfig });

    /*
    useAsyncEffect(async fetch => {
        // Fetch is only available with in useAsyncEffect. Make ajax calls here..
    }, []);
    */

    return (
        <Scene backgroundUri={background}>
            <Scene.Logo>
                <Label style={{ font: "LargeSystemFont" }}>Your App Title</Label>
            </Scene.Logo>
            <Scene.Clock />
            <Scene.Body>Your app goes here!</Scene.Body>
            <Scene.Options adjacent />
        </Scene>
    );
};

// main entry point is called once per session
export const main = ({ app }) => {
    return <MainScene app={app} />;
};
