import React from 'react';
import { View } from 'react-native';
import type { ViewStyle } from 'react-native';
import { G, Path, Svg } from 'react-native-svg';
import { useTheme } from '../../branding';
import type { Colors } from '../../branding/themes/types/colors';

export const STATUS = {
    ACTIVE_NAVBAR: 'ACTIVE_NAVBAR',
    INACTIVE_NAVBAR: 'INACTIVE_NAVBAR',
    ACTIVE_ITEM: 'ACTIVE_ITEM',
    INACTIVE: 'INACTIVE'
} as const;

type StatusType = keyof typeof STATUS;

const NAVBAR_STAR_PATH =
    'M11.2635 0.917286C11.0256 0.352933 10.4685 -0.0100907 9.85609 0.000213769C9.24372 0.0105182 8.69912 0.392081 8.48031 0.964119L6.54341 6.02796L1.33196 6.61567C0.742724 6.68212 0.247936 7.08945 0.0695458 7.65496C-0.108844 8.22047 0.062651 8.83798 0.507104 9.23052L4.48137 12.7405L3.27656 18.1598C3.14497 18.7517 3.38268 19.3646 3.87895 19.713C4.37522 20.0614 5.03244 20.0767 5.54443 19.7519L9.99237 16.9297L14.4547 19.7659C14.9666 20.0913 15.6241 20.0763 16.1207 19.728C16.6173 19.3797 16.8552 18.7666 16.7236 18.1745L15.5153 12.7397L19.5106 9.09726C19.95 8.69674 20.1113 8.07456 19.9219 7.51102C19.7326 6.94749 19.2283 6.54895 18.6363 6.49497L13.4143 6.01884L11.2635 0.917286Z';

const renderPath = (status: StatusType, colors: Colors) => {
    switch (status) {
        case STATUS.ACTIVE_NAVBAR:
            return (
                <G transform="translate(2, 1)">
                    <Path
                        d={NAVBAR_STAR_PATH}
                        fill={colors.gray0}
                        testID="activeNavbarPath"
                    />
                </G>
            );
        case STATUS.INACTIVE_NAVBAR:
            return (
                <G transform="translate(2, 1)">
                    <Path
                        d={NAVBAR_STAR_PATH}
                        fill={colors.gray500}
                        testID="inactiveNavbarPath"
                    />
                </G>
            );
        case STATUS.ACTIVE_ITEM:
            return (
                <Path
                    d="M12 2L9.27273 9.27273H2L7.45455 14.2727L5.63636 22L12 17L18.3636 22L16.5455 14.2727L22 9.27273H14.7273L12 2Z"
                    fillRule="evenodd"
                    clipRule="evenodd"
                    strokeLinejoin="round"
                    fill={colors.starred}
                    stroke={colors.starred}
                    testID="activeItemPath"
                />
            );
        default:
            return (
                <Path
                    d="M12 2L9.27273 9.27273H2L7.45455 14.2727L5.63636 22L12 17L18.3636 22L16.5455 14.2727L22 9.27273H14.7273L12 2Z"
                    fillRule="evenodd"
                    clipRule="evenodd"
                    strokeLinejoin="round"
                    stroke={colors.gray0}
                    fill="none"
                    testID="inactiveItemPath"
                />
            );
    }
};

interface StarIconProps {
    status: StatusType;
    style?: ViewStyle;
    height?: number;
    width?: number;
}

const StarIcon = ({
    status,
    style,
    height = 24,
    width = 24
}: StarIconProps) => {
    const { colors } = useTheme();
    return (
        <View style={style}>
            <Svg
                height={height}
                width={width}
                viewBox="0 0 24 24"
                testID="starIcon"
            >
                {renderPath(status, colors)}
            </Svg>
        </View>
    );
};

export default StarIcon;