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 {
    ChevronRightIcon,
    ChevronLeftIcon
} from "lucide-react-native";
import defaultLocaleJSON from "../../../../../src/variants/locales/default.json";
import defaultThemeJSON from "../../../../../src/variants/themes/default.json";

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

    const {
        localize
    } = NCoreUIKitLocalize.useContext();

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

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

    const themeCode = JSON.stringify(
        {
            ...defaultThemeJSON,
            palettes: defaultThemeJSON.palettes.filter((palette) => palette.name === "nibgat")
        },
        null,
        4
    );

    const localeCode = JSON.stringify(
        [
            defaultLocaleJSON[0]
        ],
        null,
        4
    );

    return <PageContainer
        isWorkWithHeaderSpace={false}
        isScrollable={true}
    >
        <Text
            variant="headlineSmallSize"
            color="high"
        >
            {localize("defaultJSONs-title")}
        </Text>
        <Text
            style={{
                marginTop: spaces.spacingXs
            }}
            color="mid"
        >
            {localize("defaultJSONs-desc")}
        </Text>
        <Text
            style={{
                marginTop: spaces.spacingXl
            }}
            variant="titleMediumSize"
            color="high"
        >
            defaultLocaleJSON
        </Text>
        <Text
            style={{
                marginTop: spaces.spacingXs
            }}
            color="mid"
        >
            {localize("defaultJSONs-localeDesc")}
        </Text>
        <View
            style={{
                marginTop: spaces.spacingLg
            }}
        >
            <CodeViewer
                code={localeCode}
                language="json"
            />
        </View>
        <Text
            style={{
                marginTop: spaces.spacingXl
            }}
            variant="titleMediumSize"
            color="high"
        >
            defaultThemeJSON
        </Text>
        <Text
            style={{
                marginTop: spaces.spacingXs
            }}
            color="mid"
        >
            {localize("defaultJSONs-themeDesc")}
        </Text>
        <View
            style={{
                marginTop: spaces.spacingLg
            }}
        >
            <CodeViewer
                code={themeCode}
                autoFold={true}
                language="json"
            />
        </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: "TypesOverride"
                    });
                }}
                title={localize("typesOverride")}
            />
            <Button
                icon={({
                    color,
                    size
                }) => {
                    return <ChevronRightIcon
                        color={colors.content.icon[color]}
                        size={size + 3}
                    />;
                }}
                onPress={() => {
                    navigation.navigate("Components", {
                        screen: "Text"
                    });
                }}
                title={localize("components")}
                iconDirection="right"
            />
        </View>
    </PageContainer>;
};
export default DefaultJSONs;
