import React from 'react';
import { View } from 'react-native';
import type { ViewStyle } from 'react-native';
import { G, Rect, Polygon, Svg, Path } from 'react-native-svg';
import { safeWithTheme } from '../../branding';
import type { ThemeProps } from '../../branding/hoc/types';
import ArrowUpDiagonal from '../../componentsDS/Icons/ArrowUpDiagonal';
import ArrowDownDiagonal from '../../componentsDS/Icons/ArrowDownDiagonal';
import type { Colors } from '../../branding/themes/types/colors';

interface CaretProps {
    width?: number;
    height?: number;
    colors: Colors;
}

export const CaretUp = ({ width, height, colors }: CaretProps) => (
    <Svg width={width} height={height} viewBox="0 0 12 8" testID="caretUp">
        <G stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
            <G transform="translate(-932.000000, -1188.000000)">
                <G transform="translate(365.000000, 1120.000000)">
                    <G transform="translate(0.000000, 60.000000)">
                        <G transform="translate(565.000000, 4.000000)">
                            <Rect
                                fillRule="nonzero"
                                x="0"
                                y="0"
                                width="16"
                                height="16"
                            />
                            <Polygon
                                fill={colors.success350}
                                fillRule="evenodd"
                                points="8 4 14 12 2 12"
                            />
                        </G>
                    </G>
                </G>
            </G>
        </G>
    </Svg>
);

export const CaretDown = ({ width, height, colors }: CaretProps) => (
    <Svg width={width} height={height} viewBox="0 0 12 8" testID="caretDown">
        <G stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
            <G transform="translate(-932.000000, -1238.000000)">
                <G transform="translate(365.000000, 1120.000000)">
                    <G transform="translate(0.000000, 60.000000)">
                        <G transform="translate(565.000000, 54.000000)">
                            <Rect
                                fillRule="nonzero"
                                x="0"
                                y="0"
                                width="16"
                                height="16"
                            />
                            <Polygon
                                fill={colors.error350}
                                fillRule="evenodd"
                                points="8 4 14 12 2 12"
                                transform="translate(8.000000, 8.000000) scale(1, -1) translate(-8.000000, -8.000000)"
                            />
                        </G>
                    </G>
                </G>
            </G>
        </G>
    </Svg>
);

interface ArrowProps {
    colors: Colors;
}

export const ArrowUp = ({ colors }: ArrowProps) => (
    <Svg width={8} height={10} viewBox="0 0 8 10" fill="none" testID="arrowUp">
        <Path
            fillRule="evenodd"
            clipRule="evenodd"
            d="M5 4v6H3V4H0l4-4 4 4H5z"
            fill={colors.success350}
        />
    </Svg>
);

export const ArrowDown = ({ colors }: ArrowProps) => (
    <Svg
        width={16}
        height={16}
        viewBox="0 0 16 16"
        fill="none"
        testID="arrowDown"
    >
        <Path
            fillRule="evenodd"
            clipRule="evenodd"
            d="M7 9V3h2v6h3l-4 4-4-4h3z"
            fill={colors.error350}
        />
    </Svg>
);

type TrendArrowVersion = 'caret' | 'arrow';

interface TrendArrowProps {
    diff?: number;
    width?: number;
    height?: number;
    style?: ViewStyle;
    renderNoDiff?: () => React.ReactElement;
    version?: TrendArrowVersion;
    hasDiagonalTrendArrow?: boolean;
}

export const TrendArrow = ({
    diff = 0,
    width = 12,
    height = 8,
    style,
    renderNoDiff = () => <View testID="no-diff" />,
    colors,
    version = 'caret',
    hasDiagonalTrendArrow
}: TrendArrowProps & ThemeProps) => {
    if (version === 'caret') {
        return (
            <View style={style} testID="trendArrow">
                {diff > 0 ? (
                    hasDiagonalTrendArrow ? (
                        <ArrowUpDiagonal />
                    ) : (
                        <CaretUp
                            width={width}
                            height={height}
                            colors={colors}
                        />
                    )
                ) : diff < 0 ? (
                    hasDiagonalTrendArrow ? (
                        <ArrowDownDiagonal />
                    ) : (
                        <CaretDown
                            width={width}
                            height={height}
                            colors={colors}
                        />
                    )
                ) : (
                    renderNoDiff()
                )}
            </View>
        );
    }

    return (
        <View style={style} testID="trendArrow">
            {diff > 0 ? (
                <ArrowUp colors={colors} />
            ) : diff < 0 ? (
                <ArrowDown colors={colors} />
            ) : (
                renderNoDiff()
            )}
        </View>
    );
};

export default safeWithTheme(TrendArrow);