import {
    useLayoutEffect,
    useRef
} from "react";
import {
    View
} from "react-native";
import stylesheet from "./stylesheet";
import {
    NCoreUIKitLocalize,
    NCoreUIKitTheme,
    PageContainer,
    EmbeddedMenu,
    CodeViewer,
    Button,
    Header,
    Text
} from "ncore-ui-kit";
import {
    useNavigation
} from "@react-navigation/native";
import type RootStackParamList from "../../../navigation/type";
import type {
    NativeStackNavigationProp
} from "@react-navigation/native-stack";
import type {
    IEmbeddedMenuRef
} from "ncore-ui-kit";
import {
    SettingsIcon,
    HomeIcon
} from "lucide-react-native";

const EmbeddedMenuPage = () => {
    const {
        localize
    } = NCoreUIKitLocalize.useContext();

    const {
        spaces
    } = NCoreUIKitTheme.useContext();

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

    const menuRef = useRef<IEmbeddedMenuRef>(null);

    useLayoutEffect(() => {
        navigation.setOptions({
            header: () => <Header
                title={localize("embeddedMenu-title")}
                isWrapSafeareaContext={false}
                navigation={navigation}
                isGoBackEnable={true}
            />,
            headerShown: true
        });
    }, []);

    return <View
        style={stylesheet.container}
    >
        <EmbeddedMenu
            navigation={navigation as unknown as NCoreUIKit.Navigation}
            buttons={[
                {
                    title: localize("embeddedMenu-settings"),
                    icon: ({
                        color
                    }) => <SettingsIcon
                        color={color}
                    />
                },
                {
                    title: localize("embeddedMenu-home"),
                    icon: ({
                        color
                    }) => <HomeIcon
                        color={color}
                    />
                }
            ]}
            id="embedded-menu-page-example"
            ref={menuRef}
        />
        <PageContainer
            scrollViewProps={{
                contentContainerStyle: stylesheet.scrollContent
            }}
            isWorkWithHeaderSpace={false}
            scrollViewStyle={[
                stylesheet.container
            ]}
            isScrollable={true}
        >
            <View
                style={[
                    stylesheet.contentContainer
                ]}
            >
                <Text
                    style={stylesheet.descText}
                    variant="bodyMediumSize"
                    color="mid"
                >
                    {localize("embeddedMenu-desc")}
                </Text>
                <Button
                    title={localize("embeddedMenu-openMenu")}
                    onPress={() => menuRef.current?.open()}
                    spreadBehaviour="stretch"
                />
                <View
                    style={{
                        marginVertical: spaces.spacingMd
                    }}
                >
                    <Text
                        style={{
                            marginBottom: spaces.spacingSm
                        }}
                        variant="headlineSmallSize"
                    >
                        {localize("usage")}
                    </Text>
                    <CodeViewer
                        code={"import {\n    EmbeddedMenu\n} from \"ncore-ui-kit\";\n\n<EmbeddedMenu\n    buttons={[\n        { title: \"Settings\" },\n        { title: \"Home\" }\n    ]}\n/>"}
                        language="tsx"
                    />
                </View>
            </View>
        </PageContainer>
    </View>;
};
export default EmbeddedMenuPage;
