import {
    useEffect
} from "react";
import {
    View
} from "react-native";
import type RootStackParamList from "./type";
import stylesheet from "./stylesheet";
import {
    NCoreUIKitEmbeddedMenu,
    NCoreUIKitTheme
} from "ncore-ui-kit";
import {
    NavigationContainer,
    useNavigation
} from "@react-navigation/native";
import {
    type NativeStackNavigationProp,
    createNativeStackNavigator
} from "@react-navigation/native-stack";
import {
    HomeIcon
} from "lucide-react-native";
import Home from "../pages/home";
import TextPage from "../pages/text";

const RootStack = createNativeStackNavigator();

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

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

    useEffect(() => {
        NCoreUIKitEmbeddedMenu.load({
            siteLogoProps: {
                imageUrl: "https://www.nibgat.com/assets/images/logo.png",
                onPress: () => {
                    navigation.navigate("Home");
                },
                imageProps: {
                    resizeMode: "stretch"
                },
                imageSpace: "spacingLg",
                isWorkWithAction: true,
                subTitle: "Core Tech",
                title: "NİBGAT® Deneme Anonim Ticaret Limited Şti."
            },
            buttons: [
                {
                    redirectMain: "Home",
                    title: "Ana Sayfa",
                    icon: ({
                        color
                    }) => <HomeIcon
                        color={colors.content.icon[color]}
                    />
                },
                {
                    redirectMain: "Home",
                    isCollapsible: true,
                    title: "Ana Sayfa",
                    icon: ({
                        color
                    }) => <HomeIcon
                        color={colors.content.icon[color]}
                    />,
                    subButtons: [
                        {
                            title: "Text",
                            redirectMain: "TextPage"
                        }
                    ]
                },
                {
                    redirectMain: "Text",
                    isCollapsible: true,
                    title: "Deneme",
                    icon: ({
                        color
                    }) => <HomeIcon
                        color={colors.content.icon[color]}
                    />,
                    subButtons: [
                        {
                            title: "Noliii",
                            redirectMain: "Home"
                        }
                    ]
                },
                {
                    title: "Text",
                    redirectMain: "TextPage"
                }
            ],
            id: "main-menu"
        });
    }, []);

    return <View
        style={[
            stylesheet.container
        ]}
    >
        <NCoreUIKitEmbeddedMenu.Render
            navigation={navigation as unknown as NCoreUIKit.Navigation}
            id="main-menu"
        />
        <RootStack.Navigator
            initialRouteName="Home"
        >
            <RootStack.Screen
                name="Home"
                component={Home}
            />
            <RootStack.Screen
                name="TextPage"
                component={TextPage}
            />
        </RootStack.Navigator>
    </View>;
};

const Navigation = () => {
    return <NavigationContainer
        linking={{
            prefixes: [
                "http://localhost:3000",
                "https://ncore.nibgat.space"
            ],
            config: {
                screens: {
                    Home: "",
                    TestSubPage: "text"
                }
            }
        }}
    >
        <RootNav/>
    </NavigationContainer>;
};
export default Navigation;