import {
    useLayoutEffect
} from "react";
import {
    View
} from "react-native";
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
} from "lucide-react-native";

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

    const {
        localize
    } = NCoreUIKitLocalize.useContext();

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

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

    return (
        <PageContainer
            isWorkWithHeaderSpace={false}
            isScrollable={true}
        >
            <View
                style={{
                    padding: spaces.spacingMd,
                    width: "100%"
                }}
            >
                <Text
                    variant="bodyMediumSize"
                    color="mid"
                    style={{
                        marginBottom: spaces.spacingMd
                    }}
                >
                    {localize("installation-desc")}
                </Text>

                <View
                    style={{
                        backgroundColor: colors.content.container.default,
                        borderColor: colors.content.border.subtle,
                        borderRadius: 10,
                        borderWidth: 1,
                        padding: spaces.spacingMd,
                        marginBottom: spaces.spacingMd
                    }}
                >
                    <Text variant="headlineSmallSize">{localize("installation-installationTitle")}</Text>
                    <CodeViewer
                        code={"yarn add ncore-ui-kit"}
                        language="bash"
                    />
                </View>

                <View
                    style={{
                        backgroundColor: colors.content.container.default,
                        borderColor: colors.content.border.subtle,
                        borderRadius: 10,
                        borderWidth: 1,
                        padding: spaces.spacingMd,
                        marginBottom: spaces.spacingMd
                    }}
                >
                    <Text variant="headlineSmallSize">{localize("installation-peerDepsTitle")}</Text>
                    <Text
                        variant="bodyMediumSize"
                        color="mid"
                        style={{
                            marginBottom: 10,
                            marginTop: 10
                        }}
                    >
                        {localize("installation-peerDepsDesc")}
                    </Text>
                    <CodeViewer
                        code="yarn add @react-native-clipboard/clipboard lucide-react-native moment ncore-context react-native-safe-area-context react-native-svg rrule"
                        language="bash"
                    />
                </View>

                <View
                    style={{
                        flexDirection: "row",
                        justifyContent: "flex-end",
                        marginTop: spaces.spacingMd
                    }}
                >
                    <Button
                        icon={({
                            color,
                            size
                        }) => {
                            return <ChevronRightIcon
                                color={colors.content.icon[color]}
                                size={size + 3}
                            />;
                        }}
                        title={localize("next")}
                        iconDirection="right"
                        onPress={() => {
                            navigation.navigate("GettingStarted", {
                                screen: "Implementation"
                            });
                        }}
                    />
                </View>
            </View>
        </PageContainer>
    );
};
export default Installation;