import * as React from "react";
import { RouteProp } from '@react-navigation/core';
import { Dialogs } from '@nativescript/core';
import { NativeStackNavigationProp } from "react-nativescript-navigation";
import { MainStackParamList } from "./NavigationParamList";

type FirstScreenProps = {
    route: RouteProp<MainStackParamList, "first">,
    navigation: NativeStackNavigationProp<MainStackParamList, "first">,
}

export function First({ navigation }: FirstScreenProps) {
    function onButtonTap() {
        navigation.navigate('second');
    }

    return (
        <gridLayout
            width={"100%"}
            height={"100%"}
            rows={"*, auto, auto, *"}
            columns={"*, 200, *"}
        >
            <label
                row={1}
                col={1}
                className="info"
                textAlignment={"center"}
                fontSize={24}
            >
                <formattedString>
                    <span className="fas" text="&#xf135;" />
                    <span> Hello World!</span>
                </formattedString>
            </label>
            <button
                row={2}
                col={1}
                fontSize={24}
                textAlignment={"center"}
                onTap={() => Dialogs.alert("Tap received!")}
            >
                Tap me for an alert
            </button>
            <button onTap={onButtonTap} fontSize={24} text={"Go to next screen"} />
        </gridLayout>
    );
}