import React from 'react';
import { StyleSheet, TextStyle, Animated } from 'react-native';
import { useCustomFontStyle, useStyles } from '../../hooks';
import { ComponentStyleProp, LLComponentStyleFn } from '../../types';
import { IWidgetEarnableReward } from '@livelike/javascript';

export type LLWidgetRewardStyles = {
  slidingRewardText: TextStyle;
  singleRewardText: TextStyle;
};

export type LLWidgetRewardProps = ComponentStyleProp<LLWidgetRewardStyles> & {
  widgetReward: IWidgetEarnableReward;
  multipleReward?: boolean;
  slideInOutStyle?: {
    translateY: Animated.AnimatedInterpolation<number>;
  };
  widgetId: string;
};

export function LLWidgetReward({
  widgetId,
  slideInOutStyle,
  multipleReward,
  widgetReward,
  styles: stylesProp,
}: LLWidgetRewardProps) {
  const rewardStyles = useStyles({
    componentStylesFn: getWidgetRewardStyles,
    stylesProp,
  });

  const { reward_item_amount, reward_item_name } = widgetReward;
  let style;
  if (!multipleReward) {
    style = [rewardStyles.singleRewardText];
  } else if (slideInOutStyle) {
    style = [
      rewardStyles.slidingRewardText,
      { transform: [{ translateY: slideInOutStyle.translateY as any }] },
    ];
  }
  style = useCustomFontStyle({
    style: style ?? [],
  });
  const rewardText = `+${reward_item_amount} ${reward_item_name}`;

  return <Animated.Text style={style}>{rewardText}</Animated.Text>;
}

const getWidgetRewardStyles: LLComponentStyleFn<LLWidgetRewardStyles> = ({
  theme,
}) =>
  StyleSheet.create({
    slidingRewardText: {
      position: 'absolute',
      top: 0,
      transform: [{ translateY: 20 }],
      color: theme.correct,
    },
    singleRewardText: {
      display: 'flex',
      flex: 1,
      height: '100%',
      textAlignVertical: 'center',
      color: theme.correct,
    },
  });