import {
    useRef
} from "react";
import {
    StyleSheet,
    View
} from "react-native";
import {
    type IBottomSheetRef,
    setupNCoreUIKit,
    NCoreUIKitTheme,
    BottomSheet,
    SelectBox,
    Button,
    Text
} from "ncore-ui-kit-mobile";
import {
    useFonts
} from "expo-font";
import TextInput from "../../src/components/textInput";
import packageJSON from "../package.json";

const NCoreUIKitBase = setupNCoreUIKit({
    initialSelectedGapPropagation: "compact",
    initialSelectedTheme: "dark"
});

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

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

    const bottomSheetRef = useRef<IBottomSheetRef>(null);

    return <View
        style={[
            styles.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{packageJSON.version}</Text>
        <Button
            onPress={() => {
                bottomSheetRef.current?.open();
            }}
            type="success"
            title="Ahmet"
            variant="filled"
        />
        <BottomSheet
            isCanFullScreenOnSwipe={true}
            ref={bottomSheetRef}
            snapPoint={300}
        >
            <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>;
};

const ContextAPI = () => {
    /* eslint-disable @typescript-eslint/no-require-imports */
    const [loaded] = useFonts({
        "Geist-ExtraLight": require("./assets/fonts/Geist-ExtraLight.ttf"),
        "Geist-ExtraBold": require("./assets/fonts/Geist-ExtraBold.ttf"),
        "Geist-SemiBold": require("./assets/fonts/Geist-SemiBold.ttf"),
        "Geist-Regular": require("./assets/fonts/Geist-Regular.ttf"),
        "Geist-Medium": require("./assets/fonts/Geist-Medium.ttf"),
        "Geist-Black": require("./assets/fonts/Geist-Black.ttf"),
        "Geist-Light": require("./assets/fonts/Geist-Light.ttf"),
        "Geist-Bold": require("./assets/fonts/Geist-Bold.ttf"),
        "Geist-Thin": require("./assets/fonts/Geist-Thin.ttf")
    });

    if (!loaded) return null;

    return <NCoreUIKitBase.Provider>
        <App/>
    </NCoreUIKitBase.Provider>;
};

const styles = StyleSheet.create({
    container: {
        justifyContent: "center",
        alignItems: "center",
        flex: 1
    }
});
export default ContextAPI;