/**

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

import { useState } from 'react';

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

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



export function MomentumCallbacksTest() {

  return (

    <TestCase

      modal

      itShould="display amount of on drag/momentum begin/end events">

      <MomentumTestCase />

    </TestCase>

  );

}



function MomentumTestCase() {

  const [hasDragBegan, setHasDragBegan] = useState(0);

  const [hasDragEnded, setHasDragEnded] = useState(0);

  const [hasMomentumBegan, setHasMomentumBegan] = useState(0);

  const [hasMomentumEnded, setHasMomentumEnded] = useState(0);



  return (

    <>

      <Button

        label="Reset"

        onPress={() => {

          setHasDragBegan(0);

          setHasDragEnded(0);

          setHasMomentumBegan(0);

          setHasMomentumEnded(0);

        }}

      />

      <View style={{ backgroundColor: 'white', width: '100%' }}>

        <Text style={{ height: 16 }}>hasMomentumBegan: {hasMomentumBegan}</Text>

        <Text style={{ height: 16 }}>hasMomentumEnded: {hasMomentumEnded}</Text>

        <Text style={{ height: 16 }}>hasDragBegan: {hasDragBegan}</Text>

        <Text style={{ height: 16 }}>hasDragEnded: {hasDragEnded}</Text>

      </View>



      <View style={{ width: 200, height: 200 }}>

        <ScrollView

          onScrollBeginDrag={() => {

            setHasDragBegan(p => p + 1);

          }}

          onScrollEndDrag={() => {

            setHasDragEnded(p => p + 1);

          }}

          onMomentumScrollBegin={() => {

            setHasMomentumBegan(p => p + 1);

          }}

          onMomentumScrollEnd={() => {

            setHasMomentumEnded(p => p + 1);

          }}>

          <View style={{ backgroundColor: 'red', width: '100%', height: 150 }} />

          <View style={{ backgroundColor: 'blue', width: '100%', height: 150 }} />

          <View

            style={{ backgroundColor: 'green', width: '100%', height: 150 }}

          />

          <View style={{ backgroundColor: 'red', width: '100%', height: 150 }} />

        </ScrollView>

      </View>

    </>

  );

}