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
} 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={[
                stylesheet.paddedContainer,
                {
                    padding: spaces.spacingMd
                }
            ]}
        >
            <Text
                style={{
                    marginBottom: spaces.spacingMd
                }}
                variant="bodyMediumSize"
                color="mid"
            >
                {localize("installation-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("installation-installationTitle")}
                </Text>
                <CodeViewer
                    code={"yarn add ncore-ui-kit"}
                    isLineNumberVisible={false}
                    language="bash"
                />
            </View>
            <View
                style={[
                    stylesheet.borderedCard2,
                    {
                        backgroundColor: colors.content.container.default,
                        borderColor: colors.content.border.subtle,
                        marginBottom: spaces.spacingMd,
                        padding: spaces.spacingMd
                    }
                ]}
            >
                <Text
                    variant="headlineSmallSize"
                >
                    {localize("installation-peerDepsTitle")}
                </Text>
                <Text
                    style={stylesheet.marginContainer}
                    variant="bodyMediumSize"
                    color="mid"
                >
                    {localize("installation-peerDepsDesc")}
                </Text>
                <CodeViewer
                    code="yarn add @react-native-clipboard/clipboard lucide-react-native moment@https://git.nibgat.space/nibgat-community/moment.git ncore-context react-native-safe-area-context react-native-svg rrule@https://git.nibgat.space/nibgat-community/rrule.git"
                    isLineNumberVisible={false}
                    language="bash"
                />
            </View>
            <View
                style={[
                    stylesheet.rowEnd,
                    {
                        marginTop: spaces.spacingMd
                    }
                ]}
            >
                <Button
                    onPress={() => {
                        navigation.navigate("GettingStarted", {
                            screen: "Implementation"
                        });
                    }}
                    icon={({
                        color,
                        size
                    }) => {
                        return <ChevronRightIcon
                            color={colors.content.icon[color]}
                            size={size + 3}
                        />;
                    }}
                    title={localize("next")}
                    iconDirection="right"
                />
            </View>
        </View>
    </PageContainer>;
};
export default Installation;
