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

import { Animated, View, Easing, EasingFunction } from 'react-native';

import { TestCase, TestSuite } from '@rnoh/testerino';

export function AnimatedEasingTest() {
  return (
    <TestSuite name="Easing">
      <TestCase itShould="move square linearly">
        <EasingView easing={Easing.linear} />
      </TestCase>
      <TestCase itShould="move square slowly accelerating">
        <EasingView easing={Easing.ease} />
      </TestCase>
      <TestCase itShould="move square with backwards cubic function">
        <EasingView easing={Easing.out(Easing.cubic)} />
      </TestCase>
    </TestSuite>
  );
}

const EasingView = (props: { easing: EasingFunction }) => {
  const translateValue = useRef(new Animated.Value(0)).current;
  const animation = Animated.timing(translateValue, {
    toValue: 200,
    duration: 2000,
    easing: props.easing,
    useNativeDriver: true,
  });
  const handleAnimation = () => {
    animation.reset();
    animation.start();
  };
  return (
    <View style={{ height: 60, width: '100%' }} onTouchEnd={handleAnimation}>
      <Animated.View
        style={{
          height: 40,
          width: 40,
          margin: 10,
          backgroundColor: 'red',
          transform: [
            {
              translateX: translateValue,
            },
          ],
        }}
      />
    </View>
  );
};