/**

 * 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 { useEffect, useState } from 'react';

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

import { randomizeColor } from '../components';



export function TogglingComponentExample() {

  const [isComponentVisible, setIsComponentVisible] = useState(false);



  useEffect(() => {

    const id = setInterval(() => {

      setIsComponentVisible(prev => !prev);

    }, 1000);

    return () => {

      clearInterval(id);

    };

  }, []);



  return (

    <View style={{ flexDirection: 'column', flex: 1 }}>

      <ScrollView style={{ flex: 1, width: '100%' }}>

        {new Array(100).fill(0).map((_, id) => {

          return <Item key={id} id={id} width={'100%'} />;

        })}

      </ScrollView>

      <View style={{ flex: 1, width: '100%' }}>

        {isComponentVisible &&

          new Array(500).fill(0).map((_, id) => {

            return <Item2 key={id} id={id} width={100} />;

          })}

      </View>

    </View>

  );

}



function Item(props: { id: number; width: any }) {

  const [color] = useState(randomizeColor());



  return (

    <View style={{ width: props.width, height: 100, backgroundColor: color }}>

      <Text style={{ height: 24, width: '100%' }}>{props.id}</Text>

    </View>

  );

}



function Item2(props: { id: number; width: any }) {

  const [color] = useState(randomizeColor());



  return (

    <View

      style={{

        width: props.width,

        height: 100,

        backgroundColor: color,

        position: 'absolute',

        top: Math.random() * 200,

        left: Math.random() * 200,

        borderWidth: 1,

      }}

    />

  );

}