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 Implementation = () => {
    const {
        colors,
        spaces
    } = NCoreUIKitTheme.useContext();

    const {
        localize
    } = NCoreUIKitLocalize.useContext();

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

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

    const exampleCode = `import {
    type NCoreUIKitConfig,
    setupNCoreUIKit,
    Host
} from "ncore-ui-kit";

// Kendi temanızı ve dil dosyanızı dahil edin
import defaultLocaleJSON from "./variants/locales/default.json";
import defaultThemeJSON from "./variants/themes/default.json";

// NCore konfigürasyonunu oluşturun
const NCoreConfig: NCoreUIKitConfig = {
    projectThemes: defaultThemeJSON as NCoreUIKit.Palette,
    initialSelectedGapPropagation: "spacious",
    projectLocales: defaultLocaleJSON,
    initialSelectedPalette: "nibgat",
    initialSelectedTheme: "light"
};

// NCoreUIKitBase nesnesini ayağa kaldırın
const NCoreUIKitBase = setupNCoreUIKit(NCoreConfig);

const App = () => {
    return <NCoreUIKitBase.Provider>
        <Host name="main-header">
            {/* Sayfalarınız veya Navigasyon yapınız burada yer almalı */}
        </Host>
    </NCoreUIKitBase.Provider>;
};
export default App;`;

    return <PageContainer
        isWorkWithHeaderSpace={false}
        isScrollable={true}
    >
        <View
            style={[
                stylesheet.paddedContainer,
                {
                    padding: spaces.spacingMd
                }
            ]}
        >
            <Text
                variant="bodyMediumSize"
                color="mid"
                style={{
                    marginBottom: spaces.spacingMd
                }}
            >
                {localize("implementation-desc")}
            </Text>
            <View
                style={[
                    stylesheet.borderedCard,
                    {
                        backgroundColor: colors.content.container.default,
                        borderColor: colors.content.border.subtle,
                        marginBottom: spaces.spacingMd,
                        padding: spaces.spacingMd
                    }
                ]}
            >
                <Text
                    variant="headlineSmallSize"
                >
                    {localize("your-project-main-directory")}/src/index.tsx
                </Text>
                <CodeViewer
                    code={exampleCode}
                    language="tsx"
                />
            </View>
            <View
                style={[
                    stylesheet.rowSpaceBetween,
                    {
                        marginTop: spaces.spacingMd
                    }
                ]}
            >
                <Button
                    icon={({
                        color,
                        size
                    }) => {
                        return <ChevronLeftIcon
                            color={colors.content.icon[color]}
                            size={size + 3}
                        />;
                    }}
                    title={localize("installation")}
                    iconDirection="left"
                    onPress={() => {
                        navigation.navigate("GettingStarted", {
                            screen: "Installation"
                        });
                    }}
                />
                <Button
                    icon={({
                        color,
                        size
                    }) => {
                        return <ChevronRightIcon
                            color={colors.content.icon[color]}
                            size={size + 3}
                        />;
                    }}
                    title={localize("coreFeatures")}
                    iconDirection="right"
                    onPress={() => {
                        navigation.navigate("CoreFeatures", {
                            screen: "ToolsUsage"
                        });
                    }}
                />
            </View>
        </View>
    </PageContainer>;
};
export default Implementation;