import {
    useLayoutEffect,
    useState
} from "react";
import {
    View
} from "react-native";
import stylesheet from "./stylesheet";
import {
    NotificationIndicator,
    NCoreUIKitLocalize,
    NCoreUIKitTheme,
    PageContainer,
    CodeViewer,
    SelectBox,
    Button,
    Header,
    Switch,
    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 type {
    INotificationIndicatorProps
} from "ncore-ui-kit";
import {
    Bell as BellIcon
} from "lucide-react-native";

const TYPES: Array<INotificationIndicatorProps["type"]> = [
    "danger",
    "warning",
    "success",
    "info"
];

const TYPES_DATA = TYPES.map((item) => ({
    __title: item as string,
    __key: item as string
}));

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

    const {
        localize
    } = NCoreUIKitLocalize.useContext();

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

    const [
        typeIndex,
        setTypeIndex
    ] = useState<number>(0);

    const [
        count,
        setCount
    ] = useState<number>(5);

    const [
        isShowCount,
        setIsShowCount
    ] = useState<boolean>(true);

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

    return <PageContainer
        scrollViewProps={{
            contentContainerStyle: stylesheet.scrollContent
        }}
        isWorkWithHeaderSpace={false}
        scrollViewStyle={[
            stylesheet.container
        ]}
        isScrollable={true}
    >
        <View
            style={[
                stylesheet.contentContainer
            ]}
        >
            <Text
                style={stylesheet.marginContainer}
                variant="bodyMediumSize"
                color="mid"
            >
                {localize("notificationIndicator-desc")}
            </Text>
            <View
                style={[
                    stylesheet.paddedMarginContainer,
                    {
                        borderColor: colors.content.border.subtle,
                        marginBottom: spaces.spacingMd,
                        borderRadius: radiuses.form,
                        borderWidth: borders.line,
                        padding: spaces.spacingMd
                    }
                ]}
            >
                <NotificationIndicator
                    type={TYPES[typeIndex]}
                    isVisible={isShowCount}
                    title={count}
                >
                    <View
                        style={[
                            stylesheet.borderedCard,
                            {
                                borderRadius: radiuses.form,
                                padding: spaces.spacingSm
                            }
                        ]}
                    >
                        <BellIcon
                            color={colors.content.icon.mid}
                            size={32}
                        />
                    </View>
                </NotificationIndicator>
            </View>
            <View
                style={{
                    marginBottom: spaces.spacingMd
                }}
            >
                <Text
                    style={{
                        marginBottom: spaces.spacingSm
                    }}
                    variant="headlineSmallSize"
                >
                    {localize("usage")}
                </Text>
                <CodeViewer
                    code={"import {\n    NotificationIndicator\n} from \"ncore-ui-kit\";\n\n<NotificationIndicator\n    type=\"danger\"\n    isVisible={true}\n    title={5}\n>\n    <View>\n        <Text>Content</Text>\n    </View>\n</NotificationIndicator>"}
                    language="tsx"
                />
            </View>
            <View
                style={[
                    stylesheet.rowSpaceBetween,
                    {
                        gap: spaces.spacingMd
                    }
                ]}
            >
                <SelectBox
                    onChange={(selectedItems) => {
                        if (selectedItems.length > 0) {
                            const index = TYPES.indexOf(
                                    selectedItems[0]!
                                        .__key as unknown as INotificationIndicatorProps["type"],
                            );
                            if (index !== -1) setTypeIndex(index);
                        }
                    }}
                    title={localize(
                        "notificationIndicator-changeType",
                    )}
                    titleExtractor={(item) => item.__title}
                    keyExtractor={(item) => item.__key}
                    initialSelectedItems={
                        TYPES_DATA[typeIndex] ? [
                            TYPES_DATA[typeIndex]!
                        ] : []
                    }
                    spreadBehaviour="free"
                    data={TYPES_DATA}
                />
                <Button
                    onPress={() => setCount((prev) => prev + 1)}
                    title={localize(
                        "notificationIndicator-addCount",
                    )}
                    spreadBehaviour="free"
                />
                <Switch
                    title={localize(
                        "notificationIndicator-toggleShowCount",
                    )}
                    onPress={() => setIsShowCount(!isShowCount)}
                    isActive={isShowCount}
                    spreadBehaviour="free"
                />
            </View>
        </View>
    </PageContainer>;
};
export default NotificationIndicatorPage;
