import React from 'react';
import type { SvgProps } from 'react-native-svg';
import { Svg, Path, G } from 'react-native-svg';
import { arrowTypes } from './constants';
import { useTheme } from '../../../branding';

interface TrendArrowIconProps extends SvgProps {
    width?: number;
    height?: number;
    type: string;
}

export const TrendArrowIcon = ({
    width = 16,
    height = 16,
    type,
    ...props
}: TrendArrowIconProps) => {
    const { colors } = useTheme();

    const getArrowTransform = () => {
        switch (type) {
            case arrowTypes.UP:
                return {
                    transform: 'rotate(180, 8, 8)',
                    color: colors.success350
                };
            case arrowTypes.DOWN:
                return {
                    transform: 'rotate(0, 8, 8)',
                    color: colors.error350
                };
            case arrowTypes.LEFT:
                return {
                    transform: 'rotate(90, 8, 8)',
                    color: colors.gray250
                };
            case arrowTypes.RIGHT:
                return {
                    transform: 'rotate(-90, 8, 8)',
                    color: colors.gray250
                };
            default:
                return {
                    transform: 'rotate(0, 8, 8)',
                    color: '#FFF'
                };
        }
    };

    const { transform, color } = getArrowTransform();

    return (
        <Svg
            width={width}
            height={height}
            viewBox="0 0 16 16"
            fill="none"
            {...props}
        >
            <G transform={transform}>
                <Path
                    id="shape"
                    d="M7 2C7 1.44772 7.44772 1 8 1C8.55228 1 9 1.44772 9 2V11.5858L12.2929 8.29289C12.6834 7.90237 13.3166 7.90237 13.7071 8.29289C14.0976 8.68342 14.0976 9.31658 13.7071 9.70711L8.70711 14.7071C8.31658 15.0976 7.68342 15.0976 7.29289 14.7071L2.29289 9.70711C1.90237 9.31658 1.90237 8.68342 2.29289 8.29289C2.68342 7.90237 3.31658 7.90237 3.70711 8.29289L7 11.5858V2Z"
                    fill={color}
                />
            </G>
        </Svg>
    );
};

export default TrendArrowIcon;