// withHooks
import { LibGradient } from 'esoftplay/cache/lib/gradient/import';
import { LibIcon } from 'esoftplay/cache/lib/icon/import';
import { LibStyle } from 'esoftplay/cache/lib/style/import';
import { LibTextstyle } from 'esoftplay/cache/lib/textstyle/import';

import esp from 'esoftplay/esp';
import React from 'react';
import { Pressable, View } from 'react-native';
import Animated, {
  useAnimatedStyle,
  useSharedValue,
  withRepeat,
  withSequence,
  withTiming
} from 'react-native-reanimated';


export interface EventOrder_detail_upgrade_buttonArgs {

}
export interface EventOrder_detail_upgrade_buttonProps {
  onPress: () => void
}
export default function m(props: EventOrder_detail_upgrade_buttonProps): any {
  const translateY = useSharedValue(0);

  translateY.value = withRepeat(
    withSequence(
      withTiming(-5, { duration: 400 }),
      withTiming(5, { duration: 400 }),
    ),
    -1, // -1 means repeat indefinitel
    false
  );

  const animatedStyle = useAnimatedStyle(() => {
    return {
      transform: [{ translateY: translateY.value }],
    };
  });

  return (
    <Pressable onPress={() => props.onPress()} >
      <LibGradient
        colors={["#f1f2f3", LibStyle.colorPrimary]}
        direction='left-to-right'
        style={{ margin: 15, marginBottom: 0, borderRadius: 5, padding: 12, paddingVertical: 8, flexDirection: "row", justifyContent: 'space-between', alignItems: 'center', borderWidth: 1, borderColor: '#ccc' }} >
        <View>
          <LibTextstyle textStyle='headline' text={esp.lang("event/order_detail_upgrade_button", "upgrade")} />
          <LibTextstyle textStyle='footnote' text={esp.lang("event/order_detail_upgrade_button", "eays")} />
        </View>
        <Animated.View style={[animatedStyle]} >
          <LibIcon.Feather name='chevrons-up' size={40} />
        </Animated.View>
      </LibGradient>
    </Pressable>
  )
}