import {
    useEffect,
    useLayoutEffect
} from "react";
import {
    Image,
    View
} from "react-native";
import stylesheet from "./stylesheet";
import {
    NCoreUIKitLocalize,
    NCoreUIKitTheme,
    PaletteSwitcher,
    NCoreUIKitMenu,
    PageContainer,
    ThemeSwitcher,
    AvatarGroup,
    RowCard,
    Button,
    Avatar,
    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 {
    ChevronRight
} from "lucide-react-native";
import packageJSON from "../../../../package.json";

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

    const {
        localize
    } = NCoreUIKitLocalize.useContext();

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

    useEffect(() => {
        NCoreUIKitMenu.load({
            buttons: [{
                title: "Ana Sayfa"
            }],
            id: "test"
        });
    }, []);

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

    return <PageContainer
        scrollViewStyle={stylesheet.container}
        isScrollable={true}
        scrollViewProps={{
            showsHorizontalScrollIndicator: false,
            showsVerticalScrollIndicator: false,
            contentContainerStyle: {
                backgroundColor: colors.content.container.default,
                ...stylesheet.contentContainer
            }
        }}
    >
        <Button
            title="Open Menu"
            onPress={() => {
                NCoreUIKitMenu.open({
                    id: "test"
                });
            }}
        />
        <PaletteSwitcher/>
        <ThemeSwitcher/>
        <View
            style={{
                justifyContent: "center",
                alignItems: "center",
                maxWidth: 850,
                width: "100%"
            }}
        >
            <Image
                source={{
                    uri: "https://ncore.nibgat.space/assets/images/ncorelogo.png"
                }}
                style={{
                    height: 300,
                    width: 300
                }}
            />
            <Text
                variant="displayMediumSize"
                style={{
                    marginBottom: spaces.spacingMd,
                    textAlign: "center"
                }}
            >
                {localize("ncore-design-system")}
            </Text>
            <Text
                variant="headlineLargeSize"
                style={{
                    marginBottom: spaces.spacingLg,
                    textAlign: "center"
                }}
            >
                {localize("ui-kit-library")}
            </Text>
            <Text
                variant="bodyLargeSize"
                style={{
                    marginBottom: spaces.spacingMd,
                    textAlign: "center"
                }}
            >
                {localize("ncore-about")}
            </Text>
            <Text
                color="low"
                style={{
                    marginBottom: spaces.spacingMd
                }}
            >
                {localize("version")}: {packageJSON.version}
            </Text>
            <RowCard
                title={localize("text")}
                rightIcon={({
                    customColor,
                    color,
                    size
                }) => {
                    return <ChevronRight
                        color={customColor ? customColor : colors.content.icon[color]}
                        size={size}
                    />;
                }}
                onPress={() => {
                    navigation.navigate("TextPage");
                }}
            />
        </View>
    </PageContainer>;
};
export default Home;