import React from 'react';
import { Pressable, Text, View } from 'react-native';
import { useTheme } from '../../branding';
import themedStyles from './styles';
import ChevDown from '../Icons/ChevDown';
import Search from '../Icons/Search';
import ChevRight from '../Icons/ChevRight';
import DoubleChevron from '../Icons/DoubleChevron';
import type { StoreIconSizeType } from '../../components/Icons/StoreIcon/StoreIcon';

interface PillIconProps {
    color?: string;
    size?: StoreIconSizeType | number;
    active?: boolean;
}

interface PillProps {
    label?: string;
    suffix?: string;
    leftIcon?: React.ComponentType<PillIconProps>;
    leftIconSize?: StoreIconSizeType | number;
    leftIconGap?: number;
    leftIconDarkBackground?: boolean;
    chevronDown?: boolean;
    search?: boolean;
    rightChevron?: boolean;
    doubleChevron?: boolean;
    doubleChevronUp?: boolean;
    selected?: boolean;
    onPress?: () => void;
    testID?: string;
    leftIconComponent?: React.ReactNode;
}

export const Pill = ({
    label,
    suffix,
    leftIcon: LeftIcon,
    leftIconSize,
    leftIconGap,
    leftIconDarkBackground = false,
    leftIconComponent,
    chevronDown = false,
    search = false,
    rightChevron = false,
    doubleChevron = false,
    doubleChevronUp = false,
    selected = false,
    onPress,
    testID = 'pill'
}: PillProps) => {
    const { colors, theme, typography } = useTheme();
    const styles = themedStyles[theme];

    const isIconOnly =
        search || rightChevron || doubleChevron || doubleChevronUp;
    const iconColor = selected ? colors.midnight850 : colors.midnight200;

    const PillContent = () => {
        if (search) {
            return <Search color={iconColor} size={16} />;
        }

        if (rightChevron) {
            return <ChevRight color={iconColor} size={12} />;
        }

        if (doubleChevron) {
            return <DoubleChevron color={iconColor} width={12} height={12} />;
        }

        if (doubleChevronUp) {
            return (
                <View style={styles.doubleChevronUp}>
                    <DoubleChevron color={iconColor} width={12} height={12} />
                </View>
            );
        }

        return (
            <>
                {LeftIcon && (
                    <View
                        style={[
                            styles.leftIconContainer,
                            leftIconGap !== undefined && {
                                marginRight: leftIconGap
                            }
                        ]}
                    >
                        {leftIconDarkBackground && selected ? (
                            <View style={styles.leftIconDarkBackground}>
                                <LeftIcon
                                    color={iconColor}
                                    size={leftIconSize}
                                    active={selected}
                                />
                            </View>
                        ) : (
                            <LeftIcon
                                color={iconColor}
                                size={leftIconSize}
                                active={selected}
                            />
                        )}
                    </View>
                )}
                {leftIconComponent && (
                    <View
                        style={[
                            styles.leftIconContainer,
                            leftIconGap !== undefined && {
                                marginRight: leftIconGap
                            }
                        ]}
                    >
                        {leftIconComponent}
                    </View>
                )}
                {label && (
                    <Text
                        style={[
                            styles.label,
                            { ...typography.label3DS },
                            selected && styles.labelSelected
                        ]}
                        numberOfLines={1}
                    >
                        {label}
                    </Text>
                )}
                {suffix ? (
                    <Text
                        style={[
                            styles.suffix,
                            { ...typography.label3DS },
                            selected && styles.labelSelected
                        ]}
                        numberOfLines={1}
                    >
                        {` ${suffix}`}
                    </Text>
                ) : null}
                {chevronDown && (
                    <View style={styles.chevronContainer}>
                        <ChevDown color={iconColor} size={12} />
                    </View>
                )}
            </>
        );
    };

    return (
        <Pressable
            style={({ pressed }) => [
                styles.container,
                isIconOnly && styles.containerIconOnly,
                selected && styles.containerSelected,
                pressed && styles.containerPressed
            ]}
            onPress={onPress}
            testID={testID}
        >
            <PillContent />
        </Pressable>
    );
};

export default Pill;