import {
    useLayoutEffect
} from "react";
import {
    View
} from "react-native";
import stylesheet from "./stylesheet";
import {
    NCoreUIKitLocalize,
    NCoreUIKitTheme,
    PageContainer,
    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 {
    ChevronLeftIcon,
    ChevronRightIcon
} from "lucide-react-native";

const ToolsUsage = () => {
    const {
        colors,
        spaces
    } = NCoreUIKitTheme.useContext();

    const {
        localize
    } = NCoreUIKitLocalize.useContext();

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

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

    const codeTheme = `import {
    NCoreUIKitTheme
} from "ncore-ui-kit";

const MyComponent = () => {
    // ${localize("toolsUsage-codeThemeComment")}
    const {
        activePalette,
        activeTheme,
        spaces,
        colors
    } = NCoreUIKitTheme.useContext();

    return (
        <View
            style={[
                stylesheet.borderedCard,
                {
                    backgroundColor: colors.content.container.default, padding: spaces.spacingMd
                }
            ]}
        >
            <Text
                style={{
                    color: colors.content.text.high
                }}
            >
                Current Theme: {activeTheme}
            </Text>
        </View>
    );
};`;

    const codeLocale = `import {
    NCoreUIKitLocalize
} from "ncore-ui-kit";

const MyComponent = () => {
    // ${localize("toolsUsage-codeLocaleComment")}
    const {
        activeLocale,
        localize
    } = NCoreUIKitLocalize.useContext();

    return (
        <Text>
            {localize("hello-world")} - Current: {activeLocale}
        </Text>
    );
};`;

    const codeToast = `import {
    NCoreUIKitToast
} from "ncore-ui-kit";

const MyComponent = () => {
    const handlePress = () => {
        NCoreUIKitToast.open({
            title: "Success",
            content: "Action completed successfully!",
            variant: "success",
            duration: 3000
        });
    };

    return <Button
        onPress={handlePress}
        title="Show Toast"
    />;
};`;

    return <PageContainer
        isWorkWithHeaderSpace={false}
        isScrollable={true}
    >
        <Text
            variant="headlineSmallSize"
            color="high"
        >
            {localize("toolsUsage-title")}
        </Text>
        <Text
            color="mid"
        >
            {localize("toolsUsage-desc")}
        </Text>
        <Text
            variant="titleMediumSize"
            color="high"
            style={{
                marginTop: spaces.spacingXl
            }}
        >
            NCoreUIKitTheme.useContext
        </Text>
        <Text
            color="mid"
            style={{
                marginTop: spaces.spacingXs
            }}
        >
            {localize("toolsUsage-ncoreThemeDesc")}
        </Text>
        <View
            style={{
                marginTop: spaces.spacingLg
            }}
        >
            <CodeViewer
                code={codeTheme}
                language="tsx"
            />
        </View>
        <Text
            variant="titleMediumSize"
            color="high"
            style={{
                marginTop: spaces.spacingXl
            }}
        >
            NCoreUIKitLocalize.useContext
        </Text>
        <Text
            color="mid"
            style={{
                marginTop: spaces.spacingXs
            }}
        >
            {localize("toolsUsage-ncoreLocalizeDesc")}
        </Text>
        <View
            style={{
                marginTop: spaces.spacingLg
            }}
        >
            <CodeViewer
                code={codeLocale}
                language="tsx"
            />
        </View>
        <Text
            variant="titleMediumSize"
            color="high"
            style={{
                marginTop: spaces.spacingXl
            }}
        >
            NCoreUIKitToast.open
        </Text>
        <Text
            color="mid"
            style={{
                marginTop: spaces.spacingXs
            }}
        >
            {localize("toolsUsage-ncoreToastDesc")}
        </Text>
        <View
            style={{
                marginTop: spaces.spacingLg
            }}
        >
            <CodeViewer
                code={codeToast}
                language="tsx"
            />
        </View>
        <View
            style={[
                stylesheet.rowSpaceBetween,
                {
                    marginTop: spaces.spacingXl
                }
            ]}
        >
            <Button
                icon={({
                    color,
                    size
                }) => {
                    return <ChevronLeftIcon
                        color={colors.content.icon[color]}
                        size={size + 3}
                    />;
                }}
                title={localize("implementation")}
                onPress={() => {
                    navigation.navigate("GettingStarted", {
                        screen: "Implementation"
                    });
                }}
            />
            <Button
                icon={({
                    color,
                    size
                }) => {
                    return <ChevronRightIcon
                        color={colors.content.icon[color]}
                        size={size + 3}
                    />;
                }}
                title={localize("themeExamples-title")}
                iconDirection="right"
                onPress={() => {
                    navigation.navigate("CoreFeatures", {
                        screen: "ThemeExamples"
                    });
                }}
            />
        </View>
    </PageContainer>;
};

export default ToolsUsage;