import React from 'react';
import type { StyleProp, ViewStyle } from 'react-native';
import Badge from '../Badge';
import type { IconName } from '../Icon';
import Icon from '../Icon';
import {
  StyledBadge,
  StyledFilterWrapper,
  StyledText,
} from './StyledFilterTrigger';

export interface FilterTriggerProps {
  /**
   * The label of the FilterTrigger.
   */
  label?: string;
  /**
   * Whether the filter is currently active
   */
  active?: boolean;
  /**
   * The number of active filters
   */
  filterCount?: number;
  /**
   * The testID of the FilterTrigger.
   */
  testID?: string;
  /**
   * The style of the FilterTrigger.
   */
  style?: StyleProp<ViewStyle>;
  /**
   * The onPress callback
   */
  onPress?: () => void;
  /**
   * The variant of the FilterTrigger.
   */
  variant?: 'filled' | 'outlined' | 'ghost';
  /**
   * The suffix of the FilterTrigger.
   */
  suffix?: IconName;
}

const FilterTrigger = ({
  label,
  active = false,
  filterCount = 0,
  variant = 'filled',
  suffix,
  onPress,
  testID,
  style,
}: FilterTriggerProps) => {
  const shouldShowBadge = filterCount > 0 && active;

  return (
    <StyledFilterWrapper
      testID={testID}
      style={style}
      themeActive={active}
      themeVariant={variant}
      onPress={onPress}
      themeHasLabel={!!label}
    >
      {label ? (
        <>
          {suffix && (
            <Icon
              icon={suffix}
              size="xxxsmall"
              intent="text"
              testID={`${testID}-suffix`}
            />
          )}
          <StyledText variant="small">{label}</StyledText>
          {shouldShowBadge && (
            <Badge content={filterCount} size="small" intent="primary" />
          )}
        </>
      ) : (
        <>
          {suffix && (
            <Icon
              icon={suffix}
              size="xsmall"
              intent="text"
              testID={`${testID}-suffix`}
            />
          )}
          {shouldShowBadge && (
            <StyledBadge
              content={filterCount}
              size="small"
              intent="primary"
              themeHasLabel={!!label}
            />
          )}
        </>
      )}
    </StyledFilterWrapper>
  );
};

export default FilterTrigger;