import {
    useLayoutEffect,
    useState
} from "react";
import {
    View
} from "react-native";
import stylesheet from "./stylesheet";
import {
    NCoreUIKitLocalize,
    NCoreUIKitTheme,
    PageContainer,
    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";

const TextPage = () => {
    const {
        typography,
        radiuses,
        borders,
        spaces,
        colors
    } = NCoreUIKitTheme.useContext();

    const {
        localize
    } = NCoreUIKitLocalize.useContext();

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

    const [
        variant,
        setVariant
    ] = useState<number>(0);

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

    return <PageContainer
        isScrollable={false}
        isWorkWithHeaderSpace={false}
        style={[
            stylesheet.container
        ]}
    >
        <View
            style={[
                stylesheet.contentContainer
            ]}
        >
            <View
                style={{
                    borderColor: colors.content.border.subtle,
                    marginBottom: spaces.spacingMd,
                    borderRadius: radiuses.form,
                    borderWidth: borders.line,
                    padding: spaces.spacingMd,
                    minHeight: 120
                }}
            >
                <Text
                    variant={Object.keys(typography)[variant] as keyof NCoreUIKit.Typography}
                    style={{
                        marginBottom: spaces.spacingLg
                    }}
                >
                    {localize("this-is-test-sub-page")}
                </Text>
            </View>
            <Button
                title={`variant = ${Object.keys(typography)[variant]}`}
                spreadBehaviour="stretch"
                onPress={() => {
                    setVariant(variant + 1 > Object.keys(typography).length - 1 ? 0 : variant + 1);
                }}
            />
        </View>
    </PageContainer>;
};
export default TextPage;
