import {
    useLayoutEffect
} from "react";
import {
    Image,
    View
} from "react-native";
import stylesheet from "./stylesheet";
import {
    NCoreUIKitLocalize,
    NCoreUIKitTheme,
    PageContainer,
    Seperator,
    Button,
    Text
} from "ncore-ui-kit";
import {
    useNavigation
} from "@react-navigation/native";
import type RootStackParamList from "../../navigation/type";
import type {
    NativeStackNavigationProp
} from "@react-navigation/native-stack";
import packageJSON from "../../../../package.json";

const Home = () => {
    const {
        activeTheme,
        spaces,
        colors
    } = NCoreUIKitTheme.useContext();

    const {
        localize
    } = NCoreUIKitLocalize.useContext();

    const navigation = useNavigation<NativeStackNavigationProp<RootStackParamList>>();

    useLayoutEffect(() => {
        navigation.setOptions({
            headerShown: false
        });
    }, []);

    const isDarkTheme = activeTheme.indexOf("dark") !== -1;

    return <PageContainer
        scrollViewProps={{
            contentContainerStyle: {
                backgroundColor: colors.content.container.default,
                ...stylesheet.contentContainer
            },
            showsHorizontalScrollIndicator: false,
            showsVerticalScrollIndicator: true
        }}
        scrollViewStyle={stylesheet.container}
        isScrollable={true}
    >
        <View
            style={stylesheet.maxContentContainer}
        >
            <Image
                source={{
                    uri: isDarkTheme ? "http://ncore.nibgat.space/assets/images/darklogo.png" : "https://ncore.nibgat.space/assets/images/ncorelogo.png"
                }}
                style={stylesheet.logoImage}
            />
            <Text
                style={[
                    stylesheet.centeredText,
                    {
                        marginBottom: spaces.spacingMd
                    }
                ]}
                variant="displayMediumSize"
            >
                {localize("ncore-design-system")}
            </Text>
            <Text
                style={[
                    stylesheet.centeredText2,
                    {
                        marginBottom: spaces.spacingLg
                    }
                ]}
                variant="headlineSmallSize"
            >
                {localize("ui-kit-library")}
            </Text>
            <Text
                style={[
                    stylesheet.centeredText3,
                    {
                        marginBottom: spaces.spacingMd
                    }
                ]}
            >
                {localize("ncore-about")}
            </Text>
            <Seperator />
            <Text
                style={{
                    marginBottom: spaces.spacingMd,
                    marginTop: spaces.spacingMd
                }}
                variant="bodySmallSize"
                color="low"
            >
                {localize("version")}: {packageJSON.version}
            </Text>
            <Button
                onPress={() => {
                    navigation.navigate("GettingStarted");
                }}
                title={localize("getting-started")}
                spreadBehaviour="free"
                size="small"
            />
        </View>
    </PageContainer>;
};
export default Home;
