/**

 * Copyright (c) 2024 Huawei Technologies Co., Ltd.

 *

 * This source code is licensed under the MIT license found in the

 * LICENSE-MIT file in the root directory of this source tree.

 */



import React, { useState } from 'react';

import { ScrollView, Text, TextInput, View } from 'react-native';



export function TextScrollExample() {

  const [numberOfComponents, setNumberOfComponents] = useState(100);

  const generateRandomText = (length: number) => {

    let result = '';

    const characters =

      'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';

    const charactersLength = characters.length;

    let counter = 0;

    while (counter < length) {

      result += characters.charAt(Math.floor(Math.random() * charactersLength));

      counter += 1;

    }

    return result;

  };



  const textWidgetsArray = Array.from(

    { length: numberOfComponents },

    (_, index) => (

      <Text key={index} style={{ height: 53 }}>

        {generateRandomText(100)}

      </Text>

    ),

  );



  return (

    <ScrollView>

      <TextInput

        style={{

          backgroundColor: 'white',

          width: '100%',

          height: 36,

          color: 'black',

        }}

        value={numberOfComponents.toString()}

        onChangeText={value => {

          setNumberOfComponents(parseInt(value) || 0);

        }}

      />

      <View

        style={{

          flex: 1,

          flexDirection: 'column',

        }}>

        {textWidgetsArray}

      </View>

    </ScrollView>

  );

}