import {
    useLayoutEffect
} from "react";
import {
    View
} from "react-native";
import stylesheet from "./stylesheet";
import {
    NCoreUIKitLocalize,
    NCoreUIKitTheme,
    LocaleSwitcher,
    PageContainer,
    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 LocaleExamples = () => {
    const {
        colors,
        spaces
    } = NCoreUIKitTheme.useContext();

    const {
        localize,
        activeLocale
    } = NCoreUIKitLocalize.useContext();

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

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

    return <PageContainer
        isWorkWithHeaderSpace={false}
        isScrollable={true}
    >
        <Text
            variant="headlineSmallSize"
            color="high"
        >
            {localize("localeExamples-title")}
        </Text>
        <Text
            color="mid"
        >
            {localize("localeExamples-desc")}
        </Text>
        <Text
            variant="titleMediumSize"
            color="high"
            style={{
                marginBottom: spaces.spacingLg,
                marginTop: spaces.spacingXl
            }}
        >
            {localize("localeExamples-languageSwitcher")}
        </Text>
        <View
            style={[
                stylesheet.rowContainer,
                {
                    gap: spaces.spacingMd
                }
            ]}
        >
            <LocaleSwitcher/>
        </View>

        <View
            style={[
                stylesheet.borderedCard,
                {
                    backgroundColor: colors.content.container.subtle,
                    marginTop: spaces.spacingLg,
                    padding: spaces.spacingLg
                }
            ]}
        >
            <Text
                variant="titleMediumSize"
                color="high"
                style={{
                    marginBottom: spaces.spacingMd
                }}
            >
                {localize("localeExamples-localizedTexts")}
            </Text>

            <Text
                color="mid"
                style={{
                    marginBottom: spaces.spacingSm
                }}
            >
                {localize("localeExamples-currentLanguage")}<Text
                    color="high"
                    variant="labelLargeSize"
                >
                    {activeLocale}
                </Text>
            </Text>

            <View
                style={[
                    stylesheet.borderedCard2,
                    {
                        backgroundColor: colors.content.container.default,
                        padding: spaces.spacingMd,
                        gap: spaces.spacingMd
                    }
                ]}
            >
                <View>
                    <Text
                        variant="labelMediumSize"
                        color="mid"
                    >
                        "hello-world" key
                    </Text>
                    <Text
                        variant="bodyLargeSize"
                        color="high"
                    >
                        {localize("hello-world")}
                    </Text>
                </View>
                <View>
                    <Text
                        variant="labelMediumSize"
                        color="mid"
                    >
                        "menu" key
                    </Text>
                    <Text
                        variant="bodyLargeSize"
                        color="high"
                    >
                        {localize("menu")}
                    </Text>
                </View>
                <View>
                    <Text
                        variant="labelMediumSize"
                        color="mid"
                    >
                        "installation" key
                    </Text>
                    <Text
                        variant="bodyLargeSize"
                        color="high"
                    >
                        {localize("installation")}
                    </Text>
                </View>
            </View>
        </View>

        <View
            style={[
                stylesheet.rowSpaceBetween,
                {
                    marginTop: spaces.spacingXl
                }
            ]}
        >
            <Button
                icon={({
                    color,
                    size
                }) => {
                    return <ChevronLeftIcon
                        color={colors.content.icon[color]}
                        size={size + 3}
                    />;
                }}
                onPress={() => {
                    navigation.navigate("CoreFeatures", {
                        screen: "ThemeExamples"
                    });
                }}
                title={localize("themeExamples-title")}
            />

            <Button
                icon={({
                    color,
                    size
                }) => {
                    return <ChevronRightIcon
                        color={colors.content.icon[color]}
                        size={size + 3}
                    />;
                }}
                onPress={() => {
                    navigation.navigate("CoreFeatures", {
                        screen: "TypesOverride"
                    });
                }}
                title={localize("typesOverride-title")}
                iconDirection="right"
            />
        </View>
    </PageContainer>;
};
export default LocaleExamples;