import React from 'react';
import { Text, View } from 'react-native';
import { isNumber } from 'lodash';
import { withTheme } from '../../branding';
import TrendArrowIcon, {
    arrowTypes
} from '../../components/Icons/TrendArrowIcon';
import Bullet from '../../components/Icons/Bullet';
import themedStyles from './styles';
import type { ThemeModeType } from '../BrandFilters/BrandFilters.tsx';

interface TrendProps {
    trendValue?: number;
    isNewlyEntered?: boolean;
    colors: {
        success350: string;
        error350: string;
        gray250: string;
        info350: string;
        [key: string]: string;
    };
    theme: ThemeModeType;
}

const getTrendArrowType = (
    trendValue: number,
    colors: TrendProps['colors']
) => {
    if (trendValue > 0) {
        return {
            color: colors.success350,
            arrowType: arrowTypes.UP
        };
    }
    if (trendValue < 0) {
        return {
            color: colors.error350,
            arrowType: arrowTypes.DOWN
        };
    }
    return {
        color: colors.gray250,
        arrowType: arrowTypes.RIGHT
    };
};

export const Trend = ({
    trendValue,
    isNewlyEntered,
    colors,
    theme
}: TrendProps) => {
    if (!isNumber(trendValue) && !isNewlyEntered) {
        return null;
    }

    const { color, arrowType } = getTrendArrowType(trendValue || 0, colors);
    const absoluteTrendValue = Math.abs(trendValue || 0);
    const styles = themedStyles[theme];

    if (isNewlyEntered) {
        return (
            <View testID="trendBlueDot">
                <Bullet color={colors.info350} size={12} />
            </View>
        );
    }

    return (
        <View testID="trendContainer" style={styles.trendContainer}>
            <TrendArrowIcon type={arrowType} />
            <Text testID="trendText" style={[styles.trendText, { color }]}>
                {absoluteTrendValue}
            </Text>
        </View>
    );
};

export default withTheme(Trend);