import {
    useLayoutEffect
} from "react";
import {
    View
} from "react-native";
import stylesheet from "./stylesheet";
import {
    NCoreUIKitLocalize,
    NCoreUIKitTheme,
    PaletteSwitcher,
    ThemeSwitcher,
    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";
import {
    ChevronRightIcon,
    ChevronLeftIcon
} from "lucide-react-native";

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

    return <PageContainer
        isWorkWithHeaderSpace={false}
        isScrollable={true}
    >
        <Text
            variant="headlineSmallSize"
            color="high"
        >
            {localize("themeExamples-title")}
        </Text>
        <Text
            color="mid"
        >
            {localize("themeExamples-desc")}
        </Text>
        <Text
            style={{
                marginBottom: spaces.spacingLg,
                marginTop: spaces.spacingXl
            }}
            variant="titleMediumSize"
            color="high"
        >
            {localize("themeExamples-switchers")}
        </Text>
        <View
            style={[
                stylesheet.rowContainer,
                {
                    gap: spaces.spacingMd
                }
            ]}
        >
            <ThemeSwitcher/>
            <PaletteSwitcher/>
        </View>
        <View
            style={[
                stylesheet.borderedCard,
                {
                    backgroundColor: colors.content.container.subtle,
                    marginTop: spaces.spacingLg,
                    padding: spaces.spacingLg
                }
            ]}
        >
            <Text
                style={{
                    marginBottom: spaces.spacingMd
                }}
                variant="titleMediumSize"
                color="high"
            >
                {localize("themeExamples-typographyExamples")}
            </Text>
            <Text
                variant="displayLargeSize"
                color="high"
            >
                {localize("themeExamples-displayLarge")}
            </Text>
            <Text
                variant="headlineLargeSize"
                color="high"
            >
                {localize("themeExamples-headlineLarge")}
            </Text>
            <Text
                variant="titleLargeSize"
                color="high"
            >
                {localize("themeExamples-titleLarge")}
            </Text>
            <Text
                variant="bodyLargeSize"
                color="mid"
            >
                {localize("themeExamples-bodyLarge")}
            </Text>
            <Text
                variant="labelLargeSize"
                color="mid"
            >
                {localize("themeExamples-labelLarge")}
            </Text>
            <Text
                style={{
                    marginBottom: spaces.spacingMd,
                    marginTop: spaces.spacingXl
                }}
                variant="titleMediumSize"
                color="high"
            >
                {localize("themeExamples-colorExamples")}
            </Text>
            <View
                style={[
                    stylesheet.rowContainer2,
                    {
                        gap: spaces.spacingSm
                    }
                ]}
            >
                <View
                    style={[
                        stylesheet.borderedCard2,
                        {
                            backgroundColor: colors.content.container.primary,
                            padding: spaces.spacingMd
                        }
                    ]}
                >
                    <Text
                        style={{
                            color: colors.content.text.onPrimary
                        }}
                    >
                        {localize("themeExamples-primary")}
                    </Text>
                </View>
                <View
                    style={[
                        stylesheet.borderedCard3,
                        {
                            backgroundColor: colors.content.container.danger,
                            padding: spaces.spacingMd
                        }
                    ]}
                >
                    <Text
                        style={{
                            color: colors.content.text.danger
                        }}
                    >
                        {localize("themeExamples-danger")}
                    </Text>
                </View>
                <View
                    style={[
                        stylesheet.borderedCard4,
                        {
                            backgroundColor: colors.content.container.warning,
                            padding: spaces.spacingMd
                        }
                    ]}
                >
                    <Text
                        style={{
                            color: colors.content.text.warning
                        }}
                    >
                        {localize("themeExamples-warning")}
                    </Text>
                </View>
                <View
                    style={[
                        stylesheet.borderedCard5,
                        {
                            backgroundColor: colors.content.container.success,
                            padding: spaces.spacingMd
                        }
                    ]}
                >
                    <Text
                        style={{
                            color: colors.content.text.success
                        }}
                    >
                        {localize("themeExamples-success")}
                    </Text>
                </View>
                <View
                    style={[
                        stylesheet.borderedCard6,
                        {
                            backgroundColor: colors.content.container.info,
                            padding: spaces.spacingMd
                        }
                    ]}
                >
                    <Text
                        style={{
                            color: colors.content.text.info
                        }}
                    >
                        {localize("themeExamples-info")}
                    </Text>
                </View>
            </View>
        </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: "ToolsUsage"
                    });
                }}
                title={localize("toolsUsage-title")}
            />
            <Button
                icon={({
                    color,
                    size
                }) => {
                    return <ChevronRightIcon
                        color={colors.content.icon[color]}
                        size={size + 3}
                    />;
                }}
                onPress={() => {
                    navigation.navigate("CoreFeatures", {
                        screen: "LocaleExamples"
                    });
                }}
                title={localize("localeExamples-title")}
                iconDirection="right"
            />
        </View>
    </PageContainer>;
};

export default ThemeExamples;
