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";

const codeGlobalDts = `import defaultLocaleJSON from "./variants/locales/default.json";
import defaultThemeJSON from "./variants/themes/default.json";

declare global {
    namespace NCoreUIKit {
        type PaletteNames = "gmcore";

        interface PaletteKey extends Record<PaletteType, unknown>, Record<PaletteNames, unknown> {
        }

        type ProjectLocalizationL = typeof defaultLocaleJSON[0];

        type GeneratedProjectTranslations = {
            [K in keyof ProjectLocalizationL["translations"]]: ProjectLocalizationL["translations"][K];
        };

        interface Translation extends GeneratedTranslations, GeneratedProjectTranslations {
        }

        type DefaultPaletteL = typeof defaultThemeJSON.palettes[0];

        type ProjectDataL = DefaultPaletteL["themes"]["dark"]["project"];
        type DefaultProjectColorsL = ProjectDataL;

        interface ProjectColorPalette extends DefaultProjectColors, DefaultProjectColorsL {
        }

        type SystemDataL = DefaultPaletteL["themes"]["dark"]["system"];
        type DefaultSystemColorsL = SystemDataL;

        interface SystemColorPalette extends DefaultSystemColors, DefaultSystemColorsL {
        }

        type ContentDataL = DefaultPaletteL["themes"]["dark"]["content"];
        type DefaultContentColorsL = ContentDataL;

        interface ContentColorPalette extends DefaultContentColors, DefaultContentColorsL {
        }
    }
}`;

const codeTsConfig = `{
  "compilerOptions": {
    "typeRoots": [
        "./node_modules/@types",
        "./global.d.ts"
    ]
  }
}`;

const TypesOverride = () => {
    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("typesOverride-title")}
                isWrapSafeareaContext={false}
                isGoBackEnable={true}
            />,
            headerShown: true
        });
    }, [
        navigation,
        localize
    ]);

    return <PageContainer
        isWorkWithHeaderSpace={false}
        isScrollable={true}
    >
        <Text
            variant="headlineSmallSize"
            color="high"
        >
            {localize("typesOverride-title")}
        </Text>
        <Text
            color="mid"
        >
            {localize("typesOverride-desc")}
        </Text>
        <Text
            style={{
                marginTop: spaces.spacingXl
            }}
            variant="titleMediumSize"
            color="high"
        >
            global.d.ts
        </Text>
        <Text
            style={{
                marginTop: spaces.spacingXs
            }}
            color="mid"
        >
            {localize("typesOverride-globalDtsDesc")}
        </Text>
        <View
            style={{
                marginTop: spaces.spacingLg
            }}
        >
            <CodeViewer
                code={codeGlobalDts}
                language="tsx"
            />
        </View>
        <Text
            style={{
                marginTop: spaces.spacingXl
            }}
            variant="titleMediumSize"
            color="high"
        >
            tsconfig.json
        </Text>
        <Text
            style={{
                marginTop: spaces.spacingXs
            }}
            color="mid"
        >
            {localize("typesOverride-tsconfigDesc")}
        </Text>
        <View
            style={{
                marginTop: spaces.spacingLg
            }}
        >
            <CodeViewer
                code={codeTsConfig}
                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: "LocaleExamples"
                    });
                }}
                title={localize("localeExamples-title")}
            />
            <Button
                icon={({
                    color,
                    size
                }) => {
                    return <ChevronRightIcon
                        color={colors.content.icon[color]}
                        size={size + 3}
                    />;
                }}
                onPress={() => {
                    navigation.navigate("CoreFeatures", {
                        screen: "DefaultJSONs"
                    });
                }}
                title={localize("defaultJSONs")}
                iconDirection="right"
            />
        </View>
    </PageContainer>;
};

export default TypesOverride;
