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

const RootStack = createNativeStackNavigator();
const ComponentsStack = createNativeStackNavigator();

const ComponentsNav = () => {
    return <ComponentsStack.Navigator
        initialRouteName="TextPage"
        screenOptions={{
            headerShown: true
        }}
    >
        <ComponentsStack.Screen
            name="TextPage"
            component={TextPage}
        />
    </ComponentsStack.Navigator>;
};

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

    const {
        localize
    } = NCoreUIKitLocalize.useContext();

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

    useEffect(() => {
        const currentMenuStatus = Platform.OS === "web" ? window.localStorage.getItem("main-menu-status") : "false";

        NCoreUIKitEmbeddedMenu.load({
            isCollapse: currentMenuStatus === "true" ? true : false,
            isWorkWithSafeAreaView: false,
            siteLogoProps: {
                isShowIcon: false,
                title: localize("menu")
            },
            buttons: [
                {
                    redirectMain: "Home",
                    isUseLocalize: true,
                    title: "home",
                    icon: ({
                        color
                    }) => <HomeIcon
                        color={colors.content.icon[color]}
                    />
                },
                {
                    redirectMain: "Components",
                    isUseLocalize: true,
                    isCollapsible: true,
                    title: "components",
                    icon: ({
                        color
                    }) => <ComponentIcon
                        color={colors.content.icon[color]}
                    />,
                    subButtons: [
                        {
                            redirectMain: "Components",
                            redirectSub: "TextPage",
                            title: "Text"
                        }
                    ]
                }
            ],
            isAutoClosed: true,
            id: "main-menu"
        });

        NCoreUIKitEmbeddedMenu.addEventListener("state", updateStorage);
    }, []);

    const updateStorage = () => {
        const data = NCoreUIKitEmbeddedMenu.state.data;

        if(Platform.OS === "web" && data && data.length) {
            const currentMenu = data.find(dI => dI.id === "main-menu");

            if(currentMenu) {
                window.localStorage.setItem("main-menu-status", String(currentMenu.isCollapse));
            }
        }
    };

    return <MainHeader
        isWorkWithSeperator={true}
        siteLogoProps={{
            imageUrl: "http://ncore.nibgat.space/assets/images/ncorelogo.png",
            onPress: () => {
                navigation.navigate("Home");
            },
            imageProps: {
                resizeMode: "stretch"
            },
            subTitle: "Design System - UI Kit",
            title: "NİBGAT® | NCore",
            isWorkWithAction: true,
            isWorkWithFlex1: true
        }}
        isWorkWithSticky={true}
        glassEffect={5}
    >
        <NCoreUIKitEmbeddedMenu.Render
            navigation={navigation as unknown as NCoreUIKit.Navigation}
            id="main-menu"
        >
            <RootStack.Navigator
                initialRouteName="Home"
                screenOptions={{
                    headerShown: false
                }}
            >
                <RootStack.Screen
                    component={Home}
                    name="Home"
                />
                <RootStack.Screen
                    component={ComponentsNav}
                    name="Components"
                />
            </RootStack.Navigator>
        </NCoreUIKitEmbeddedMenu.Render>
    </MainHeader>;
};

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