import {
    useLayoutEffect
} from "react";
import {
    View
} from "react-native";
import stylesheet from "./stylesheet";
import {
    NCoreUIKitLocalize,
    NCoreUIKitTheme,
    SystemToolbar,
    PageContainer,
    CodeViewer,
    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 {
    SettingsIcon,
    LogOutIcon,
    UserIcon,
    MenuIcon,
    HomeIcon
} from "lucide-react-native";

const SystemToolbarPage = () => {
    const {
        radiuses,
        borders,
        spaces,
        colors
    } = NCoreUIKitTheme.useContext();

    const {
        localize
    } = NCoreUIKitLocalize.useContext();

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

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

    return <PageContainer
        scrollViewProps={{
            contentContainerStyle: stylesheet.scrollContent
        }}
        isWorkWithHeaderSpace={false}
        scrollViewStyle={[
            stylesheet.container
        ]}
        isScrollable={true}
    >
        <View
            style={[
                stylesheet.contentContainer
            ]}
        >
            <Text
                style={stylesheet.marginContainer}
                variant="bodyMediumSize"
                color="mid"
            >
                {localize("systemToolbar-desc")}
            </Text>
            <View
                style={[
                    stylesheet.previewContainer,
                    {
                        borderColor: colors.content.border.subtle,
                        marginBottom: spaces.spacingMd,
                        borderRadius: radiuses.form,
                        borderWidth: borders.line,
                        padding: spaces.spacingMd
                    }
                ]}
            >
                <SystemToolbar
                    actions={[
                        {
                            onPress: () => console.log("Settings pressed"),
                            icon: ({
                                color,
                                size
                            }) => <SettingsIcon
                                color={colors.content.icon[color]}
                                size={size}
                            />,
                            titleKey: "menu-settings"
                        },
                        {
                            content: [
                                {
                                    icon: ({
                                        color,
                                        size
                                    }) => <HomeIcon
                                        color={colors.content.icon[color]}
                                        size={size}
                                    />,
                                    onPress: () => console.log("Home"),
                                    titleKey: "menu-home"
                                },
                                {
                                    icon: ({
                                        color,
                                        size
                                    }) => <LogOutIcon
                                        color={colors.content.icon[color]}
                                        size={size}
                                    />,
                                    onPress: () => console.log("Logout"),
                                    titleKey: "close"
                                }
                            ],
                            icon: ({
                                color,
                                size
                            }) => <UserIcon
                                color={colors.content.icon[color]}
                                size={size}
                            />,
                            titleKey: "avatar-title"
                        }
                    ]}
                    icon={({
                        color,
                        size
                    }) => <MenuIcon
                        color={colors.content.icon[color]}
                        size={size}
                    />}
                    titleKey="menu-title"
                />
            </View>
            <View
                style={{
                    marginBottom: spaces.spacingMd
                }}
            >
                <Text
                    style={{
                        marginBottom: spaces.spacingSm
                    }}
                    variant="headlineSmallSize"
                >
                    {localize("usage")}
                </Text>
                <CodeViewer
                    code={"import {\n    SystemToolbar\n} from \"ncore-ui-kit\";\nimport {\n    Settings,\n    User,\n    LogOut,\n    Menu,\n    Home\n} from \"lucide-react-native\";\n\n<SystemToolbar\n    titleKey=\"menu\"\n    icon={({ color, size }) => <Menu color={colors.content.icon[color]} size={size} />}\n    actions={[\n        {\n            titleKey: \"menu-settings\",\n            icon: ({ color, size }) => <Settings color={colors.content.icon[color]} size={size} />,\n            onPress: () => console.log(\"Settings pressed\")\n        }\n    ]}\n/>"}
                    language="tsx"
                />
            </View>
        </View>
    </PageContainer>;
};

export default SystemToolbarPage;