import {
    ScrollView,
    View
} from "react-native";
import stylesheet from "./stylesheet";
import {
    NCoreUIKitLocalize,
    NCoreUIKitTheme,
    PageContainer,
    Text
} from "ncore-ui-kit";

const WebScrollbar = () => {
    const {
        colors
    } = NCoreUIKitTheme.useContext();

    const {
        localize
    } = NCoreUIKitLocalize.useContext();

    return <PageContainer
        isScrollable={true}
        scrollViewProps={{
            showsVerticalScrollIndicator: true
        }}
    >
        <Text
            variant="headlineSmallSize"
            style={stylesheet.descText}
        >
            {localize("webScrollbar-title")}
        </Text>
        <Text
            variant="bodyMediumSize"
            color="mid"
            style={stylesheet.descText}
        >
            {localize("webScrollbar-desc")}
        </Text>
        <ScrollView
            style={[
                stylesheet.scrollView,
                {
                    backgroundColor: colors.content.container.default,
                    borderColor: colors.content.container.mid
                }
            ]}
        >
            {Array.from({
                length: 30
            }).map((_, index) => <View
                key={index}
                style={[
                    stylesheet.item,
                    {
                        borderBottomColor: colors.content.container.mid
                    }
                ]}
            >
                <Text>
                    {localize("webScrollbar-item")} {index + 1}
                </Text>
            </View>)}
        </ScrollView>
    </PageContainer>;
};
export default WebScrollbar;