import {
    useRef
} from "react";
import {
    View
} from "react-native";
import stylesheet from "./stylesheet";
import {
    type IBottomSheetRef,
    getNCoreUIKitVersion,
    NCoreUIKitTheme,
    BottomSheet,
    TextInput,
    SelectBox,
    Button,
    Text
} from "ncore-ui-kit-mobile";
import {
    useNavigation
} from "@react-navigation/native";

const X = [{
    t: "x",
    p: "y",
    n: 90
}];

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

    const bottomSheetRef = useRef<IBottomSheetRef>(null);

    const navigation = useNavigation();

    return <View
        style={[
            stylesheet.container,
            {
                backgroundColor: colors.content.container.default
            }
        ]}
    >
        <SelectBox
            keyExtractor={(data, index) => `${data.t}-${index}`}
            titleExtractor={(data) => data.t}
            subTitle="Deneme Subtitle"
            hintText="Test deneme"
            isShowSubTitle={true}
            initialSelectedItems={[{
                __title: X[0]?.t as string,
                __key: `${X[0]?.t}-0`,
                __originalIndex: 0
            }]}
            title="Deneme Box"
            isRequired={true}
            data={X}
        />
        <TextInput
            variant="hidden"
        />
        <Text>Version: v{getNCoreUIKitVersion()}</Text>
        <Button
            onPress={() => {
                navigation.navigate("TestSubPage");
            }}
            type="success"
            title="Open Test Sub Page"
            variant="filled"
        />
        <Button
            onPress={() => {
                bottomSheetRef.current?.open();
            }}
            type="success"
            title="Open BottomSheet"
            variant="filled"
        />
        <BottomSheet
            isWorkAsFullScreen={true}
            ref={bottomSheetRef}
            renderHeader={() => {
                return <View
                    style={[
                        {
                            backgroundColor: "blue",
                            padding: 20
                        }
                    ]}
                >
                    <Text>Burası header.</Text>
                </View>;
            }}
            // snapPoint={300}
            key="ahmet"
        >
            <Button
                onPress={() => {
                    navigation.navigate("TestSubPage");
                }}
                title="Git."
            />
            <View
                style={{
                    backgroundColor: "red",
                    height: 2400
                }}
            />
            <Text>Deneme 123</Text>
            <Text>Deneme 123</Text>
            <Text>Deneme 123</Text>
            <Text>Deneme 123</Text>
            <Text>Deneme 123</Text>
            <Text>Deneme 123</Text>
            <Text>Deneme 123</Text>
        </BottomSheet>
    </View>;
};
export default Home;