import React from 'react';
import type { ComponentProps } from 'react';
import {
  Animated,
  Platform,
  type StyleProp,
  type ViewStyle,
} from 'react-native';
import type Icon from '../../Icon';
import {
  StyledActionItem,
  StyledActionItemText,
  StyledIcon,
} from './StyledActionItem';
import { StyledIconContainer } from '../StyledFAB';

export interface ActionItemProps {
  testID?: string;
  title: string;
  icon: ComponentProps<typeof Icon>['icon'];
  onPress?: () => void;
  style?: StyleProp<ViewStyle>;
  key?: string;
}

interface AnimatedActionItemProps extends ActionItemProps {
  index: number;
  active?: boolean;
}

const ActionItem = ({
  icon,
  title,
  onPress,
  style,
  testID,
  index,
  active = false,
}: AnimatedActionItemProps) => {
  const animatedValue = React.useRef(new Animated.Value(0));

  const translateY = animatedValue.current.interpolate({
    inputRange: [0, 1],
    outputRange: [50, 0],
  });

  React.useEffect(() => {
    Animated.spring(animatedValue.current, {
      toValue: active ? 1 : 0,
      useNativeDriver: Platform.OS !== 'web',
      delay: index * 30,
      speed: 10,
      bounciness: 10,
    }).start();
  }, [active, index]);

  return (
    <Animated.View style={{ transform: [{ translateY }] }}>
      <StyledActionItem
        activeOpacity={0.8}
        style={style}
        onPress={onPress}
        testID={testID}
      >
        <>
          <StyledIconContainer>
            <StyledIcon size="xsmall" icon={icon} />
          </StyledIconContainer>
          <StyledActionItemText>{title}</StyledActionItemText>
        </>
      </StyledActionItem>
    </Animated.View>
  );
};

export default ActionItem;