import { useTheme } from '@emotion/react';
import type { ReactNode } from 'react';
import React from 'react';
import { View } from 'react-native';
import Badge from '../Badge';
import { StyledBadgeWrapper } from './StyledTabs';

type StatusBadgeType = {
  type: 'status';
};

type CounterBadgeType = {
  type: 'counter';
  value: number;
  max?: number;
};

export type BadgeConfigType = StatusBadgeType | CounterBadgeType;

interface TabWithBadgeProps {
  config?: BadgeConfigType;
  tabItem: ReactNode;
}

const TabWithBadge = ({ config, tabItem }: TabWithBadgeProps) => {
  const theme = useTheme();

  if (!config) return <View>{tabItem}</View>;

  if (config.type === 'status') {
    return (
      <Badge.Status visible style={{ paddingHorizontal: theme.space.xsmall }}>
        {tabItem}
      </Badge.Status>
    );
  }

  if (config.type === 'counter') {
    return (
      <StyledBadgeWrapper>
        {tabItem}
        <Badge
          content={config.value}
          max={config.max}
          intent="primary"
          style={{ marginLeft: theme.space.xsmall }}
        />
      </StyledBadgeWrapper>
    );
  }

  return <View>{tabItem}</View>;
};

export default TabWithBadge;