/**

 * 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 { TestSuite, TestCase } from '@rnoh/testerino';

import { useEffect, useState } from 'react';

import { ActivityIndicator } from 'react-native';



// https://gl.swmansion.com/rnoh/react-native-harmony/-/issues/290

export function ActivityIndicatorTest() {

  return (

    <TestSuite name="ActivityIndicator">

      <TestCase itShould="display small, gray and animated loading indicator">

        <ActivityIndicator />

      </TestCase>

      <TestCase itShould="enable and disable loading every 500 ms">

        <Interval

          ms={500}

          render={refreshKey => {

            return <ActivityIndicator animating={refreshKey % 2 === 0} />;

          }}

        />

      </TestCase>

      <TestCase itShould="display red loading indicator">

        <ActivityIndicator color={'red'} />

      </TestCase>

      <TestCase itShould="display large loading indicator">

        <ActivityIndicator size="large" />

      </TestCase>

    </TestSuite>

  );

}



function Interval({

  render,

  ms,

}: {

  ms: number;

  render: (refreshKey: number) => any;

}) {

  const [refreshKey, setRefreshKey] = useState(0);



  useEffect(() => {

    const interval = setInterval(() => {

      setRefreshKey(prev => prev + 1);

    }, ms);

    return () => {

      clearInterval(interval);

    };

  }, [ms]);



  return render(refreshKey);

}