import React, {FC} from 'react';
import {StyleProp, ViewStyle} from 'react-native';
import {IconProps} from '@tabler/icons-react-native';
import {Pressable} from '@components/_core';
import {Badge, IconButton, IconButtonProps} from '@components/_HuGo';
import {useTheme} from '@shared/theme';

import {styles} from './styles';

interface Props {
  disabled?: boolean;
  Icon: FC<IconProps>;
  onIconPress: () => void;
  value: number;
  variant?: IconButtonProps['variant'];
  iconContainerStyle?: StyleProp<ViewStyle>;
  badgeStyle?: StyleProp<ViewStyle>;
  containerStyle?: StyleProp<ViewStyle>;
  accessibilityLabel?: string;
}

export function BadgeIconButton({
  disabled,
  Icon,
  onIconPress,
  value,
  variant = 'tertiary',
  iconContainerStyle,
  badgeStyle = styles.badgeContainer,
  containerStyle,
  accessibilityLabel,
}: Props) {
  const {theme} = useTheme();

  return (
    <Pressable
      disabled={disabled}
      backgroundColor={theme.transparent}
      onPress={onIconPress}
      style={[styles.container, containerStyle]}
      accessibilityLabel={accessibilityLabel}>
      <IconButton
        Icon={Icon}
        onPress={onIconPress}
        variant={variant}
        style={iconContainerStyle}
      />
      <Badge show={!!value} value={value} style={badgeStyle} />
    </Pressable>
  );
}