import {
    StyleSheet,
    View
} from "react-native";
import {
    setupNCoreUIKit,
    NCoreUIKitTheme,
    Button,
    Text
} from "ncore-ui-kit-mobile";
import {
    useFonts
} from "expo-font";

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

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

    return <View
        style={[
            styles.container,
            {
                backgroundColor: colors.content.container.default
            }
        ]}
    >
        <Text>Result: </Text>
        <Button
            onPress={() => {
            }}
            type="success"
            title="Ahmet"
            variant="ghost"
        />
    </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;