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

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

    const {
        localize
    } = NCoreUIKitLocalize.useContext();

    return <PageContainer
        scrollViewProps={{
            showsVerticalScrollIndicator: true
        }}
        isScrollable={true}
    >
        <Text
            variant="headlineSmallSize"
            style={stylesheet.descText}
        >
            {localize("webScrollbar-title")}
        </Text>
        <Text
            style={stylesheet.descText}
            variant="bodyMediumSize"
            color="mid"
        >
            {localize("webScrollbar-desc")}
        </Text>
        <View
            style={{
                marginHorizontal: spaces.spacingMd,
                marginBottom: spaces.spacingMd
            }}
        >
            <Text
                style={{
                    marginBottom: spaces.spacingSm
                }}
                variant="headlineSmallSize"
            >
                {localize("usage")}
            </Text>
            <CodeViewer
                code={"// This component automatically wraps the scrollbars for Web.\n// It is active by default and does not require explicit use."}
                language="tsx"
            />
        </View>
        <ScrollView
            style={[
                stylesheet.scrollView,
                {
                    backgroundColor: colors.content.container.default,
                    borderColor: colors.content.container.mid
                }
            ]}
        >
            {Array.from({
                length: 30
            }).map((_, index) => <View
                style={[
                    stylesheet.item,
                    {
                        borderBottomColor: colors.content.container.mid
                    }
                ]}
                key={index}
            >
                <Text>
                    {localize("webScrollbar-item")} {index + 1}
                </Text>
            </View>)}
        </ScrollView>
    </PageContainer>;
};
export default WebScrollbar;
